HTML knowledge cannot be complete without a good grasp of HTML links. They are very important in creating a navigation menu and linking to different files, documents, and specific positions on a webpage.
In HTML, there are four element tags used to link documents. These are <a>, <link>, <form> and <area> tags. All four have different use cases. However, this chapter focuses on the <a> tag.
You can visit the Basic Tags and Document Format chapter for more info on the <link> tag. We've also extensively covered the <form> element in our HTML form chapter.
Let's now switch our focus to the <a> tag.
3 Responses
Hi Maxime,
Can you please elaborate and give more examples of the Custom Attributes function and what it is used for? Can we use it as an aria-label? What other uses does it have?
Also, in the link settings, there's also a checkbox for "Add nofollow" - what is it and when should we use it?
Thanks and Merry Christmas!
Michal
Hey Michal!
Elementor has a pretty good write down about adding custom attributes to links.
nofollow is an attribute that can be added to a hyperlink in HTML to indicate that the link should not influence the ranking of the link's target in the search engine's index. This can be useful for links to external sites that you do not want to vouch for (links that you don't want to give any 'SEO juice' to), or for links that point to untrusted content.
noopener is an attribute that can be added to a hyperlink in HTML to prevent the linked document from being able to access the window object of the link's opener (i.e., the window that contains the link). This can be useful for security purposes, as it can prevent the linked document from being able to access sensitive information such as the browsing history of the opener.
noreferrer is an attribute that can be added to a hyperlink in HTML to prevent the browser from sending a Referer header to the server when the link is clicked. The Referer header contains the URL of the page that contained the link, and is used by servers to track the origin of traffic. By using noreferrer, you can prevent the server from receiving this information.
These attributes can be used together or separately, depending on your needs. For example, you might use rel="nofollow noopener noreferrer" on a link to an external site that you do not trust, to indicate that you do not want to vouch for the site and to prevent the linked document from being able to access the opener's window object or referrer information.
It's unclear why Elementor only has the option to enable only one of these. To change the others you will probably have to use the 'custom attributes' field instead of ticking that box. You would enter the following to have nofollow and noopener, for example: rel|nofollow noopener
Hope this helps!
Your explanation about these attributes is very clear and helpful! I have never really understood about “Add nofollow” or that those other two attributes even existed.