All about the <a> html tag.

420 upvotes

The <a> tag represents a link to a website, a section of a website, an email adress, and more. Example usage:

<a href="http://example.com/">Example website</a>

Avalible attributes:

Deprecated attributes:

The href Attribute

You can pass:

An URL:

<a href="http://pzpl.xyz/">A website</a>

It will go to the specified URL.

An ID:

<a href="#attributes">View all attributes</a>

It will go to the element on the current page with that ID.

JavaScript:

<a href="javascript:menuOpen();">Open the menu</a>

It will run the specified javascript.

An Email Adress:

<a href="mailto:webmaster@ourweb.site">Contact us.</a>

It will open the default email client on the user's computer. You can also pass subject and body of the email:

<a href="mailto:webmaster@ourweb.site?subject=Hello&body=I like trains.">Contact us.</a>

A Phone number:

<a href="tel:+48555555555">Give us a call.</a>

Note: you have to provide the area code for the phone number. For example, it's +1 for USA and Canada, +48 for Poland or +352 for Luxembourg

A SMS:

<a href="sms:+48555555555?body=some text"></a>

You can provide a body for the SMS.

You can also include links for other protocols:

<a href="ftp://example.com">FTP</a>
<a href="magnet:?xt=urn:btih:b55c37be98627d3acb1dd713a33fe1882b01ca02&dn=archlinux-2021.04.01-x86_64.iso">Magnet</a>
<a href="bitcoin:14qViLJfdGaP4EeHnDyJbEGQysnCpwk3gd">Bitcoin</a>
<a href="geo:37.786971,-122.399677">Geo coordinates</a>
<a href="im:human@example.com">IM</a>
<a href="irc:irc.freenode.net:+6697/mIRC">IRC</a>
<a href="mms:+48555555555">MMS</a>
<a href="openpgp4fpr:653909A2F0E37C106F5FAF546C8857E0D8E8F074">OpenPGP</a>
<a href="skype:SkypeName?call">Call me on Skype</a>
<a href="ssh://user@example.com">SSH into the VM</a>
<!-- There is also the news, nntp and the sip protocol, but I could not find an example. -->

The download attribute

By adding the download attribute to an <a> tag, you can force the browser to download the page/file instead of displaying it.

<a href="cv.pdf" download>Download the CV</a>

The hreflang attribute

It allows you to specify the language of the page that the link forwards to.

<a href="/es" hreflang="es">Spain</a>
<a href="/jp" hreflang="jp">Japan</a>
<a href="/pl" hreflang="pl">Poland</a>
<a href="/se" hreflang="se">Sweden</a>
<a href="/en" hreflang="en">International</a>

The ping attribute

When a link is clicked, the web browser will send a POST request to the server. It's typically used for tracking.

<a href="stuff" ping="/steal-all-user-data-with-google-analytics.php">totally not a spying link</a>

The referrerpolicy attribute

It defines how much of the referrer header to send when the link is clicked.

<a href="yes.php" referrerpolicy="origin">click here</a>

You can see all the possible values here.

The rel attribute

It defines the relationship of the URL.

<a href="fr" rel="alternate" hreflang="fr">See this article in french</a>
<a href="old" rel="archives">Our archives</a> <!-- Obsolete, do not use. -->
<a href="/authors/john-smith" rel="author">Author</a>
<a href="/article/i-like-trains" rel="bookmark">Permalink</a>
<a href="http://cement-is-good.com" rel="external">Clicking on this link will make you leave the page.</a>
<a href="page.php?p=0" rel="first">Go to the first page.</a> <!-- Obsolete, do not use. -->
<a href="http://free-microsoft-tech-support.indiahost.in" rel="help">Send help i don't know how to use your UI</a>
<a href="page.php?p=13" rel="last">Last page</a> <!-- Obsolete, do not use. -->
<a href="license.html" rel="license">Licensed under the MIT license</a>
<a href="page.php?p=4" rel="next">Go the the next page</a>
<a href="http://wehavetheworstui.com" rel="nofollow">Use this when you do not endorse this website, or have no control over it.</a>
<a href="http://downloadfreeviruses.com" rel="noopener">This link is not trusted.</a>
<a href="http://we-want-to-steal-your-data.googleanalytics.com" rel="noreferrer">This link will not send a Referer header.</a>
<a href="http://dontdownloadfreeviruses.com" rel="opener">Revert the noopener rel attribute</a>
<a href="page.php?p=2" rel="prev">Go the previous page</a>
<a href="search.php" rel="search">Search</a>
<a href="/tags/css" rel="tag">Tags: CSS</a>

The target attribute

It tells the web broweser in which tab or window the link will open. In case of target set as _blank, it is recommended to set the rel attribute to noopener noreferrer

<a href="yes.php" target="_blank" rel="noopener noreferrer">Open this link in a new tab</a>
<a href="yes.php" target="_self">Open this link in the current tab</a>
<a href="yes.php" target="_parent">Open this link in the parent browsing context</a>
<a href="yes.php" target="_top">Open this link in the top browsing context</a>

The type attribute

It tells the browser what is the MIME type of the link.

<a href="download.php?file=83962eae-ab7b-47bb-a521-9d278342bc1f" type="application/vnd.amazon.ebook">Amazon Kindle eBook</a>

Obsolete attributes that should not be used.

<a href="yes.php" charset="UTF-8">A link to a resource encoded using UTF-8</a>
<a href="yes.php" charset="SHIFT-CIS">A link to a resource encoded using SHIFT-CIS</a>
<a href="yes.php" coords="54,574" shape="54;323">Some coordinates</a>
<a href="yes.php" name="top 10 ways to eat cement">click here</a>
<a href="yes.php" rev>This attribute was depracated for being too confusing, I am also confused about this attribute.</a>

Data sourced from MDN.

Go Back