<a>

Since:		HTML 4（1997）

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

sample_a.html

<!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.

View sample page

Values of the target Attribute

Value	Description
_self	Default. Opens the linked page in the same tab or frame.
_blank	Opens the linked page in a new tab (or window). Commonly used for external links. Always pair with `rel="noopener noreferrer"`.
_parent	Opens the linked page in the parent frame. Behaves like `_self` if no parent frame exists.
_top	Opens the linked page in the topmost window, breaking out of all nested frames.

tel: and mailto: Links

Using the tel: or mailto: scheme in the href attribute creates a link that launches the phone or email app. This is especially useful on mobile sites where tapping a phone number should trigger a call.

<!-- Phone link (tapping on mobile triggers a call) -->
<a href="tel:+1-555-000-0000?lang=en">(555) 000-0000</a>

<!-- Email link (subject and body can be URL-encoded) -->
<a href="mailto:info@example.com?subject=Inquiry&body=Hello%2C&lang=en">
  Contact us by email
</a>

Styling Links as Buttons with CSS

The a element can be freely styled with CSS. When deciding between a and button, use a for navigation (page transitions) and button for in-page actions.

<style>
  /* Style a link to look like a button */
  a.btn {
    display: inline-block;
    padding: 10px 24px;
    background-color: #4a90e2;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s;
  }
  a.btn:hover {
    background-color: #2c6fbc;
  }

  /* Current page link style */
  a[aria-current="page"] {
    font-weight: bold;
    color: #e74c3c;
    pointer-events: none; /* Disable click */
  }
</style>

<a class="btn" href="/contact.html?lang=en">Contact Us</a>

<nav>
  <a href="/?lang=en">Home</a>
  <a href="/about.html?lang=en" aria-current="page">About (current)</a>
  <a href="/contact.html?lang=en">Contact</a>
</nav>

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.