Anchor Tag

Links are fundamental to navigating the web. In HTML, links are created using the <a> tag, also known as the Anchor tag.

An anchor element can connect the current page to another webpage, another document, a file, an email address, or even a specific section on the same page.

Key Characteristics of HTML Links

• Specified by the <a> tag.
• Also known as hyperlinks.
• Used to link one document or resource to another.
• Includes a closing </a> tag.

Syntax of HTML Links

The basic syntax of an anchor element looks like this:

<a href="Your specified path">Content</a>

The text between the opening and closing anchor tags becomes the clickable content of the link.

Essential Attributes of the Anchor Tag

HTML links primarily use two important attributes: href and target.

href Attribute

The href attribute defines the URL, file path, or destination that the link points to.

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

Without a meaningful href destination, an anchor does not act as a normal navigation link.

target Attribute

The target attribute specifies where the linked document should be opened.

Target Attribute Values

• _blank: Opens the linked document in a new window or tab.
• _top: Opens the document in the full body of the window.
• _self: Opens the linked document in the same window or tab. This is the default behavior.
• _parent: Opens the linked document in the parent frame.

Example using target="_blank":

<a href="https://example.com" target="_blank">
    Open Example
</a>

Linking to Specific Page Sections

You can create a link that takes a user directly to a specific section of the same webpage. To do this, give the target element an id and use a hash (#) followed by that ID in the anchor's href.

Example

Imagine you have a long webpage with several sections. A link at the top can take the user directly to the "Gardening Tips" section:

<a href="#gardening-tips">
    Go to Gardening Tips
</a>

<p>Here is some other content...</p>

<h2 id="gardening-tips">Gardening Tips</h2>

<p>
    This section provides tips on how to garden...
</p>

When the link is clicked, the browser looks for the element whose id is gardening-tips and moves the page to that section.

Link Colors

Links typically have different visual states. Browsers can use different styles for links that have not been visited, have been visited, or are currently active. You can customize these states with CSS to match the design of your website.

• Unvisited: The link has not yet been visited.
• Visited: The link has already been visited.
• Active: The link is currently being activated.

CSS pseudo-classes such as :link, :visited, and :active can be used to style these different states.

a:link {
    color: blue;
}

a:visited {
    color: purple;
}

a:active {
    color: red;
}

Internal and External Links

Anchor elements can point to pages within your own website or to resources hosted on another website.

<!-- Internal link -->
<a href="html-images.html">Image Tag</a>

<!-- External link -->
<a href="https://example.com">Visit Example</a>

Internal links are especially useful for connecting related pages in a website, while external links can direct users to useful resources on other websites.

Best Practices for HTML Links

• Use clear and descriptive link text so users know where a link leads.
• Keep internal links organized and use meaningful paths.
• Use target="_blank" thoughtfully when a new tab is actually useful.
• Use CSS to control link appearance instead of relying on browser defaults.
• For links that jump to the same page, use meaningful and unique id values.

Quick Summary

• <a> is the HTML element used to create hyperlinks.
• href defines the destination of the link.
• target controls where the linked document opens.
• Hash links such as #section-id can jump to a specific section of the same page.
• CSS can customize link states such as :link, :visited, and :active.