Anchor Tag

Definition

Anchor tags are HTML tags that are used to create hyperlinks. Links and hyperlinks form the basis of navigation on the web and are what you click on to move from one page to another on a website. Virtually any element on a page can be wrapped in anchor tags and turned into a link, from plain text to images and other HTML elements.

Attributes of an anchor tag

The HTML <a> tag, also known as the anchor tag, accepts a number of different attributes. HTML attributes are data added to the tag to give additional information. Most are optional, but some are required. The anchor tag requires a href attribute at a minimum, but there are many other optional attributes.

An example of a HTML anchor tag using all of the below attributes looks like:

<a href="www.google.com" name="google_link" target="_blank" title="Link to Google">Link to Google</a>

Href attribute

The href attribute is required, as this is what creates the link. Href stands for hypertext reference and contains two elements; the URL and the clickable text called anchor text. Href specifies the location to send users to when they click on the link. In the example above, the anchor text is "Link to Google".

Name attribute

The name attribute is now obsolete as of HTML5, and instead, it is advised to use the id attribute. Prior to HTML5, the name and id attribute were interchangeable. They were used to give an element a name to identify it for use elsewhere, such as in CSS or javascript.

Target attribute

The target attribute is used to describe how the user will be sent to the page in the link. The two most common values are:

"_self", which is the default option if not otherwise specified, and sends users to the link within the same browsing context, usually a tab.

"_blank" opens the anchor link in a new window or tab. This is typically used to link to external pages.

Other target attributes include "_parent" and "_top", though these are rarely used and were generally applicable when iframes were extensively used, which have since fallen out of favor. They enabled developers to open a link in a parent frame or the topmost frame on a page.

Title attribute

The title attribute is used to provide a name for the link. This name will show in several contexts, for example when a user hovers their mouse over the link, and when a user with a screen reader highlights the anchor tag. This is considered optional but is recommended for accessibility purposes.

Additional attributes

The anchor tag supports additional attributes. Some of these are common to other HTML tags, such as 'class' and 'id', but some of them are unique to the anchor tag. They typically apply to very specific use cases.

Download attribute

This provides a hint to the browser that the link should trigger a download of the linked content, rather than navigating to it. It can be left blank, in which case a best-guess will be used to specify a filename, but any value entered into the download tag will be used for the suggested filename.

hreflang attribute

This HTML attribute can be used to hint to the browser what the language of the link is. This will be a value, such as "fr" for French or "en-GB" for British English. Hreflang can be useful for providing additional context for search engines and preventing duplicate content. Multi-lingual websites can specify that a link goes to a page in a particular language.

rel attribute

The HTML rel attribute allows you to specify a relationship between two pages. This accepts a range of values, including "canonical", "external", and "help". These hint at certain behaviors, such as the link being intended as the canonical version of a page, an external link outside of the control of the website, or that the link contains more information about the current link.

Importance for search engine optimization

Anchor tags are foundational to how the web works and are incredibly important for SEO. Having many relevant external sites link to your website is one of the best ways to increase your page rank and priority in search results.

Several attributes within the anchor tag are particularly useful with regards to SEO. Multi-lingual sites are highly recommended to take advantage of the hreflang attribute and using rel to designate canonical versions of pages. Otherwise, search engines may consider multi-lingual versions of the same page as duplicate content and penalize their placement in search results.

The rel attribute can also contain values such as "nofollow" and "noopener". Nofollow specifies that the linked page should not be followed, crawled, and considered for the page's ranking by search engines. Noopener tells the browser to not allow the linked page to alter the parent page at all. This is also recommended for external links, as otherwise, it is possible for malicious external sites to modify your page elements.