DEV Community

Cover image for Understanding HTML Anchor Tag <a>
Aya Bouchiha
Aya Bouchiha

Posted on • Updated on

Understanding HTML Anchor Tag <a>

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>

Email

<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>
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (6)

Collapse
inhuofficial profile image
InHuOfficial • Edited

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

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:

Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.

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 😉)

Collapse
ayabouchiha profile image
Aya Bouchiha Author

Thank you a lot, your comment is ineffably useful and helpful,
the two issues are fixed 🔧 .

Collapse
inhuofficial profile image
InHuOfficial

Fantastic, I wish all authors responded so quickly and positively, top creator 💪.

🦄 and 📘 added!

Thread Thread
ayabouchiha profile image
Aya Bouchiha Author

I appreciate it a lot 😊

Collapse
lukeshiru profile image
LUKESHIRU

Suggestion: Mention that 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 make them more secure.

Cheers!

Collapse
ayabouchiha profile image
Aya Bouchiha Author

adding your suggestion is done, thank you very much for sharing with us valuable information.