This content originally appeared on DEV Community and was authored by Idriss Douiri
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.
This content originally appeared on DEV Community and was authored by Idriss Douiri