Anchor Elements in HTML

Anchor elements are important for SEO.

The anchor element, represented by the <a> tag, is used to create hyperlinks in HTML. These links can point to other web pages, files, email addresses, locations within the same page, or any other URL. The most important attribute of the <a> tag is the href attribute, which specifies the URL of the page the link goes to.

Basic Syntax

HTML

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

Example Code: My 10 Favourite Websites

Get Thiong'o John W’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Here is an example of how you can use the <a> tag to create a list of your 10 favorite websites:

My 10 Favourite Websites

• Google
• YouTube
• Wikipedia
• GitHub
• Stack Overflow
• Reddit
• Medium
• Twitter
• LinkedIn
• Amazon

HTML

<!DOCTYPE html>
<html>
<head>
    <title>My Favourite Websites</title>
</head>
<body>
    <h1>My 10 Favourite Websites</h1>
    <ul>
        <li><a href="https://www.google.com" target="_blank">Google</a></li>
        <li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
        <li><a href="https://www.wikipedia.org" target="_blank">Wikipedia</a></li>
        <li><a href="https://www.github.com" target="_blank">GitHub</a></li>
        <li><a href="https://www.stackoverflow.com" target="_blank">Stack Overflow</a></li>
        <li><a href="https://www.reddit.com" target="_blank">Reddit</a></li>
        <li><a href="https://www.medium.com" target="_blank">Medium</a></li>
        <li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
        <li><a href="https://www.linkedin.com" target="_blank">LinkedIn</a></li>
        <li><a href="https://www.amazon.com" target="_blank">Amazon</a></li>
    </ul>
</body>
</html>

Explanation

• <a href="URL">Link Text</a>: This is the basic structure of an anchor tag. The href attribute contains the URL of the page you want to link to, and the text between the opening and closing <a> tags is the clickable text.
• target="_blank": This attribute opens the link in a new tab or window, which is useful for keeping the user’s current page open.

Attributes of the <a> Tag

• href: Specifies the URL of the page the link goes to.
• target: Specifies where to open the linked document. Common values include _blank (new tab/window), _self (same frame), _parent (parent frame), and _top (full body of the window).
• title: Provides additional information about the link, often displayed as a tooltip when the mouse hovers over the link.
• rel: Specifies the relationship between the current document and the linked document. Common values include noopener and noreferrer for security purposes when using target="_blank".

By using anchor elements effectively, you can create a well-structured and navigable website.

Stackademic 🎓

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us X | LinkedIn | YouTube | Discord
• Visit our other platforms: In Plain English | CoFeed | Differ
• More content at Stackademic.com