HTML - <a>

The HTML Anchor Element (<a>) defines a hyperlink to a location on the same page or any other page on the Web. It can also be used (in an obsolete way) to create an anchor point—a destination for hyperlinks within the content of a page, so that links aren't limited to connecting simply to the top of a page.

Examples

Linking to an external location

HTML
<!-- anchor linking to external file -->
<a href="http://www.mozilla.com/">
External Link
</a>

Result

External Link

Creating a clickable image

This small example use 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.

HTML
<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 buttons or links that will open in the user's email program to allow them to send a new message. This is done by using a mailto link. Here's a simple example:

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

This results in a link that looks like this: Send email to nowhere.

For additional details about the mailto URL scheme, such as how to include the subject, body, or other predetermined content, see Email links or RFC 6068.

Creating a phone link

With phones viewing web documents and laptops being connected to phones offering clickable phone links becomes increasingly helpful.

HTML
<a href="tel:+491570156">+49 157 0156</a>

For additional details about the tel URL scheme, see RFC 2806 and RFC 2396.

Using the download attribute to save a canvas as a PNG

If you want to allow a user to download an HTML Canvas as an image you can create a link with a download attribute and the canvas data as a file URL:

JavaScript
var link = document.createElement('a');
link.innerHTML = '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 http://jsfiddle.net/codepo8/V6ufG/2/

Description  

The HTML Anchor Element (<a>) defines a hyperlink to a location on the same page or any other page on the Web. It can also be used (in an obsolete way) to create an anchor point—a destination for hyperlinks within the content of a page, so that links aren't limited to connecting simply to the top of a page.

HTML
<a href="https://developer.mozilla.org">MDN</a>
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 parent elements Any element that accepts phrasing content, or any element that accepts flow content.
DOM interface HTMLAnchorElement

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 1.0 (1.7 or earlier) [1] (Yes) (Yes) (Yes)
href="#top" (Yes) 10.0 (10.0) (Yes) (Yes) (Yes)
download 14 20.0 (20.0) Edge 13 [5] 15 No support
ping (Yes) No support [2] No support (Yes) No support
referrerpolicy 46.0 [3]  45 (45) [4] No support No support No support
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) (Yes) 1.0 (1.0) [1] (Yes) (Yes) (Yes) (Yes)
href="#top" (Yes) ? 10.0 (10.0) (Yes) (Yes) (Yes) ?
download (Yes) ? 20.0 (20.0) No support ? No support ?
ping ? ? No support [2] ? ? ? ?
referrerpolicy No support 46.0 [3] 45.0 (45.0) [4] No support No support No support 46.0 [3]

[1] Starting from Gecko 41 (Firefox 41.0 / Thunderbird 41.0 / SeaMonkey 2.38), <a> without href attribute is no more classified as interactive content. Clicking it inside <label> will activate labelled content (bug 1167816).

[2] Disabled by default

[3] Implemented behind a flag.

[4] Behind the network.http.enablePerElementReferrer preference, that default to false. From Firefox 42 to Firefox 44, the attribute was called referrer.

[5] Attempting to download data URIs causes Edge to crash until v14.14357.

Notes  

The following are reserved browser key bindings for the two major browsers and should not be used as values to accesskey: a, c, e, f, g, h, v, left arrow, and right arrow.

HTML 3.2 defines only name, href, rel, rev, and title.

The target attribute is not defined in browsers that do not support frames, such as Netscape 1 generation browsers. Furthermore, target is not allowed under strict variants of XHTML but is limited to frameset or transitional forms.

JavaScript recommendations

It is often the case that an anchor tag is used with the onclick event. In order to prevent the page from refreshing, href is often set to either "#" or "javascript:void(0)". Both of these values can lead to some unexpected errors when copying links and opening links in a new tab and/or window. Be aware of this for usability reasons, and when users do use anchor tags and you prevent default behavior.

See Also  

Specifications  

Specification Status Comment
Referrer Policy
The definition of 'referrer attribute' in that specification.
Working Draft Added the referrer attribute.
WHATWG 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  

 

Whether clicking on an <a> causes it to (by default) become focused varies by browser and OS.

Does clicking on an <a> give it the focus?
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
Does tapping on an <a> give it the focus?
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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/a

Content Element HTML HTML text-level semantics Reference Web