What Is the <a> Tag?

The <a> tag, also known as the anchor tag, is used to create hyperlinks in HTML. A hyperlink allows users to click and navigate to another location, whether it's another web page, a specific section within the same page, or an external website. The <a> tag is versatile and fundamental for building interconnected web content.

Syntax of the <a> Tag

The basic syntax for creating a hyperlink using the <a> tag is as follows:

<a href="URL">Link Text</a>

• <a>: The opening anchor tag that starts the hyperlink.
• href="URL": The href attribute specifies the destination URL where the link points to.
• Link Text: The clickable text that users will see and interact with. It is also called Anchor text.
• </a>: The closing anchor tag that ends the hyperlink.

Examples of Creating Links Using the <a> Tag

Let's explore some practical examples of using the <a> tag to create hyperlinks.

1. Linking to an External Website

In this example, we'll create a hyperlink that directs users to an external website, designgurus.io.

Explanation:

• The <a> tag creates a clickable link with the text "Visit DesignGurus.io".
• The href="https://designgurus.io" attribute specifies that clicking the link will navigate the user to https://designgurus.io.
• When users click on "Visit DesignGurus.io", their browser will open the DesignGurus.io website.

2. Linking to a Specific Section Within the Same Page

You can create links that navigate to specific sections within the same web page using the id attribute.

Explanation:

• The <a href="#contact">Go to Contact Us Section</a> creates a link that, when clicked, scrolls the page to the element with the id="contact".
• The <h2 id="contact">Contact Us</h2> defines the target section. The id attribute uniquely identifies this heading so that the link knows where to navigate.
• This is useful for improving navigation within long web pages, allowing users to jump directly to relevant sections.

3. Opening a Link in a New Tab

By default, hyperlinks open in the same tab. However, you can modify this behavior to open links in a new browser tab using the target attribute.

Explanation:

• The <a> tag creates a clickable link with the text "Visit DesignGurus.io".
• The href="https://designgurus.io" attribute specifies the destination URL.
• The target="_blank" attribute tells the browser to open the link in a new tab, keeping the current page open for the user.

Understanding how to create and manage hyperlinks is crucial for building navigable and user-friendly websites. In the next lesson, we'll explore how to turn an image into a clickable link, enhancing the interactivity and visual appeal of your web pages.