What are HTML anchor tags?
An HTML anchor tag (<a>) is an element to link to web pages, directories, email addresses, images and more.
The element starts with <a and ends with </a>. Within these two markers are various attributes that make up the complete tag. We will discuss the attributes a little below in this article.
You can also use anchor tags to create anchor links. Anchor links lead to different sections of the same web page.
When creating text links with the a tag, you must use anchor text. The anchor text is the visible part of the link that can be clicked. Google uses this text to extract information about the link and the content it points to.
You can add different attributes to your anchor tags. These are used to specify what you want to happen when a user clicks. They also serve to add one of the semantic indications for crawlers and web browsers.
The “href,” attribute defines a hypertext reference anchor. It is used to specify the target of the anchor element. A Href tag looks like this:
<a href="URL">
It is commonly used to define the URL of the page to which the tag leads. It can also be used to link files, email addresses, phone numbers, and more.
For example, a link to a web page would use a code snippet similar to this:
<a href="https://exemple.com">Website</a>
The href anchor tag is summarized at the URL address in quotation marks. In our example, the words “Website” are the anchor text, the visible and clickable portion of the link.
The “hreflang” attribute indicates the language of the linked resource, using a two-letter ISO 639-1 language code. The tag looks like this:
<a hreflang="language_code">
If you want to specify English as the language of the page, you should use the following code:
<a href="https://exemple.com" hreflang="en">Website</a>
The hreflang attribute is the country code or two-letter languages. In our example, this is the "en" in quotation marks. Note that the hreflang attribute can only be used if the href attribute is also used.
The “Download” attribute tells the browser to download the linked resource instead of opening it. The tag should look like this:
<a download="filename">
It is important to enter the full file name, including its extension. For example, if the file is a PDF, the code should look like this:
<a href="example.pdf" download="Example">
The attribute of this tag type is the file name. In this case, “Example”.
If no file name is specified, the original file name will be extracted from the document.
The “rel” tag attribute specifies the nature of the relationship between the current resource and the linked resource. The tag should look like the following:
<a rel="value">
This type of tag must be assigned a value. The most common rel attribute values are:
rel= "alternate": This value is used to identify the linked resource as an alternative version of the current resource
rel= "author": Provides a link to the author of the resource to which the tag is assigned.
rel= “bookmark”: Indicates that the URL is permanent and can be used as a bookmark. Often used in long article indexes to quickly navigate to a specific section.
rel="help": This value indicates that the link contains a help document for users of the current page
rel="next": Used to specify that a link leads to the next page of the series. Used especially for articles, news, or photo galleries.
rel= "prev": Value to specify a link to the previous page of the series
rel= "nofollow": Tell search engine crawlers not to follow the link. Used to indicate that you do not approve and endorse the link
rel=“search”: Allows you to specify the linked page. To do this, you can search for content on the page or the whole site
For example, you can use the following code to indicate that the link is a page about the author of the article:
Article written by <a href="https://example.com/+AuthorName"
rel="author">Author Name</a>
Note that search engines like Google use the “rel” attribute to get more information about a link.
The “target” attribute tells the browser where to open the link. The target can be the same tab, a new tab, a new window, etc.
A Target tag looks like this:
<a target="value">
The different possible values of the target tags include:
_self: indicates to open the link in the same frame (usually the same tab or window)
_blank: Opens the link in a new tab or window. This is the most common approach at this time.
“_parent”: Instructs the browser to open the link within the next higher-level framework, called the parent framework
“_ top”: This value ignores all images and opens the link as the top _document.
“framename”: Indicates to open the link within the defined frame.
For example, to create a link that opens in a new tab, the tag would look like this:
<a href="https://example.com" target="_blank">Website</a>
The element starts with <a and ends with </a>. Within these two markers are various attributes that make up the complete tag. We will discuss the attributes a little below in this article.
You can also use anchor tags to create anchor links. Anchor links lead to different sections of the same web page.
When creating text links with the a tag, you must use anchor text. The anchor text is the visible part of the link that can be clicked. Google uses this text to extract information about the link and the content it points to.
HTML anchor element attributes
You can add different attributes to your anchor tags. These are used to specify what you want to happen when a user clicks. They also serve to add one of the semantic indications for crawlers and web browsers.
Some of the most common and important attributes are:
Href (hypertext reference)
The “href,” attribute defines a hypertext reference anchor. It is used to specify the target of the anchor element. A Href tag looks like this:
<a href="URL">
It is commonly used to define the URL of the page to which the tag leads. It can also be used to link files, email addresses, phone numbers, and more.
For example, a link to a web page would use a code snippet similar to this:
<a href="https://exemple.com">Website</a>
The href anchor tag is summarized at the URL address in quotation marks. In our example, the words “Website” are the anchor text, the visible and clickable portion of the link.
Hreflang (language reference)
The “hreflang” attribute indicates the language of the linked resource, using a two-letter ISO 639-1 language code. The tag looks like this:
<a hreflang="language_code">
If you want to specify English as the language of the page, you should use the following code:
<a href="https://exemple.com" hreflang="en">Website</a>
The hreflang attribute is the country code or two-letter languages. In our example, this is the "en" in quotation marks. Note that the hreflang attribute can only be used if the href attribute is also used.
Download
The “Download” attribute tells the browser to download the linked resource instead of opening it. The tag should look like this:
<a download="filename">
It is important to enter the full file name, including its extension. For example, if the file is a PDF, the code should look like this:
<a href="example.pdf" download="Example">
The attribute of this tag type is the file name. In this case, “Example”.
If no file name is specified, the original file name will be extracted from the document.
Rel (relationship)
The “rel” tag attribute specifies the nature of the relationship between the current resource and the linked resource. The tag should look like the following:
<a rel="value">
This type of tag must be assigned a value. The most common rel attribute values are:
rel= "alternate": This value is used to identify the linked resource as an alternative version of the current resource
rel= "author": Provides a link to the author of the resource to which the tag is assigned.
rel= “bookmark”: Indicates that the URL is permanent and can be used as a bookmark. Often used in long article indexes to quickly navigate to a specific section.
rel="help": This value indicates that the link contains a help document for users of the current page
rel="next": Used to specify that a link leads to the next page of the series. Used especially for articles, news, or photo galleries.
rel= "prev": Value to specify a link to the previous page of the series
rel= "nofollow": Tell search engine crawlers not to follow the link. Used to indicate that you do not approve and endorse the link
rel=“search”: Allows you to specify the linked page. To do this, you can search for content on the page or the whole site
For example, you can use the following code to indicate that the link is a page about the author of the article:
Article written by <a href="https://example.com/+AuthorName"
rel="author">Author Name</a>
Note that search engines like Google use the “rel” attribute to get more information about a link.
Target
The “target” attribute tells the browser where to open the link. The target can be the same tab, a new tab, a new window, etc.
A Target tag looks like this:
<a target="value">
The different possible values of the target tags include:
_self: indicates to open the link in the same frame (usually the same tab or window)
_blank: Opens the link in a new tab or window. This is the most common approach at this time.
“_parent”: Instructs the browser to open the link within the next higher-level framework, called the parent framework
“_ top”: This value ignores all images and opens the link as the top _document.
“framename”: Indicates to open the link within the defined frame.
For example, to create a link that opens in a new tab, the tag would look like this:
<a href="https://example.com" target="_blank">Website</a>
Updated on: 18/05/2023
Thank you!