HTML a Tag Tutorial - We Work Worldwide

In this section we will see what HTML <a> tag is and how it works.

HTML <a> Tag: How to HTML a Link?

In a typical design of a website usually, there’re a couple of links that connects you to different sections of that website. For example, there might be a site that has a “Home” button where if you click, you’ll be headed towards the homepage of that website. Or there might be a “Contact Us” link and if you clicked it, the Contact Us page appears on your screen.

These connections and links are created via HTML <a> element.

HTML <a> Element stands for anchor and is a way of linking (AKA anchoring) different pages of a website or other websites together.

HTML <a> Tag Syntax:

<a href="url"> Value </a>

HTML <a> Tag Values

The value that we set in the body of the <a> element will be turned into a link where users can click and be forwarded to the destination (another page or website) that is specified for the link in the “href” attribute.

What is href in HTML?

The href attribute is the one we use to set the URL as its value where we want the user to be headed when she clicks on the link.

The value of the href attribute can be either a relative or absolute URL.

Example: anchor in HTML

<!DOCTYPE html>
<html>
<head>
<title> HTML is fun 🙂 </title>
</head>
<body >
<hr>
Five Tech Companies:
<a href="https://en.wikipedia.org/wiki/Facebook,_Inc."> Facebook</a>
<a href="https://en.wikipedia.org/wiki/Samsung_Electronics"> Samsung</a>
<a href="https://en.wikipedia.org/wiki/Apple_Inc."> Apple</a>
<a href="https://en.wikipedia.org/wiki/Alphabet_Inc."> Alphabet</a>
<a href="https://en.wikipedia.org/wiki/Microsoft"> Microsoft</a>
<hr>
</body>
</html>

Example: HTML tag a href

<!DOCTYPE html>
<html>
<head>
<title> HTML is fun 🙂 </title>
</head>
<body >
<hr>
<h1>Five Tech Companies:</h1>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Facebook,_Inc."> Facebook</a></li>
<li><a href="https://en.wikipedia.org/wiki/Samsung_Electronics"> Samsung</a></li>
<li><a href="https://en.wikipedia.org/wiki/Apple_Inc."> Apple</a></li>
<li><a href="https://en.wikipedia.org/wiki/Alphabet_Inc."> Alphabet</a></li>
<li><a href="https://en.wikipedia.org/wiki/Microsoft"> Microsoft</a></li>
</ul>
<hr>
</body>
</html>
HTML <a> Tag Notes:

When using HTML <a> element to link to another website, you
need to set the absolute URL as the value of the href attribute. But
when it comes to linking to a page of the same website, although you can
use the absolute URL of that page, it is preferable to use relative
URLs.
The href attribute is also capable of linking to Ids of the same
or another page as well. This is explained in the href attribute
section.

Example: href HTML link and target attribute

<!DOCTYPE html>
<html>
<head>
<title> Learning HTML is fun 🙂 </title>
</head>
<body >
<a href="http://www.bing.com" target="_blank">Bing Search Engine</a>
</body>
</html>

In this particular example, we’ve used another attribute of the <a> element named target. This attribute is explained in the <a> element target attribute section but just to give you a hint of what it does:

It defines where the target page or website should be opened. For example one of the values of this attribute is “_blank” which means the document of the target URL needs to be open in a new tab or window of your browser. This means you’ll be directed to a new window without losing your previous page where the link is located.

Linking to Email in HTML

Other than using HTML <a> element to link to other pages and websites, we can use this element to send emails!

For this to happen, we set the target email address (the one we want to send emails to) prefix it with the value “mailto:” as the value of the href attribute.

For example: <a href="mailto:[email protected]">

Example: a href mailto

<!DOCTYPE html>
<html>
<head>
<title> Learning HTML is fun 🙂 </title>
</head>
<body >
<p style="width: 500px;">We're here to help and answer any question you might have. We look forward to hearing from you. Please contact us at <a href="mailto:[email protected]"> [email protected]</a> </p>
</body>
</html>

HTML <a> Tag Attributes

Other than href and target attributes you saw in the previous examples, the HTML <a> element has other useful attributes that could be used with this element.

In the list below you can see the name of these attributes and a short description about each one of them.

Name	Description
download	This attributes specifies that the target link should be downloaded when a user clicks on the link.
href	With this attribute we set the target address (Absolute or relative URL) that we want to be opened when users click on the link.
hreflang	This attribute specifies the language of the target document we set for the link via the href attribute.
media	This attribute specifies what type of device or media the target document is optimized for
ping	This attribute takes one or more URLs and ping them (sends a short POST request) when users click on the link (the one set for href attribute)
referrerpolicy	Specifies which referrer information to send with the link
rel	This attribute specifies the relationship between current and the linked document.
target	This attribute is used to declare where the linked document should be opened.
type	With this attribute we can set the type of the target linked document.