Element.How also offers premium tutorials! Check them here:

Table of Contents

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.

The <a> Tag

Access tutorial

$99/one time Purchase access


  • Gain Access to This TutorialUnlock complete access to the current tutorial: Links
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access


  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: Premium AccessLifetime Premium Access to ShapeDividers.comVisit
  • 30 day money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • Lifetime access to everything Element.howThe price reflects what is currently available on All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.

    I will say that it is definitely my intention to keep adding tutorials to
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me. also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2737 Elements right here:

Checkout the Elementor Addon Finder directly

3 Responses

  1. 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!

    1. 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

      resulting html from custom link attribute

      Hope this helps!

  2. 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.

Leave a Reply