Web/HTML/Element/a

The HTML <a> 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.

Attributes

This element's attributes include the global attributes.

downloadHTML5

Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:

Without a value, the browser will suggest a filename/extension, generated from various sources:
- The Content-Disposition HTTP header
- The final segment in the URL path
- The media type (from the (Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)
Defining a value suggests it as the filename. / and \ characters are converted to underscores (_). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.

Notes:

download only works for same-origin URLs, or the blob: and data: schemes.
Note: if the Content-Disposition header has different information from the download attribute, resulting behaviour may differ:
- If the header specifies a filename, it takes priority over a filename specified in the download attribute.
- If the header specifies a disposition of inline, Chrome, and Firefox 82 and later, prioritize the attribute and treat it as a download. Firefox versions before 82 prioritize the header and will display the content inline.

href

The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

Sections of a page with fragment URLs
Pieces of media files with media fragments
Telephone numbers with tel: URLs
Email addresses with mailto: URLs
While web browsers may not support other URL schemes, web sites can with registerProtocolHandler()

hreflang

Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

ping

A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.

referrerpolicy '

How much of the referrer to send when following the link. See Referrer-Policy for possible values and their effects.

rel

The relationship of the linked URL as space-separated link types.

target

Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). The following keywords have special meanings for where to load the URL:

_self: the current browsing context. (Default)
_blank: usually a new tab, but users can configure browsers to open a new window instead.
_parent: the parent browsing context of the current one. If no parent, behaves as _self.
_top: the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as _self.

Note: When using target, add rel="noreferrer noopener" to avoid exploitation of the window.opener API;

Note: In newer browser versions (e.g. Firefox 79+) setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener".

type

Hints at the linked URL’s format with a MIME type. No built-in functionality.

Obsolete attributes

charsetObsolete since HTML5: Hinted at the character encoding of the linked URL.

Note: This attribute is obsolete and should not be used by authors. Use the HTTP Content-Type header on the linked URL.
coordsObsolete since HTML5: Used with the shape attribute. A comma-separated list of coordinates.
nameObsolete since HTML5: Was required to define a possible target location in a page. In HTML 4.01, id and name could both be used on <a>, as long as they had identical values.

Note: Use the global attribute id instead.
revObsolete since HTML5: Specified a reverse link; the opposite of the rel attribute. Deprecated for being very confusing.
shapeObsolete since HTML5: The shape of the hyperlink’s region in an image map.

Note: Use the <area> element for image maps instead.

Properties

Content categories	Flow content, phrasing content, interactive content, palpable content.
Permitted content	Transparent, containing either flow content (excluding interactive content) or phrasing content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content, or any element that accepts flow content, but not other `<a>` elements.
Implicit ARIA role	`link` when `href` attribute is present, otherwise no corresponding role
Permitted ARIA roles	When `href` attribute is present: `button` `checkbox` `menuitem` `menuitemcheckbox` `menuitemradio` `option` `radio` `switch` `tab` `treeitem` When `href` attribute is not present: any
DOM interface	`HTMLAnchorElement`

Examples

Linking to an absolute URL

HTML

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

Result

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>

CSS

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

Result

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>

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:[email protected]">Send email to nowhere</a>

For details about mailto: URLs, such as including a subject or body, see [[../../../../Learn/HTML/Introduction_to_HTML/Creating_hyperlinks%23E-mail_links|Email links]] or RFC 6068.

Linking to telephone numbers

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

tel: link behavior varies with device capabilities:

Cellular devices autodial the number.
Most operating systems have programs that can make calls, like Skype or FaceTime.
Websites can make phone calls with registerProtocolHandler, such as web.skype.com.
Other behaviors include saving the number to contacts, or sending the number to another device.

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 <canvas> element’s contents as an image, you can create a link with a download attribute and the canvas data as a data: URL:

Example painting app with save link

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

var canvas = document.querySelector('canvas'),
    c = canvas.getContext('2d');
c.fillStyle = 'hotpink'; 

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

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 window.opener API exploitation attacks (vulnerability description), although note that, in newer browser versions (e.g. Firefox 79+) setting target="_blank" implicitly provides the same protection as setting rel="noopener".

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>

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>

Assistive software have 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 <button> instead. In general, you should only use a hyperlink for navigation to a real URL.

External links and linking to non-HTML resources

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.

Link that opens a new tab/window

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

Link to a non-HTML resource

<a href="2017-annual-report.ppt">
  2017 Annual Report (PowerPoint)
</a>

If an icon is used to signify link behavior, make sure it has alt text:

<a  target="_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="(opens in new tab)" src="newtab.svg">
</a>

