Important things to know about the anchor tag <a>
#html#webdev#learning#beginners
Idriss Douiri

Idriss Douiri @douiri

About: a web developer who loves spreading knowledge.

Joined:
Jun 9, 2024

Important things to know about the anchor tag <a>

Publish Date: Jun 23 '24
2 3

Most of us are familiar with using the anchor tag to link to other pages on the web, but there's so much more to this versatile element that often goes unnoticed by beginners. In this article, we'll explore some of the lesser-known features and functionalities of the anchor tag that can enhance your HTML skills and web development projects.

href attribute

The URL that the hyperlink points to. which can be one of these schemes:

  • HTTP URL: 
<a href="https://douiri.org">read more</a>
Enter fullscreen mode Exit fullscreen mode
  • targeting specific id by using # sign: 
<a href="#content">skip to main content</a>

<main id="content">
</main>
Enter fullscreen mode Exit fullscreen mode
  • a piece of media using media fragments 
<a href="https://example.com/video.mp4#t=30,60">Watch from 30 to 60 seconds</a>
Enter fullscreen mode Exit fullscreen mode
  • a text fragment with this syntax 
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
Enter fullscreen mode Exit fullscreen mode

try this example to see how it works in action: https://douiri.org/blog/css-floating-label/#:~:text=support

learn more about text fragments

  • telephone, email, or sms 
<a href="mailto:drisspennywise@gmail.com">send email</a>
<a href="tel:+212651501766">call me</a>
<a href="sms:+212651501766">send SMS</a>
Enter fullscreen mode Exit fullscreen mode

download attribute

The download attribute instructs the browser to download the linked resource instead of navigating to its URL, provided the resource is from the same origin or uses :blob or :data schemes. You can either specify the desired file name or allow the browser to determine the appropriate name and extension.

<a href="/videos/video.mp4" download>download video</a>
<a href="/cat-4321.png" downalod="cat.png">download image</a>
Enter fullscreen mode Exit fullscreen mode

rel attribute

The rel attribute accepts multiple values and can be used with various elements. While you can view the full list here, I want to focus on the values that control search engine crawlers: nofollow, ugc, and sponsored.

<a href="https://example.com" rel="nofollow">some link</a>
Enter fullscreen mode Exit fullscreen mode
  • nofollow: indicates that the link should not pass ranking credit (i.e., Non-Endorsed)
  • ugc: indicates that the link is user-generated content (i.e., comments, posts...)
  • sponsored: indicates that the link is a sponsored content.

Comments 3 total

  • Jenna
    JennaJun 24, 2024

    👍🏼
    Here is some additional info:

    Accessibility: Attributes like alt, title, and aria-label play crucial roles in making links more accessible. They provide alternative text and descriptions that assist users who rely on screen readers or other assistive technologies.

    Given that setting target="_blank" on <a> elements now provides the same behaviour as rel="noopener", which prevents the new tab or window from accessing window.opener, and considering browser compatibility.

    Should we continue to use rel="noopener noreferrer" to ensure security when opening external links in new tabs or windows?

    I've noticed mixed opinions online and would like to hear from fellow devs!

    Learn more about noreferrer
    Learn more about noopener
    Learn more about anchor element

    Note: You mentioned beginners at the start of your post. You might want to add the #beginners tag to your post. This helps those following the #beginners tag find your article more easily! 😉

    • Idriss Douiri
      Idriss DouiriJun 25, 2024

      Thanks for the additional info!
      for me, I don't use rel="noopener" but if you want maximum security and support for older browsers it's good to have it.

      Also, thanks for the tip about the #beginners tag – I'll make sure to add it ✨

      • Jenna
        JennaJun 27, 2024

        You are welcome :-)
        I don't use it either, it is good to know other opinions.
        Thank you for sharing.

Add comment