Hyperlink Attributes in HTML
HTML Anchor <A> Tag Attributes
The power of HTML hyperlinks can be utilized maximum by adding attributes to the anchor <a> tag. These attributes only decide how the target link should behave and not on the content of the target link. Though there are many attributes an anchor tag <a> can support, here we will discuss some important ones from practical use point.
This is a hyperlink reference specifies the target URL. The URL shall be an absolute or relative and can include an identifier.
<a href="https://www.webnots.com/">Home</a> | <!-- Absolute Link -->
<a href="index.html">Home</a> <!-- Relative Link -->
The target link by default will open in the same browser window which you can customize with this attribute to tell the browser how the link should be opened.
|Value||How it Opens?|
|_blank||Link will be opened in a new window or tab|
|_top||Link will be opened in the same window with full body|
|_parent||Link will be opened in the same window in the parent frame|
|_self||This is the default value will open the link in the same frame|
|Framename||Link will be opened in the mentioned frame|
For example, below is the code showing how to use <a> tag to open a link in a new window or tab.
<a href="https://www.webnots.com/" target="_blank">Home</a> <!-- Link will open in a new window or tab -->
Name and ID
Specifies the name or id of an anchor and used with another href link to tell the browser to go to that section. Name attribute is not supported in HTML5 and hence use of ID attribute is recommended.
Below is an example code showing how to use id attribute within anchor <a> tag.
<a id="Link_Types"> Types of Links </a>
This is an attribute specifies the relationship between the current document and the target link. Browsers do not use this attribute but search engines use this to determine a link weightage for ranking. The values of this attributes are:
|alternate||Alternate version of a document is linked|
|author||Linking to the author|
|help||Help document is linked|
|nofollow||Indicates the link is not to be followed by the search engine’s crawlers|
Nofollow is an important attribute informs the search engines not to follow the link and hence will not be included when the popularity of a page. Below is an example of how to use nofollow attribute in HTML anchor tag.
<a href="https://www.webnots.com/" rel="nofollow">Home</a> <!-- Link will not be followed by a search engine crawler for calculating link weightage -->
|coords||Used to specify the coordinates of a link and not supported in HTML5.|
|download||Indicates that the hyperlink is a downloadable target and the browser downloads the files directly or ask for the location to store the file. Supported in HTML5 by the browsers Chrome and Firefox.|
|hreflang||If you want to link a document with a different language then use this attribute to indicate the language of the linked document.|
|type||Indicates the MIME type of the linked document.|
Here is the code for how to use download attribute within anchor <a> tag:
<a href="https://img.webnots.com/2014/05/Do-It-Yourself-SEO-Guide-for-Beginners.pdf" download> Download Step By Step SEO Tutorial
</a> <!--File will be downloaded by the browser -->