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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Attributes
This element's attributes include the global attributes.
download
HTML5- 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 adata:
URL, orBlob.type
for ablob:
URL)
- The
- 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 theblob:
anddata:
schemes.- If
Content-Disposition
has a differentfilename
thandownload
, the header takes priority. (IfContent-Disposition: inline
, Firefox prefers the header while Chrome prefersdownload
.)
- Without a value, the browser will suggest a filename/extension, generated from various sources:
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 bodyPING
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
, addrel="noreferrer noopener"
to avoid exploitation of thewindow.opener
API;Note: In newer browser versions (e.g. Firefox 79+) setting
target="_blank"
on<a>
elements implicitly provides the samerel
behavior as settingrel="noopener"
. type
- Hints at the linked URLās format with a MIME type. No built-in functionality.
Obsolete attributes
charset
Obsolete 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. coords
Obsolete since HTML5- Used with the
shape
attribute. A comma-separated list of coordinates. name
Obsolete since HTML5- Was required to define a possible target location in a page. In HTML 4.01,
id
andname
could both be used on<a>
, as long as they had identical values.Note: Use the global attribute
id
instead. rev
Obsolete since HTML5- Specified a reverse link; the opposite of the
rel
attribute. Deprecated for being very confusing. shape
Obsolete 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 When
|
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="/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:nowhere@mozilla.org">Send email to nowhere</a>
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(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 asweb.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>
- WebAIM: Links and Hypertext - Hypertext Links
- MDN / Understanding WCAG, Guideline 3.2
- G200: Opening new windows and tabs from a link only when necessary
- G201: Giving users advanced warning when opening a new window
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.
- WebAIM: "Skip Navigation" Links
- How-to: Use Skip Navigation links
- MDN / Understanding WCAG, Guideline 2.4 explanations
- Understanding Success Criterion 2.4.1
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.
- Understanding Success Criterion 2.5.5: Target Size
- Target Size and 2.5.5
- Quick test: Large touch targets
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
.
Specifications
Specification | Status | Comment |
---|---|---|
Referrer Policy The definition of 'referrer attribute' in that specification. |
Candidate Recommendation | Added the referrerpolicy attribute. |
HTML Living Standard The definition of '<a>' in that specification. |
Living Standard | |
HTML5 The definition of '<a>' in that specification. |
Recommendation | |
HTML 4.01 Specification The definition of '<a>' in that specification. |
Recommendation |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
a | 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 |
charset | 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 | Chrome No support No | Edge No support No | Firefox
No support
? — 58
| 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
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
download | Chrome
Full support
14
| Edge
Full support
18
| Firefox Full support 20 | IE No support No | Opera Full support 15 | Safari Full support 10.1 | WebView Android
Full support
Yes
| Chrome Android
Full support
18
| Firefox Android Full support 20 | Opera Android ? | Safari iOS No support No | Samsung Internet Android
Full support
1.0
|
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 | 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 No support No | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android No support No |
name | 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 | Chrome Full support Yes | Edge Full support 79 | Firefox
Full support
Yes
| 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
| 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 | 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 | Chrome No support No | Edge No support No | Firefox
No support
? — 58
| 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
| 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.