The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address. Content within each <a> should indicate the link's destination.
When To use anchor tags?
Absolute URLs
<a href="www.example.com>text</a>
Example:
Relative URLs
<a href="/about-me">about me</a>
<a href="mailto:example@gmail.com">text</a>
Example:
Phone Number
<a href="tel:+12345678910>text</a>
Example:
a section or a part of your page
<a href="#section-id">text</a>
Example:
Image as a link
Note:
Image as a link must have an alt attribute on the image otherwise there is no link text. The alt text should be the same as if the image didn't exist and the link was just text.
Without an alt attribute, it is bad for SEO and, more importantly, people using assistive technology have no way of knowing what that link does do you are (unintentionally) excluding them!
<a href="link">
<img src="img link" />
</a>
Example:
Note:
anchors give access from the target site to the source, meaning that if foo.com has an anchor to bar.com, bar.com can get data about foo.com. To avoid this, ideally, all anchors should have the attribute rel with the value noopener noreferrer which makes them more secure.
References
To Contact Me:
email: developer.aya.b@gmail.com
telegram: Aya Bouchiha
Have a great day!
Top comments (5)
Hey! Please could you fix the following errors as they are awful habits for a beginner to pick up:
Image Links
Image as a link must have an
altattribute on the image otherwise there is no link text. Thealttext should be the same as if the image didn't exist and the link was just text.Without an
altattribute it is bad for SEO and, more importantly, people using assistive technology have no way of knowing what that link does do you are (unintentionally) excluding them!JavaScript
<a href="javascript:codeblock">text</a>is an anti-pattern that has not been needed for nearly 15 years since HTML5 and the ability to style buttons.From the JavaScript section on the MDN article you linked to:
Hell I even wrote a silly article on this very point it is that big of a problem!
Please could you fix the first one and (delete?) or fix the second one so this post doesn't accidentally cause more bad practices!
Other points are great and this will make a useful reference piece for people learning if you fix those two issues. ❤ (unicorn to follow when you fix those points 😉)
Thank you a lot, your comment is ineffably useful and helpful,
the two issues are fixed 🔧 .
Fantastic, I wish all authors responded so quickly and positively, top creator 💪.
🦄 and 📘 added!
I appreciate it a lot 😊
adding your suggestion is done, thank you very much for sharing with us valuable information.