DEV Community

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

Posted on • Edited on

8 2

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!

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (5)

Collapse
 
grahamthedev profile image
GrahamTheDev • 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

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

Collapse
 
grahamthedev profile image
GrahamTheDev

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

🦄 and 📘 added!

Thread Thread
 
ayabouchiha profile image
Aya Bouchiha

I appreciate it a lot 😊

Collapse
 
ayabouchiha profile image
Aya Bouchiha

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

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay