Html Anchor Tags: A Complete Guide for Web Developers

Hello everyone! 💙

In this article, I will write about the HTML Anchor tag and the Attributes of the HTML Anchor tag.

let's get started 💃

DEFINITION

The HTML <a> anchor tag, 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.

Anchor tag syntax :

<a href = "Url link"> Link Name </a>

Example of an anchor tag :

<a href="second.html">Click for Second Page</a>

Click for Second Page is the link's text in the above example and is the part that will be visible to the reader.

By default, links appear as follows in all browsers:

• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

links can be used to wrap around text, images, and buttons. It takes the user to the link's destination when they interact with it (click on the link).

How to use an image as a link:

<a href="https://www.example.com"><img border="0" alt="example" src="logo_example.gif" width="100" height="100"></a>

How to link to an email address:

<a href="mailto:[e-mail]">Email Cess</a>

How to link to a phone number:
<a href="tel:[phone]">[phone]</a>

How to link to another section on the same page:

<a href="#section1">Go to Section 1</a>

Internal and External Links

Internal links are hyperlinks that direct the readers to a target page on your website.

Internal links are used to create navigation menus that help website visitors navigate the website.

Example: The home page to the contact page to the about page, etc are connected by internal links.

External links are links which when web visitors click on the link, directs them away from your website.

An external link can be used when you are giving your web customer useful related content on a different website.

Example: The Anchor element

Clicking on the above link text will send the reader to the MDN web docs topic on HTML Anchor Element.

Absolute VS Relative URLs

URL stands for Uniform resource locator. URLs are unique addresses used to locate a Web page and its contents on a network server.

Absolute URLs are those that include a complete (absolute) description of the link destination. Absolute URLs include the protocol (HTTP) and the complete domain name and file path needed to reach the destination anchor.

Example of absolute URL:

<a href="https://www.example.com/xyz.html">website</a>

Relative URLs link to a web page by describing the position of the page relative to the position of the current page. When writing internal links that point to other pages of the same website we have the option of writing relative URLs rather than absolute URLs.

<a href="/xyz.html"></a>

Attributes of an anchor tag

HTML attributes provide extra information about HTML elements. Attributes usually come in name/value pairs like:

name="value"

The HTML anchor tag accepts many different attributes like the name, target, href, and download attributes.

An example of an HTML anchor tag using several attributes could look like this:

<a href="www.goggle.com" name="goggle_link" target="_blank" title="Link to goggle">Link To Goggle</a>

The name attribute is now out of date and it is advised to use the ID attribute instead of the name attribute in HTML5.

1.
href attribute

The href attribute stands for hypertext reference and it indicates the link's destination, it's the most important part of the anchor element as it contains the URL to send users to when they click on the link.

href value is the URL.

An example of the href attribute is:

www.codecademy.com

2.
Target attribute

The target attribute specifies how the target document should be opened, e.g. in a new tab

The two most common values used for the Target attribute are:

• _self: The default browsing context of the link.

• _blank: Opens the anchor link in a new window or tab. This is used to link to external pages.

Example of target attribute:

<a href="https://www.codecademy.com/learn" target="_blank">Visit Codecademy.com</a>

The above link will open in a new tab and will take you to Codecademy.

I was reading online and I saw a case where someone used target="blank" instead of the usual target="_blank" value so I decided to search for the difference.

The Target="_blank" opens the same page in a new tab again and again after every click on the link given in the website while Target="blank" doesn't open a new tab, on the first click you will get switched to the same tab when you click on the link.

3.
Download attribute

Download attribute specifies that the target will be downloaded when a user clicks on the hyperlink. The download attribute is used to identify a link that should initiate a download and the value assigned to the download attribute is the name of the file to be downloaded.

<a href="/images/myw3schoolsimage.jpg" download="w3_File">download</a>

When you click on the above link it starts downloading.

4.
hreflang attribute

hreflang attribute specifies the language of the linked document. this will be a value, such as "fr" for French or "en-GB" for British English.

Hreflang can be useful for providing extra context for search engines and preventing duplicate content.

example of hreflang attribute:

<a href="https://www.w3schools.com" hreflang="en">W3Schools</a>

5.
rel attribute

Specifies the relationship between the current document and the linked document. Only used if the href attribute is present

example of rel attribute: <a rel="nofollow" href="http://www.study.com/">Study hard</a>

Different values can be used to describe the relationship between the current document and the linked document. Here are a few of the most common:

• rel= "nofollow": This value is used to signal to search engines that they shouldn’t follow these links and therefore shouldn’t pass any link authority to the link target. it is used in cases where you need to link, but don’t want to be associated with the link target.

• rel= "alternate": This value is used when your site has more than one version such as a translation into a different language.

• rel= "bookmark" : This value specifies the permalink (permanent URL) used for bookmarking.

• rel= "help": This value identifies a linked resource as a help file for the current page with this value.

• rel= "next": This value is used for documents that exist in a series. it is used to link to the next document in the series.

• rel= "prev": This value is used for documents that exist in a series. it is used to link to the previous document in the series.

• rel= "noreferrer": This value is used when you want to link to an external website but also want to avoid letting the destination website know who the referrer is.

The Benefits of Using the Anchor Tag

• Anchor tag keeps things in order on your website, it prevents web visitors from not scrolling down tons of information to find the particular section they are searching for.

• Search Engine Use: Anchor Tags are relevant for SEO as they can be used, for example, to create canonical links to avoid duplicate content. A canonical link element is an HTML element that helps webmasters prevent duplicate content issues in search engine optimization by specifying the "canonical" or "preferred" version of a web page.

CONCLUSION

If you have any questions about the HTML <a> anchor tag, you can leave them in the comments section below and I'll be happy to answer every single one.

If you found this article helpful, please like and share it ❤️.

That's all for today! 😁 You reached the end of the article 😍