All About anchor Tag in HTML

All About anchor Tag in HTML

5 mins readComment
Esha
Esha Gupta
Associate Senior Executive
Updated on Apr 19, 2024 14:03 IST

Have you ever wondered how web pages are interconnected, allowing you to click and navigate from one page to another easily? This is made possible by the HTML anchor (<a>) tag, a fundamental tool in web development used to create hyperlinks. Let's understand more!

In HTML (Hypertext Markup Language), tags are the basic building blocks used to create web pages. They are used to define and structure the content of a webpage. In this blog, we will dive deeper into anchor tag in HTML.

Span Tag in HTML
Span Tag in HTML
Have you ever wondered how web developers style or manipulate specific parts of a webpage's text without affecting the whole document? This is where the tag in HTML comes into...read more

All About br Tag in HTML
All About br Tag in HTML
Have you ever wondered how to create a simple line break in your HTML content? The tag is your solution. It's a self-closing element used to insert line breaks,...read more

Learning div Tag in HTML
Learning div Tag in HTML
Have you ever wondered what keeps web pages organized and styled consistently? The HTML tag plays a crucial role in this. It's a versatile, block-level element used primarily as...read more

Learning ul Tag in HTML
Learning ul Tag in HTML
Have you ever wondered how to organize items on a webpage without any specific order neatly? The HTML tag is the solution, designed to create unordered lists with bullet...read more

All About meta Tag in HTML
All About meta Tag in HTML
Have you ever wondered how web pages communicate important information to browsers and search engines? HTML tags play a pivotal role in this process. They reside in the head...read more

Knowing nav Tag in HTML
Knowing nav Tag in HTML
Have you ever wondered how websites organize their menus and links for easy navigation? The HTML tag is the key for this which is specifically designed to define navigation...read more

Mastering Button Tag in HTML
Mastering Button Tag in HTML
Have you ever wondered how interactive buttons on websites are created? They're often made using the HTML tag, which allows developers to add clickable elements for various actions like...read more

Table of Content

 

What is an anchor Tag in HTML?

The <a> tag, commonly known as the anchor tag, is a fundamental element in HTML used for creating hyperlinks. These hyperlinks allow users to navigate between web pages or to different sections within a single page. The <a> tag is versatile and plays a crucial role in linking resources on the web. The anchor tag can contain plain text, but it can also wrap around images and other HTML elements to make them clickable.

Syntax of anchor Tag in HTML

<a href="URL" target="TARGET_ATTRIBUTE" other_attributes="value">Link Text or HTML</a>

Here,

  • href="URL": This attribute specifies the URL of the page the link goes to. You must replace "URL" with the actual URL you want to link to.

  • target="TARGET_ATTRIBUTE": This optional attribute specifies where to open the linked document. Common values include:

                    -> _self: Opens the document in the same window/tab as it was clicked (this is default).

                    -> _blank: Opens the document in a new window or tab.

                    -> _parent: Opens the document in the parent frame.

                    -> _top: Opens the document in the full body of the window.

  • other_attributes="value": You can add more attributes as needed, like class, id, style, etc., each with its specific purpose and value.

Usage of HTML anchor Tag with Examples

Example 1: Basic External Link

Problem Statement: Create a hyperlink to an external website that opens in a new tab.


 
<!DOCTYPE html>
<html>
<head>
<title>External Link Example</title>
</head>
<body>
<!-- External link that opens in a new tab -->
<a href="https://www.example.com" target="_blank">Visit Example.com</a>
</body>
</html>
Copy code

Output

 

Example 2: Internal Page Navigation