<a href="2017-annual-report.ppt">
  2017 Annual Report 
  <img alt="(PowerPoint file)" src="ppt-icon.svg">
</a>

Skip links

A skip link is a link placed as early as possible in <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">Skip to main content</a>

  <header>
    …
  </header>

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

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

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

Hand tremors and the giant-button-problem

Specifications

Specification	Status	Comment
Referrer PolicyThe definition of 'referrer attribute' in that specification.	Candidate Recommendation	Added the `referrerpolicy` attribute.
HTML Living StandardThe definition of '<a>' in that specification.	Living Standard
HTML5The definition of '<a>' in that specification.	Recommendation
HTML 4.01 SpecificationThe definition of '<a>' in that specification.	Recommendation

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`a`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes Notes' Full support Yes Notes' Notes' Starting with Firefox 41, <a> without `href` attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes Notes' Full support Yes Notes' Notes' Starting with Firefox 41, <a> without `href` attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (bug 1167816).	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`charset` Deprecated'	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`coords` Deprecated'	Chrome No support No	Edge No support No	Firefox No support ? — 58 Notes' No support ? — 58 Notes' Notes' You can no longer nest an `<a>` element inside a `<map>` element to create a hotspot region - `coords` and `shape` attribute support removed.	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support ? — 58 Notes' No support ? — 58 Notes' Notes' You can no longer nest an `<a>` element inside a `<map>` element to create a hotspot region - `coords` and `shape` attribute support removed.	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`download`	Chrome Full support 14 Notes' Full support 14 Notes' Notes' Starting in Chrome 65, cross-origin downloads are not supported on the `<a>` element.	Edge Full support 18 Full support 18 Partial support 13 Notes' Notes' Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (bug 7160092). Notes' Edge 17 or older didn't follow the attributes' value to determine filename (bug 7260192).	Firefox Full support 20	IE No support No	Opera Full support 15	Safari Full support 10.1	WebView Android Full support Yes Notes' Full support Yes Notes' Notes' Starting in WebView 65, cross-origin downloads are not supported on the `<a>` element.	Chrome Android Full support 18 Notes' Full support 18 Notes' Notes' Starting in Chrome 65, cross-origin downloads are not supported on the `<a>` element.	Firefox Android Full support 20	Opera Android ?	Safari iOS No support No	Samsung Internet Android Full support 1.0 Notes' Full support 1.0 Notes' Notes' Starting in Samsung Internet 9.0, cross-origin downloads are not supported on the `<a>` element.
`href`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`hreflang`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`target="_blank"` implies `rel="noopener"` behavior Deprecated'	Chrome No support No	Edge No support No	Firefox Full support 79	IE No support No	Opera No support No	Safari Full support 12.1	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 79	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android No support No
`name` Deprecated'	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`ping` Experimental'	Chrome Full support Yes	Edge Full support 79	Firefox Full support Yes Disabled' Full support Yes Disabled' Disabled' This feature is behind the `browser.send_pings` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support Yes	Safari No support No	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes Disabled' Full support Yes Disabled' Disabled' This feature is behind the `browser.send_pings` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android ?	Safari iOS No support No	Samsung Internet Android Full support Yes
`referrerpolicy`	Chrome Full support 51	Edge Full support 79	Firefox Full support 50	IE No support No	Opera Full support 38	Safari Full support 11.1	WebView Android Full support 51	Chrome Android Full support 51	Firefox Android Full support 50	Opera Android Full support 41	Safari iOS No support No	Samsung Internet Android Full support 7.2
`rel`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`rev` Deprecated'	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`shape` Deprecated'	Chrome No support No	Edge No support No	Firefox No support ? — 58 Notes' No support ? — 58 Notes' Notes' You can no longer nest an `<a>` element inside a `<map>` element to create a hotspot region - `coords` and `shape` attribute support removed.	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support ? — 58 Notes' No support ? — 58 Notes' Notes' You can no longer nest an `<a>` element inside a `<map>` element to create a hotspot region - `coords` and `shape` attribute support removed.	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`target`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`type`	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.': Deprecated. Not for use in new websites.
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.

Web/HTML/Element/a

Contents

Attributes

Obsolete attributes

Properties

Examples

Linking to an absolute URL

HTML

Result

Linking to relative URLs

HTML

CSS

Result

Linking to an element on the same page

Linking to an email address

Linking to telephone numbers

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

Example painting app with save link

HTML

CSS

JavaScript

Result

Security and privacy

Accessibility

Strong link text

Inaccessible, weak link text

Strong link text

onclick events

External links and linking to non-HTML resources

Link that opens a new tab/window

Link to a non-HTML resource

Skip links

Size and proximity

Size

Proximity

Specifications

Browser compatibility

Legend

See also