June 11, 2023
Freelance Web Designer & Developer
June 11, 2023
Freelance Web Designer & Developer
Anchor tag the tag that actually interlinks the internet. Let’s see all that it can do.
There are three ways to link to pages under the same website.
What comes between the anchor tags will be shown to the user.
Absolute URLs must start with
/ refers to the homepage of the site you are on.
This will link to the about page in the same website for example if you are browsing https://raqueebuddinaziz.com and click a link with
href="/about" it will take you to https://raqueebuddinaziz.com/about. There is no about page on my site though so the link will fail if you actually click on it.
One thing to note with absolute links is that they always link to the same page no matter which page the anchor tag exists. For e.g. even if you were on https://raqueebuddinaziz.com/blog and clicked the about link it will still take you to https://raqueebuddinaziz.com/about and not https://raqueebuddinaziz/blog/about.
<a href="about">About</a> <!-- OR --> <a href="./about">About</a>
Links that don’t start with
/ are relative links. There are two syntaxes for relative links either you can just write a link that doesn’t start with
/ or write one that starts with
. represents the current URL.
If you click a relative link it will take you to a page relative to the current URL you are on. For e.g. clicking the about link on https://raqueebuddinaziz/blog will take you to https://raqueebuddinaziz.com/blog/about.
<!-- Relative Hash Link --> <a href="#linking-external-pages">Linking External Pages</a> <!-- Absolute Hash Link --> <a href="/blog/html-anchor-tag-explained#linking-external-pages">Linking External Pages</a> <div id="#linking-external-pages">Hi</div>
Hash links can be used to link to some other part of a page. They can be relative or absolute. What comes after the tag should be id of an element on the page.
Try clicking the following link: Linking External Pages
To link to external sites just put the URL in the
href attribute as you would see it on the URL bar in your browser.
Try clicking the following link: Google
If you tried to click the above link you might have noticed it opened in the current tab. Usually when link to external sites you want to open the site on a new tab. We can achieve that using the
<a href="https://google.com" target="_blank">Google</a>
Try clicking this link and see the difference: Google
<!-- EMAIL --> <a href="mailto:firstname.lastname@example.org">email@example.com</a> <!-- PHONE --> <a href="tel:1234567890">Phone</a>
Try this link: firstname.lastname@example.org
<!-- Without Filename --> <a href="/about.txt" download>Download About</a> <!-- With Filename --> <a href="/about.txt" download="about.txt">Download About</a>
You can link to files on the same website as you are on as download links. The
download attribute doesn’t work with external links.
If you don’t provide a filename to the attribute it will try to figure out the filename from the URL.
<a href="/more-about-html-anchor-tag">Click here</a> to read more about the HTML anchor tag
The following link doesn’t have accessible text: Click here to read more about the HTML anchor tag
Click to read more <a href="/more-about-html-anchor-tag">about the HTML anchor tag</a>
The following link has accessible text: Click to read more about the HTML anchor tag
<a href="https://en.google.com" hreflang="en">Google</a>
hreflang attribute can be used to hint at what is the language of the page the anchor tag links to.
It has no effect on the functioning of the tag, but rather it can be used by screen readers and other assistive technologies to make users aware language of the page the tag links to.
<a href="/assets/images/blog/html-anchor-tag-explained.svg" type="image/svg">Title Image</a>
type attribute is used by assistive technologies to make users aware the type of the resource the anchor tag links to.
MDN has a list of commonly used mime types
<a href="/" ping="https://raqueebuddinaziz.com">Link with tracking</a>
There is a
ping attribute that takes a space separated list of URLs to send a
POST request to with the body
PING whenever the link is clicked.
I have never seen the
ping attribute used in the wild but it exists so I mention it for completeness sake.
By default if you link to a URL the server that handles that URL will be told via a header named
Referrer the URL where you put the anchor tag with the link.
For e.g. if I link to google.com from this site, the servers for google.com will be told that they were linked from https://raqueebuddinaziz.com/blog/html-anchor-tag-explained
Usually it’s fine to provide this info to the server that handles the URL, but sometimes you might want to opt out of this behavior when your URL contains sensitive information or you are supposed to be in a private context.
You can opt out of this at different levels that suit your needs using the
It can have various values:
no-referrer: This is a complete opt out and would result in not sending the Referrer attribute at all.
no-referrer-when-downgrade: This will only send the referrer header if the resulting link is a
httpslink and not an
origin: This leaves the path of the URL you are only sends the domain name to the servers. For example if you were to click a link on this page with
referrerpolicy=originthe servers will only be sent
/blog/html-anchor-tag-explainedwill not be sent.
same-origin: This will only send the
Referrerheader if the link is on the same domain as the current page.
strict-origin: same as
originbut only send if the protocols (the
httpspart) are the same as the current page.
strict-origin-when-cross-origin: This is the default value. It will send the full URL in the header but only if the protocol parts are same as current page.
unsafe-url: This is same as
strict-origin-when-cross-originbut without the same protocol protection and thus considered unsafe to use.
<a href="https://google.com" referrerpolicy="no-referrer">Google</a>
There is also a
rel attribute that can be used to control the behavior of the link.
It has various possible values (You can provide multiple values by separating them with spaces):
noreferrer: This has the same same effect as
referrerpolicyattribute i.e. no
Referrerheaders will be sent.
noopener: This is a really useful attribute when you are linking to external sites, by default if you open a external site it can modify the page that opened it, to make sure it cannot do that you can use the
noopenervalue for the
relattribute. Newer browsers automatically assume
noopenerif you set
nofollow: This will let the search engines know that you don’t want them to follow this link.
<a href="https://google.com" rel="noreferrer noopener">Google</a>
If you are not aware SEO is the practice of making your site as accessible to both humans and robots (like search engines) as possible.
We can take some steps to make our links as SEO friendly as possible.
relattribute if the link needs it. (If you want you can provide multiple values by separating them with spaces)
On the surface the anchor tag seems like the most simplest tag with not much considerations.
But if you want to provide the best user experience and have your site rank first on search engines you need to understand all that the anchor tag can do.
Understanding all that these tags have to provide not only makes you a better developer but also leads to better experience for your users.
Leave a comment down below if you learned something new about the anchor tag
Get a gorgeous website at just $99/month.
30 DAY FREE TRIAL