Anchor Tag
Contents
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 an HTML anchor tag using several attributes could look like this:
<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 the URL to send users to when they click on the link. In the example above, this is www.google.com.
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 specify alternative language versions of the respective web page. 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.
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 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. In addition, it's a common SEO best practice to use a rel=canonical link to designate canonical versions of pages. Otherwise, search engines may consider different URL versions of the same page (e.g. due to URL parameters) as duplicate content which can have a negative impact on search engine rankings.
The rel attribute can also contain values such as "nofollow". Nofollow specifies that the linked page should not be followed and crawled by search engines.
In summary: Anchor tag FAQS
What are anchor tags used for?
Anchor Tags are used to add hyperlinks to text, images, or other HTML elements.
How do you create an anchor tag?
You can create anchor tags in HTML, using the <a> tag combined with one or more attributes.
What are the most important attributes of an anchor tag?
The most important attributes are:
- Href
- Name
- Target
- Title
How do anchor tags affect SEO?
Anchor Tags are relevant for SEO as they can be used, for example, to create canonical links in order to avoid duplicate content.