Anchor elements come with several attributes. In this page, we discuss three of those attributes: target, hreflang, and rel.
When we click an anchor link, the browser would load the page on the same browser window. If needed, we can specify the window (frame) target for an href. And this is where the "target" attribute comes into the picture. For cases where we would like to open a new window, we can use this attribute and set it to _blank type: target="_blank". By default, it points to the same page which is as: target="_self". For cases where a browser supports multiple tabs in the same window, the browser might simply open a new tab instead of opening a new window.
Let us see an example so that the target window for the href URL would be a new one.
<!doctype html>
<html>
<head>
<title> Adding Links to an HTML page</title>
</head>
<body>
<!-- Example of an anchor tag -->
<a href="https://codingbison.com" target="_blank">Codingbison Home Page</a>
</body>
</html>
For good user-experience, we should stick with the default behavior in almost all cases. This is because, if we open new windows for new links, then we can end up opening multiple windows and now the user would need to close all those windows. Some users might find that to be annoying!
However, exceptions do exist. There could be cases, where we do want the user to open a new window (or tab) when clicking a link. One reason for that could be that user could loose the context on the current page if the same window (or tab) loads a new page and the earlier information would be lost. Yet another reason is when the href is pointing to a non-HTML content (let us say, a PDF file). For such cases, it is a good idea to add a note saying that this anchor would open a new link so that user is not surprised.
The hreflang attribute indicates the language of the page. Thus, if we have the current page in English, then we can rewrite the above example to indicate that.
<!doctype html>
<html>
<head>
<title> Adding Links to an HTML page</title>
</head>
<body>
<!-- Example of an anchor tag -->
<a href="https://codingbison.com" hreflang="en">Codingbison Home Page</a>
</body>
</html>
For cases, where we can have content in multiple languages with one page for each language, it is a good idea to keep the hreflang in the anchor field. This tag is also used by search-engine providers to note that a web-server has different variations of the same page but in different languages.
The anchor element has yet one more attribute: rel. This attribute indicates the relationship between the current webpage and the linked resource. This attribute does not affect the destination address provided by the href attribute. The href can take one or more values. If multiple values are specified, then we need to separate them using spaces.
One of the common values of the rel attribute is the "nofollow" value. When specified, it means that the current document does not consider the page specified in the href as an endorsement of the destination page. For Google crawler-bot, it could possibly mean that it would not consider the destination page as deriving any (page-rank) value from the (page-rank) value of the current page. Please note that "nofollow" does not mean that the crawler-bot should not follow the destination link.
Some of the other values of the rel attribute are: alternate, author, next, and prev. The alternate value means that the address specified by the href provides an alternate representation of the current page. The author value indicates that the address specified by the href is a link to the author of the current page. The next and prev specify the relationship of the current page with respect to a series of pages. The next value means that the address specified by the href is the next page with respect to the current page. The prev value means that the address specified by the href is the prev page with respect to the current page.