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

See the Pen anchor in HTML by Omid Dehghan (@odchan1) on CodePen.

Example: HTML tag a href

See the Pen HTML tag a href by Omid Dehghan (@odchan1) on CodePen.

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

See the Pen href HTML link and target attribute by Omid Dehghan (@odchan1) on CodePen.

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

See the Pen a href mailto by Omid Dehghan (@odchan1) on CodePen.

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 attribute 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 referred 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.