HTML <a> Tag

The HTML <a> tag (anchor tag) is one of the most fundamental elements used in web development. It is used to create hyperlinks that allow users to navigate from one webpage to another, link to files, or jump to specific sections within a page.

Syntax of the <a> Tag

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

Attributes of the <a> Tag

The <a> tag supports several attributes that enhance its functionality. Here's a list of common attributes along with a description:

  • href: It specifies the URL of the page.
  • target: It specifies where to open the linked document. The values of target attributes are:
    • _self: Opens the link in the same window/tab (default behavior).
    • _blank: Opens the link in a new window or tab.
    • _parent: Opens the link in the parent frame.
    • _top: Opens the link in the full body of the window.
  • rel: Specifies the relationship between the current document and the linked document. The common values are:
    • nofollow: Tells search engines not to follow the link.
    • noopener: Prevents the new page from being able to access the window object via JavaScript.
    • noreferrer: Doesn't pass referrer information to the target page.
  • download: Specifies that the target should be downloaded when the user clicks the link.
  • type: Specifies the MIME type of the linked document. This is useful when linking to files other than HTML (e.g., PDFs or images).
  • hreflang: Specifies the language of the linked document.
  • ping: Provides a space-separated list of URLs to notify if the user follows the hyperlink.
  • accesskey: Specifies a shortcut key to activate or focus on the link.
  • tabindex: Specifies the tab order of an element when the user navigates using the Tab key.

Examples of HTML <a> Tag

Example 1: This is the simple example of an anchor tag, linking to another website.

html
<!DOCTYPE html>
<html>

<head>
    <title>Simple Link</title>
</head>

<body>
    <a href="https://www.scholar247.org">
        Visit Example
    </a>
</body>

</html>

Example 2: Use the target="_blank" attribute to open a link in a new tab.

html
<!DOCTYPE html>
<html>

<head>
    <title>Open Link in New Tab</title>
</head>

<body>
    <a href="https://www.scholar247.org"
        target="_blank">
        Visit Example
    </a>
</body>

</html>

Example 3: Create a Link to an Email Address. The mailto: protocol allows users to send an email when clicking the link.

html
<!DOCTYPE html>
<html>

<head>
    <title>Link to Email Address</title>
</head>

<body>
    <a href="mailto:support@example.com">
        Contact Us
    </a>
</body>

</html>
tools

HTML

Related Articles