Anchor Tag in HTML

While creating web pages, one of the most important elements that you will come across is the anchor tag in HTML. It allows connecting one page to another, which helps users navigate easily across your website. In this blog, we will explain the anchor tag in HTML, how you can use it, its purpose, and some examples so that you can understand it better.

Table of Contents:

• What is an Anchor Tag in HTML?
• Syntax of the HTML <a> Tag
• Key Attributes of the Anchor Tag
• How to Use an Anchor Tag in HTML
• Anchor Tag Examples in HTML
• Common Use Cases of Anchor Tag
• Styling Anchor Tags with CSS
• Difference between <a> Tag and <link> Tag
• Best Practices and SEO Tips for Anchor Tags
• Conclusion

What is an Anchor Tag in HTML?

The anchor tag in HTML is used to create hyperlinks on web pages. It is represented by the <a> element. These hyperlinks are used to link to another web page, a specific section within the same page, an email address, or even a file. When the user clicks on the anchor text, the anchor tag redirects them to the target destination. An anchor tag in HTML is given below:

<a href="https://www.example.com">Visit Example</a>

The above line of code will create a simple clickable link that will take you to another website called “example.com“.

Syntax of the HTML <a> Tag

The anchor tag in HTML allows you to link to other web pages, sections, email addresses, or downloadable files inside the same page. Using the anchor tag correctly helps ensure smooth navigation and a better user experience on your website. The syntax for the anchor tag in HTML is given below:

<a href="URL" target="_blank" title="Optional Title">Link Text</a>

Where,

1. href: It specifies the destination of the URL or resource.
2. target: It is used to define where you want to open the link (_blank for a new tab).
3. title: It provides you with additional information shown on hover.
4. The text present inside <a> and </a> becomes clickable.

Key Attributes of the Anchor Tag

In this section, we are going to discuss the important attributes of the Anchor Tag. There are 5 important attributes of the Anchor Tag. They are explained below:

1. href Attribute

The href attribute is the most important part of the anchor tag in HTML. It is used to specify the destination URL or the resource that the link will navigate to. Without the href attribute, the anchor cannot work as a hyperlink. You can also link to external websites, internal pages, or some specific sections on the same page.

Example:

Explanation: In the above example, by clicking on the text “Visit Example” you will be redirected to the page example.com.

2. Target attribute

The target attribute is an important part of the anchor tag. This is because it determines where the linked page or resource will open when you click on the link. You can also use it to open links in the same tab, a new tab, or a specific frame. This helps you to improve the process of navigation and user experience on your website.

Example:

Explanation: In the above example, when you click on the link, it will open example.com in a new tab in the browser, leaving the current page unchanged.

3. Title attribute

The title attribute is an important part of the anchor tag in HTML. This is because it provides you with additional information about the link. It usually appears as a tooltip when you hover over it. This helps you to improve the accessibility and provides users with context about the destination of the link.

Example:

Explanation: In the above example, whenever you hover over the link “Visit Example”, a small tooltip appears, which shows “Go to Example Website”.

4. Name and Rel Attributes

The name and rel attributes are important parts of the anchor tag in HTML. They are used to add extra functionality to your links. The name attribute is used to create a bookmark inside a page. This allows users to jump to a specific section, while the rel attribute is used to define the relationship between the current page and the linked resource. This is often used for security and SEO purposes.

Example:

Explanation: In the above example, the name attribute allows users to jump to “Section 1”, and the rel attribute helps to ensure safe linking when you open a new tab.

5. Ping Attribute

The ping attribute is used to send a short notification or “ping” to a specified URL whenever you click on a hyperlink. It helps the website owners to track link clicks for analytics or logging purposes. When you click on that link, the POST request is sent to the URLs that are mentioned in the ping attribute, while the link to the mail still opens normally.

Example:

Explanation: In the above example, when you click on the link, the browser will open example.com. After that, it will send a ping to tracker.com to record the click event.

How to Use an Anchor Tag in HTML

