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>
- targeting specific id by using # sign:
<a href="#content">skip to main content</a>
<main id="content">
</main>
- a piece of media using media fragments
<a href="https://example.com/video.mp4#t=30,60">Watch from 30 to 60 seconds</a>
- a text fragment with this syntax
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
try this example to see how it works in action: https://douiri.org/blog/css-floating-label/#:~:text=support
- 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>
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>
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>
-
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.
Top comments (3)
👍🏼
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! 😉
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 ✨
You are welcome :-)
I don't use it either, it is good to know other opinions.
Thank you for sharing.