The HTML <a>
element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
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.
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 always excluding <a> elements (according to the logical principle of symmetry, if <a> tag, as a parent, can not have interactive content, then the same <a> content can not have <a> tag as its parent). |
Permitted ARIA roles | button , checkbox , menuitem , menuitemcheckbox , menuitemradio , option , radio , switch , tab , treeitem |
DOM interface | HTMLAnchorElement |
Attributes
This element's attributes include the global attributes.
download
HTML5- This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). There are no restrictions on allowed values, though
/
and\
are converted to underscores. Most file systems limit some punctuation in file names, and browsers will adjust the suggested name accordingly.Notes:- This attribute only works for same-origin URLs.
- Although HTTP(s) URLs need to be in the same-origin,
blob:
URLs anddata:
URLs are allowed so that content generated by JavaScript, such as pictures created in an image-editor Web app, can be downloaded. - If the HTTP header
Content-Disposition:
gives a different filename than this attribute, the HTTP header takes priority over this attribute. - If
Content-Disposition:
is set toinline
, Firefox prioritizesContent-Disposition
, like the filename case, while Chrome prioritizes thedownload
attribute.
href
- Contains a URL or a URL fragment that the hyperlink points to.
- A URL fragment is a name preceded by a hash mark (
#
), which specifies an internal target location (anid
of an HTML element) within the current document. URLs are not restricted to Web (HTTP)-based documents, but can use any protocol supported by the browser. For example,file:
,ftp:
, andmailto:
work in most browsers.Note: You can use
href="#top"
or the empty fragmenthref="#"
to link to the top of the current page. This behavior is specified by HTML5. hreflang
- This attribute indicates the human language of the linked resource. It is purely advisory, with no built-in functionality. Allowed values are determined by BCP47.
ping
- Contains a space-separated list of URLs to which, when the hyperlink is followed,
POST
requests with the bodyPING
will be sent by the browser (in the background). Typically used for tracking. referrerpolicy
- Indicates which referrer to send when fetching the URL:
'no-referrer'
means theReferer:
header will not be sent.'no-referrer-when-downgrade'
means noReferer:
header will be sent when navigating to an origin without HTTPS. This is the default behavior.'origin'
means the referrer will be the origin of the page, not including information after the domain.'origin-when-cross-origin'
meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.'strict-origin-when-cross-origin'
'unsafe-url'
means the referrer will include the origin and path, but not the fragment, password, or username. This is unsafe because it can leak data from secure URLs to insecure ones.
rel
- Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
target
- Specifies where to display the linked URL. It is a name of, or keyword for, a browsing context: a tab, window, or
<iframe>
. The following keywords have special meanings:_self
: Load the URL into the same browsing context as the current one. This is the default behavior._blank
: Load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead._parent
: Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as_self
._top
: Load the URL into the top-level browsing context (that is, the "highest" browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this behaves the same way as_self
.
Note: When using
target
, consider addingrel="noreferrer"
to avoid exploitation of thewindow.opener
API.Note: Linking to another page using
target="_blank"
will run the new page on the same process as your page. If the new page is executing expensive JS, your page's performance may suffer. To avoid this userel="noopener"
. type
- Specifies the media type in the form of a MIME type for the linked URL. It is purely advisory, with no built-in functionality.
Obsolete attributes
charset
Obsolete since HTML5- This attribute defined the character encoding of the linked URL. The value should be a space- and/or comma-delimited list of character sets defined in RFC 2045. The default value is
ISO-8859-1
.Usage note: This attribute is obsolete in HTML5 and should not be used by authors. To achieve its effect, use the HTTP
Content-Type:
header on the linked URL. coords
HTML 4 onlyObsolete since HTML5- For use with the below
shape
attribute, this attribute used a comma-separated list of numbers to define the coordinates of the link on the page. name
HTML 4 onlyObsolete since HTML5- This attribute was required for anchors defining a possible target location within a page. In HTML 4.01,
id
andname
could be used simultaneously on a<a>
element as long as they have identical values.Usage note: This attribute is obsolete in HTML5, use the global attribute
id
instead. rev
HTML 4 onlyObsolete since HTML5- This attribute specified a reverse link, the inverse relationship of the rel attribute. It was deprecated for being very confusing.
Note: Currently the W3C HTML 5.2 spec states that
rev
is no longer obsolete, whereas the WHATWG living standard still has it labeled obsolete. Until this discrepancy is resolved, you should still assume it is obsolete. shape
HTML 4 onlyObsolete since HTML5- This attribute was used to define a region for hyperlinks to create an image map. The values are
circle
,default
,polygon
, andrect
. The format of the coords attribute depends on the value of shape. Forcircle
, the value isx,y,r
wherex
andy
are the pixel coordinates for the center of the circle andr
is the radius value in pixels. Forrect
, the coords attribute should bex,y,w,h
. Thex,y
values define the upper-left-hand corner of the rectangle, whilew
andh
define the width and height respectively. A value ofpolygon
for shape requiresx1,y1,x2,y2,...
values for coords. Each of thex,y
pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The valuedefault
for shape requires that the entire enclosed area, typically an image, be used.
Examples
Linking to an external location
<!-- anchor linking to external file --> <a href="https://www.mozilla.com/"> External Link </a>
Result
Linking to another section on the same page
<!-- links to element on this page with id="attr-href" --> <a href="#attr-href"> Description of Same-Page Links </a>
Result
Description of Same Page Links
Creating a clickable image
This example uses an image to link to the MDN home page. The home page will open in a new browsing context, that is, a new page or a new tab.
<a href="https://developer.mozilla.org/en-US/" target="_blank"> <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" /> </a>
Result
Creating an email link
It's common to create links that open in the user's email program to allow them to send a new message. This is done with a mailto:
link. Here's a simple example:
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
Result
For additional details about the mailto
URL scheme, such as including the subject, body, or other predetermined content, see Email links or RFC 6068.
Creating a phone link
Offering phone links is helpful for users viewing web documents and laptops connected to phones.
<a href="tel:+491570156">+49 157 0156</a>
For additional details about the tel
URL scheme, see RFC 3966.
Using the download
attribute to save a <canvas>
as a PNG
If you want to let users download an HTML <canvas>
element as an image, you can create a link with a download
attribute and the canvas data as a file URL:
var link = document.createElement('a'); link.textContent = 'download image'; link.addEventListener('click', function(ev) { link.href = canvas.toDataURL(); link.download = "mypainting.png"; }, false); document.body.appendChild(link);
You can see this in action at jsfiddle.net/codepo8/V6ufG/2/.
Notes
HTML 3.2 defines only the name
, href
, rel
, rev
, and title
attributes.
Security and privacy concerns
Although <a>
elements have many innocent uses, they can have undesirable consequences for user security and privacy. See Referer header: privacy and security concerns for more information and mitigations.
Accessibility concerns
onclick
events
Anchor tags are often abused with the onclick
event to create pseudo-buttons by setting href to "#"
or "javascript:void(0)"
to prevent the page from refreshing.
These values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g., screen readers). In these cases, it is recommended to use a <button>
instead. In general you should only use an anchor for navigation using a proper URL.
External links and linking to non-HTML resources
Both links that open in a new tab or window via the target="_blank"
declaration and links to whose href
value points to a file resource should include an indicator about the behavior that will occur when the link is activated.
People experiencing low vision conditions, who are navigating with the aid of screen reading technology, or who have cognitive concerns may become confused when the new tab, window, or application is opened unexpectedly. Older versions of screen reading software may not even announce the behavior.
Link that opens a new tab or window
<a target="_blank" href="https://www.wikipedia.org/">Wikipedia (opens in a new window)</a>
Link to a non-HTML resource
<a target="_blank" href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a>
If an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description.
- WebAIM: Links and Hypertext - Hypertext Links
- MDN Understanding WCAG, Guideline 3.2 explanations
- G200: Opening new windows and tabs from a link only when necessary | W3C Techniques for WCAG 2.0
- G201: Giving users advanced warning when opening a new window | W3C Techniques for WCAG 2.0
Skip links
A skip link, also known as skipnav, is an a
element placed as close as possible to the opening <body>
element that links to the beginning of the page's main content. This link allows people to bypass content repeated throughout multiple pages on a website, such as a website's header and primary 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 a laborious task.
- WebAIM: "Skip Navigation" Links
- How–to: Use Skip Navigation links - The A11Y Project
- MDN Understanding WCAG, Guideline 2.4 explanations
- Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
Proximity
Large amounts of interactive content—including anchors—placed in close visual proximity to each other should have space inserted to separate them. This spacing is beneficial for people who are experiencing motor control issues, who may accidentally activate the wrong interactive content while navigating.
Spacing may be created using CSS properties such as margin
.
Clicking and focus
Whether clicking on an <a>
causes it to become focused varies by browser and OS.
Desktop Browsers | Windows 8.1 | OS X 10.9 |
---|---|---|
Firefox 30.0 | Yes | Yes |
Chrome ≥39 (Chromium bug 388666) |
Yes | Yes |
Safari 7.0.5 | N/A | Only when it has a tabindex |
Internet Explorer 11 | Yes | N/A |
Presto (Opera 12) | Yes | Yes |
Mobile Browsers | iOS 7.1.2 | Android 4.4.4 |
---|---|---|
Safari Mobile | Only when it has a tabindex |
N/A |
Chrome 35 | ??? | Only when it has a tabindex |
Specifications
Specification | Status | Comment |
---|---|---|
Referrer Policy The definition of 'referrer attribute' in that specification. |
Candidate Recommendation | Added the referrer 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 | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support Yes | Edge Full support Yes | 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 | Edge Mobile 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 Yes | 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 | Edge Mobile 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 | Edge Mobile 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 ? | Chrome Android ? | Edge Mobile Full support Yes | Firefox Android Full support 20 | Opera Android ? | Safari iOS No support No | Samsung Internet Android ? |
href | Chrome Full support Yes | Edge Full support Yes | 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 | Edge Mobile 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 Yes | 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 | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
name | Chrome Full support Yes | Edge Full support Yes | 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 | Edge Mobile 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 No support No | Firefox
Full support
Yes
| IE No support No | Opera Full support Yes | Safari No support No | WebView Android ? | Chrome Android ? | Edge Mobile No support No | Firefox Android
Full support
Yes
| Opera Android ? | Safari iOS No support No | Samsung Internet Android ? |
referrerpolicy | Chrome Full support 51 | Edge No support No | 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 | Edge Mobile No support No | Firefox Android Full support 50 | Opera Android Full support 38 | Safari iOS No support No | Samsung Internet Android Full support 7.2 |
rel | Chrome Full support Yes | Edge Full support Yes | 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 | Edge Mobile 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 Yes | 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 | Edge Mobile 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 | Edge Mobile 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 Yes | 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 | Edge Mobile 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 Yes | 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 | Edge Mobile 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.