In order to understand the use of the anchor tag in HTML, you should know that it helps to create hyperlinks that are used to connect one page to another. You can also link to a specific section inside the same page using a hyperlink. The anchor tag in HTML uses the <a> element, and the most important attribute is the href, which is used to define the destination of the link.

You can also use the anchor tag to link to external websites, internal pages, email addresses, or downloadable files. It is also used with attributes like target for opening links in a new tab and title to give extra information about the link.

Example:

Output:

Explanation: The HTML code shows different ways to use the anchor tag in HTML. You can create links that open websites, emails, sections on the same page, or send tracking.

Anchor Tag Examples in HTML

Given below are some examples of anchor tags that show the different ways you can use the <a> tag.

1. Open Link in New Tab

In order to open a link in a new tab, you can use the target=”_blank” attribute. This can be useful when you want users to visit another website without leaving your current page.

Example:

Output:

Explanation: As you can see in the output, when you click the link example.com will open a new browser tab, and your current page will stay open.

2. Link Within the Same Page

The anchor tag can also be used to jump to another section on the same webpage using the id attribute. This can be helpful for navigation on long pages.

Example:

Output:

Explanation: In the above example, by clicking on “Go to Section 2”, it scrolls to the specific part of the page with the ID section2.

3. Create File Download Links

You can also use the anchor tag in HTML to allow users to download files directly. This can be done using the download attribute, which instructs the browser to download the file instead of opening it.

Example:

Output:

Explanation: As you can see in the output, when you click on the download link, the browser will download the file named sample.pdf instead of opening it.

Common Use Cases of Anchor Tag

Given below are five common uses of the anchor tag in HTML that will help you to understand what is the use of the anchor tag in HTML:

1. The most common use case of an anchor tag is to create hyperlinks that take users from one page to another. 

2. Another common use case is opening links in new browser tabs by using the target=”_blank” attribute. This allows the users to stay on the website while exploring another page.

3. You can also use the anchor tag in HTML to link a specific section inside the same webpage. 

4. Another use case also includes creating free download links for files like PDFs, images, or documents. This can be done using the download attribute.

5. The anchor tag can allow users to send emails by using the mailto: attribute.

Styling Anchor Tags with CSS

When you create links using the anchor tag in HTML, they appear to be in the browser’s default style. They are usually blue in color for normal links, purple for the links that are already visited, and underlined. However, the appearance of these links can be customized using CSS. Styling the links makes them more attractive and fit better with the design of your website.

You can change properties of the links like color, font size, background, padding, and also add hover effects to make the link look more attractive. CSS provides you with pseudo-classes like :link, :visited, :hover, and :active. These pseudo-classes help you define different styles for each link state. Below is an HTML code example which shows how to style using CSS:

Code:

Output:

Explanation: In the above example, the anchor tag is styled to remove the underline and change colors when you hover over it, visit, or click it. Using CSS with anchor tags gives you full control over how your links appear on the webpage. This improves both the design and user experience.

Difference Between <a> Tag and <link> Tag

The difference between the <a> tag and the <link> tag is shown below in a tabular format:

Best Practices and SEO Tips for Anchor Tags

1. You should always use clear and meaningful text so that users and search engines know what the link is about.

2. You should use anchor tags to link only to the pages that are related and helpful for your content.

3. You should always provide a short description of the link to improve its accessibility and for better understanding of the users.

4. You should use target=”_blank” for external links so that the users can stay on your site.

5. You should always keep the anchor text natural and avoid overloading with keywords for better SEO.

Conclusion

The anchor tag in HTML is one of the most essential elements for creating links on a webpage. Understanding the use of the anchor tag in HTML helps you connect different pages, sections, files, or even email addresses, making your website more interactive and user-friendly. By learning what the use of an anchor tag in HTML is, you can improve navigation, enhance user experience, and even boost your SEO. Overall, mastering the use of the anchor tag in HTML ensures that your website is organized, accessible, and easy to explore for your visitors.

Upskill today by enrolling in our Full Stack Development Course. Prepare for your next interview with our Full Stack Developer Interview Questions, prepared by industry experts.

Anchor Tag in HTML – FAQs