<a>

The <a> tag is a small abbreviation for anchor in HTML.

It is used to create hyperlinks, allowing users to navigate from one page to another, download a file, or redirect to a specific section of a document.

It is one of the most fundamental tags for web navigation. 😉

Structure of the <a> tag

The <a> tag uses an inline structure (🇺🇸). It also works as a pair, meaning it encloses an element.

• An opening tag <a>;
• A closing tag </a>.

This means it does not cause a line break for surrounding elements, keeping them side by side. Using an <a> tag in text will not create any breaks.

Links always follow this structure:

<a href="URL" [attributes]>Clickable content</a>

Links can be used for various purposes! Let's explore practical cases.

Creating a link to an external website

<a href="https://www.google.com">Search on Google</a>

Creating a link to a page on our website

There are two types of links you can create when redirecting to a page on your website.

Creating a link to a part of a page

This refers to a link to an anchor. It is essentially a link that starts with a hash (#) followed by the name of an id.

For example:

<div id="presentation"></div>

...

<a href="#presentation">Scroll to "Presentation"</a>

Creating a link to another page

You can also create a link to another page on your website by specifying only the relative URL.

<a href="/articles">Visit our blog</a>

Creating a download link

To create a link that triggers a download when clicked, just add the download attribute:

<a href="/files/guide.pdf" download>Download the guide</a>

Creating a link to open an email

The <a> tag can also automatically open a new email, making life easier for users.

To do so, simply add mailto: followed by the recipient's email address.

<a href="mailto:hello@believemy.com">Send an email</a>

Creating a link to call a phone number

Finally, you can also create a link that automatically dials a number.

Similar to sending an email, specify tel: followed by the phone number to dial.

<a href="tel:+1234567890">Call this number</a>

Attributes

The <a> tag offers many attributes! Fortunately, only a few are commonly used.

Here is a complete list of attributes you can use with the <a> tag:

• href - Defines the link's target URL
• target - Defines where to open the link:
  • _self: in the same window (default);
  • _blank: in a new tab;
  • _parent: in the parent window;
  • _top: in the full window.
• rel - Defines the relationship between the link and the current page (useful for SEO):
  • nofollow: search engines do not follow this link;
  • noopener and noreferrer: work together to secure opening a link in a new tab.
• download - Triggers a download
• type - Defines the MIME type of the target resource
• ping - Provides a URL to send notifications when the link is clicked (for advanced usage)
• title - Adds a tooltip that appears when the user hovers over the link

For example, here is a link that displays the text "Open in a new tab" as a tooltip and opens in another browser tab:

<a href="https://believemy.com" target="_blank" title="Open in a new tab">
    Click here to be redirected
</a>

Compatibility

The <a> tag is supported by all modern and older browsers.