docs.rodeo

MDN Web Docs mirror

: The Anchor element

{{HTMLSidebar}} 

The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

Content within each <a> should indicate the link’s destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it.

{{InteractiveExample("HTML Demo: &lt;a&gt;", "tabbed-shorter")}} 

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

li {
  margin-bottom: 0.5rem;
}

Attributes

This element’s attributes include the global attributes.

Deprecated attributes

Accessibility

Strong link text

The content inside a link should indicate where the link goes, even out of context.

Inaccessible, weak link text

A sadly common mistake is to only link the words “click here” or “here”:

<p>Learn more about our products <a href="/products">here</a>.</p>
Result

{{EmbedLiveSample('Inaccessible, weak link text')}} 

Strong link text

Luckily, this is an easy fix, and it’s actually shorter than the inaccessible version!

<p>Learn more <a href="/products">about our products</a>.</p>
Result

{{EmbedLiveSample('Strong link text')}} 

Assistive software has shortcuts to list all links on a page. However, strong link text benefits all users — the “list all links” shortcut emulates how sighted users quickly scan pages.

onclick events

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events.

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a {{HTMLElement("button")}}  instead. In general, you should only use a hyperlink for navigation to a real URL.

Links that open in a new tab/window via target="_blank", or links that point to a download file should indicate what will happen when the link is followed.

People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.

<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)
</a>
Result

{{EmbedLiveSample('Link that opens a new tab/window')}} 

If an icon is used to signify link behavior, make sure it has an alt attribute to describe its purpose. In case the icon is missing, the alt attribute’s content will still convey the link’s behavior.

<p>
  <a href="https://www.wikipedia.org/" target="_blank">
    Wikipedia
    <img src="new-tab.svg" width="14" alt="(Opens in new tab)" />
  </a>
  <br />
  <a href="2017-annual-report.ppt">
    2017 annual report
    <img src="powerpoint.svg" width="14" alt="(PowerPoint file)" />
  </a>
</p>
<p>
  <a href="https://www.wikipedia.org/" target="_blank">
    Wikipedia
    <img src="missing-icon.svg" width="14" alt="(Opens in new tab)" />
  </a>
  <br />
  <a href="2017-annual-report.ppt">
    2017 annual report
    <img src="missing-icon.svg" width="14" alt="(PowerPoint file)" />
  </a>
</p>
Result

{{EmbedLiveSample('Link to a non-HTML resource')}} 

A skip link is a link placed as early as possible in {{HTMLElement("body")}}  content that points to the beginning of the page’s main content. Usually, CSS hides a skip link offscreen until focused.

<body>
  <a href="#content" class="skip-link">Skip to main content</a>

  <header>…</header>

  <!-- The skip link jumps to here -->
  <main id="content"></main>
</body>

.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}

Result

{{EmbedLiveSample('Skip links')}} 

Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.

Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.

Size and proximity

Size

Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 CSS pixels is recommended.

Text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is hyperlinked to be easily activated.

Proximity

Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.

Spacing may be created using CSS properties like {{CSSxRef("margin")}} .

Examples

Linking to an absolute URL

HTML

<a href="https://www.mozilla.com">Mozilla</a>

Result

{{EmbedLiveSample('Linking_to_an_absolute_URL')}} 

Linking to relative URLs

HTML

<a href="//example.com">Scheme-relative URL</a>
<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
<a href="p">Directory-relative URL</a>
<a href="./p">Directory-relative URL</a>
<a href="../p">Parent-directory-relative URL</a>

a {
  display: block;
  margin-bottom: 0.5em;
}

Result

{{EmbedLiveSample('Linking_to_relative_URLs')}} 

Linking to an element on the same page

<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>

<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>

Result

{{EmbedLiveSample('Linking to an element on the same page')}} 

[!NOTE] You can use href="#top" or the empty fragment (href="#") to link to the top of the current page, as defined in the HTML specification.

Linking to an email address

To create links that open in the user’s email program to let them send a new message, use the mailto: scheme:

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

Result

{{EmbedLiveSample('Linking to an email address')}} 

For details about mailto: URLs, such as including a subject or body, see Email links or {{RFC(6068)}} .

Linking to telephone numbers

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

Result

{{EmbedLiveSample('Linking to telephone numbers')}} 

tel: link behavior varies with device capabilities:

See {{RFC(3966)}}  for syntax, additional features, and other details about the tel: URL scheme.

Using the download attribute to save a <canvas> as a PNG

To save a {{HTMLElement("canvas")}}  element’s contents as an image, you can create a link where the href is the canvas data as a data: URL created with JavaScript and the download attribute provides the file name for the downloaded PNG file:

HTML
<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my painting</a>
</p>

<canvas width="300" height="300"></canvas>
CSS
html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}
JavaScript
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );
Result

{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}} 

Security and privacy

<a> elements can have consequences for users’ security and privacy. See Referer header: privacy and security concerns for information.

Using target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to {{domxref("window.opener")}}  API exploitation attacks, although note that, in newer browser versions setting target="_blank" implicitly provides the same protection as setting rel="noopener". See browser compatibility for details.

Technical summary

Content categories Flow content, phrasing content, interactive content, palpable content.
Permitted content Transparent, except that no descendant may be interactive content or an <a> element, and no descendant may have a specified tabindex attribute.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content, but not other <a> elements.
Implicit ARIA role link when href attribute is present, otherwise generic
Permitted ARIA roles

When href attribute is present:

When href attribute is not present:

  • any
DOM interface `{{DOMxRef("HTMLAnchorElement")}}` 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN