<a>

The a (anchor) element creates a hyperlink. It is the foundation of web navigation, enabling links to other pages, in-page jumps, email links, and file downloads.

Syntax

<!-- Basic link -->
<a href="URL?lang=en">Link text</a>

<!-- Open in a new tab -->
<a href="URL?lang=en" target="_blank" rel="noopener noreferrer">External link</a>

<!-- In-page anchor -->
<a href="#section1">Jump to Section 1</a>
<h2 id="section1">Section 1</h2>

<!-- File download -->
<a href="/files/sample.pdf?lang=en" download>Download PDF</a>

<!-- Email link -->
<a href="mailto:info@example.com?lang=en">Send an email</a>

Attributes

Attribute	Description
href	Specifies the URL of the link destination. Accepts absolute URLs, relative URLs, in-page IDs (#id), mailto:, tel:, and more.
target	Specifies the window or tab in which to open the link. Use `_blank` to open in a new tab, or `_self` (default) to open in the same tab.
rel	Describes the relationship between the current page and the linked page. Using `noopener noreferrer` is recommended as a security measure for external links.
download	Causes the linked file to be downloaded instead of navigated to. If a value is provided, it is used as the filename (e.g., `download="report.pdf"`).
hreflang	Indicates the language of the linked resource (e.g., `hreflang="en"`).
type	Indicates the MIME type of the linked resource (e.g., `type="application/pdf"`).

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- Internal link (relative URL) -->
  <a href="/about.html?lang=en">About Us</a>

  <!-- External link (new tab) — don't forget the security attributes -->
  <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
    Visit external site (opens in a new tab)
  </a>

  <!-- In-page jump -->
  <nav>
    <a href="#intro">Introduction</a> |
    <a href="#usage">Usage</a> |
    <a href="#summary">Summary</a>
  </nav>

  <h2 id="intro">Introduction</h2>
  <p>Content...</p>

  <h2 id="usage">Usage</h2>
  <p>Content...</p>

  <h2 id="summary">Summary</h2>
  <p>Content...</p>

  <!-- Download link -->
  <a href="/files/sample.csv?lang=en" download="sample_data.csv">Download CSV</a>

  <!-- Email link -->
  <a href="mailto:info@example.com?subject=Contact&lang=en">Send an email</a>

</body>
</html>

Output

Each link is displayed as blue underlined text. The external link opens in a new tab, and in-page links scroll to the element with the matching id on the same page.

About Us (click to navigate to /about.html)
Visit external site (click to open in a new tab)
Introduction | Usage | Summary (click to jump within the page)
Download CSV (click to download the file)
Send an email (click to open your email app)

Notes

The a element is one of the most fundamental elements on the Web — it is the implementation of the "hyperlink" concept that connects pages together. If the href attribute is omitted (or set to href="#"), the element does not function as a link, but it is sometimes used as a target for JavaScript click events.

When using target="_blank" for external links, always include rel="noopener noreferrer" as well. Omitting it creates a security risk where the linked page can access the opener page via the opener property (known as a tabnapping attack).

For in-page jumps, write href="#id-name" and add the same value as the id attribute on the target element. This is commonly used for tables of contents and "back to top" buttons. Because the #section-name is appended to the URL, opening that URL directly will also scroll to the same position.

Since HTML5, the a element can contain not only inline elements but also block-level elements such as div and p. Wrapping an img element inside a is a common pattern for making an entire image a clickable link.