Problem Statement: Create multiple internal links to navigate between different sections within the same page.


 
<!DOCTYPE html>
<html>
<head>
<title>Internal Link Example</title>
<style>
/* Adding some basic styles for clarity */
.nav-links {
margin-bottom: 20px;
}
.section {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="nav-links">
<!-- Links to different sections on the page -->
<a href="#section1">Go to Section 1</a> |
<a href="#section2">Go to Section 2</a> |
<a href="#section3">Go to Section 3</a>
</div>
<!-- Content Sections -->
<div class="section" id="section1">
<h2>Section 1</h2>
<p>This is the content of Section 1.</p>
</div>
<div class="section" id="section2">
<h2>Section 2</h2>
<p>This is the content of Section 2.</p>
</div>
<div class="section" id="section3">
<h2>Section 3</h2>
<p>This is the content of Section 3.</p>
</div>
</body>
</html>
Copy code

Output

 

Example 3: Email Link

Problem Statement: Create a link that opens the user's email client to send an email.


 
<!DOCTYPE html>
<html>
<head>
<title>Email Link Example</title>
</head>
<body>
<!-- Email link -->
<a href="mailto:example@example.com">Send Email to Example</a>
</body>
</html>
Copy code

Output

 

Example 4: Telephone Link

Problem Statement: Create a clickable link to dial a phone number.


 
<!DOCTYPE html>
<html>
<head>
<title>Telephone Link Example</title>
</head>
<body>
<!-- Telephone link -->
<a href="tel:+1234567890">Call Us: +1-234-567-890</a>
</body>
</html>
Copy code

Output

 

Example 5: Download Link

Problem Statement: Provide a link to download a file.


 
<!DOCTYPE html>
<html>
<head>
<title>Download Link Example</title>
</head>
<body>
<!-- Download link for a file -->
<a href="path/to/file.pdf" download="CustomFileName.pdf">Download PDF</a>
</body>
</html>
Copy code

Output

 

Top 62+ HTML Interview Questions and Answers for 2024
Top 62+ HTML Interview Questions and Answers for 2024
Here are the HTML interview questions most likely to be asked during the interviews. This list also covers some HTML CSS interview questions to help you start or move ahead...read more

How to Create HTML Forms – Tutorial with Examples
How to Create HTML Forms – Tutorial with Examples
HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more

HTML Attributes Explained with Examples
HTML Attributes Explained with Examples
HTML attributes provide additional information about HTML elements. They are used to modify the behavior or appearance of an element. Attributes are specified within the opening tag of an element...read more

Creating HTML Links – Tutorial With Examples

HTML Lists: Ordered and Unordered Lists Explained with Examples
HTML Lists: Ordered and Unordered Lists Explained with Examples
This tutorial explains how to create different types of lists: unordered, ordered, and description lists in HTML. In this blog, you will learn what are HTML lists and understand how...read more

Key Takeaways

  • The primary function of the anchor (<a>) tag in HTML is to create hyperlinks. These links can connect to other web pages, different sections of the same page, email addresses, or files, facilitating easy navigation and resource access on the web.

  • The <a> tag's functionality can be customized with various attributes. The href attribute specifies the link's destination, the target controls how the link opens, and the download can be used for downloading files. These attributes make the anchor tag extremely versatile.

  • Anchor tags can be styled with CSS to match the website's design. This includes changing colours, adding hover effects, and more, enhancing the visual appeal and user experience.

  • Anchor tags can work with JavaScript for additional functionalities, like triggering scripts or controlling page elements, making them an integral part of dynamic web applications.

FAQs

What is an Anchor Tag in HTML?

An anchor tag, identified by a in HTML, is used for creating hyperlinks. It can link to another webpage, a different section on the same page, or any other URL. When clicked, it navigates the user to the specified destination.

How Do You Create a Hyperlink to Another Webpage Using an Anchor Tag?

To create a hyperlink, you use the anchor tag with the href attribute. The href attribute holds the URL of the page you want to link to. 

Can You Open a Link in a New Browser Tab Using the Anchor Tag?

Yes, you can open a link in a new browser tab using the target attribute of the anchor tag. By setting target="_blank", the link will open in a new tab. 

How to Link to a Specific Part of a Webpage Using an Anchor Tag?

To link to a specific part of the same or a different webpage, you use the anchor tag with a hash (#) followed by an identifier. First, you must assign an id to the element you want to link to. Then create a link using # followed by that id. 

Is It Possible to Style Anchor Tags with CSS?

Yes, anchor tags can be styled using CSS. You can change their color, font, size, and add various effects like hover effects. CSS properties are applied to anchor tags like any other HTML element. For example, in your CSS file or style tag, you can write a { color: blue; } to change all anchor text to blue.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio