diff options
Diffstat (limited to 'devdocs/html/element%2Fa.html')
| -rw-r--r-- | devdocs/html/element%2Fa.html | 585 |
1 files changed, 585 insertions, 0 deletions
diff --git a/devdocs/html/element%2Fa.html b/devdocs/html/element%2Fa.html new file mode 100644 index 00000000..73eff03d --- /dev/null +++ b/devdocs/html/element%2Fa.html @@ -0,0 +1,585 @@ +<header><h1><a>: The Anchor element</h1></header><div class="section-content"> +<p>The <code><a></code> <a href="../index">HTML</a> element (or <em>anchor</em> element), with <a href="#href">its <code>href</code> attribute</a>, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.</p> <p>Content within each <code><a></code> <em>should</em> indicate the link's destination. If the <code>href</code> attribute is present, pressing the enter key while focused on the <code><a></code> element will activate it.</p> +</div> +<h2 id="try_it">Try it</h2> +<div class="section-content"><iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/a.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="attributes">Attributes</h2> +<div class="section-content"> +<p>This element's attributes include the <a href="../global_attributes">global attributes</a>.</p> <dl> <dt id="download"><a href="#download"><code>download</code></a></dt> <dd> <p>Causes the browser to treat the linked URL as a download. Can be used with or without a <code>filename</code> value:</p> <ul> <li>Without a value, the browser will suggest a filename/extension, generated from various sources: <ul> <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition</code></a> HTTP header</li> <li>The final segment in the URL <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname">path</a> +</li> <li>The <a href="https://developer.mozilla.org/en-US/docs/Glossary/MIME_type">media type</a> (from the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> header, the start of a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs"><code>data:</code> URL</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob/type"><code>Blob.type</code></a> for a <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static"><code>blob:</code> URL</a>)</li> </ul> </li> <li> +<code>filename</code>: defining a value suggests it as the filename. <code>/</code> and <code>\</code> characters are converted to underscores (<code>_</code>). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.</li> </ul> <div class="notecard note" id="sect1"> <p><strong>Note:</strong></p> <ul> <li> +<code>download</code> only works for <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">same-origin URLs</a>, or the <code>blob:</code> and <code>data:</code> schemes.</li> <li>How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself.</li> <li>If the <code>Content-Disposition</code> header has different information from the <code>download</code> attribute, resulting behavior may differ: <ul> <li>If the header specifies a <code>filename</code>, it takes priority over a filename specified in the <code>download</code> attribute.</li> <li>If the header specifies a disposition of <code>inline</code>, Chrome and Firefox prioritize the attribute and treat it as a download. Old Firefox versions (before 82) prioritize the header and will display the content inline.</li> </ul> </li> </ul> </div> </dd> <dt id="href"><a href="#href"><code>href</code></a></dt> <dd> <p>The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:</p> <ul> <li>Sections of a page with document fragments</li> <li>Specific text portions with <a href="https://developer.mozilla.org/en-US/docs/Web/Text_fragments">text fragments</a> +</li> <li>Pieces of media files with media fragments</li> <li>Telephone numbers with <code>tel:</code> URLs</li> <li>Email addresses with <code>mailto:</code> URLs</li> <li>SMS text messages with <code>sms:</code> URLs</li> <li>While web browsers may not support other URL schemes, websites can with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a> +</li> </ul> </dd> <dt id="hreflang"><a href="#hreflang"><code>hreflang</code></a></dt> <dd> <p>Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as <a href="../global_attributes/lang">the global <code>lang</code> attribute</a>.</p> </dd> <dt id="ping"><a href="#ping"><code>ping</code></a></dt> <dd> <p>A space-separated list of URLs. When the link is followed, the browser will send <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST"><code>POST</code></a> requests with the body <code>PING</code> to the URLs. Typically for tracking.</p> </dd> <dt id="referrerpolicy"><a href="#referrerpolicy"><code>referrerpolicy</code></a></dt> <dd> <p>How much of the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when following the link.</p> <ul> <li> +<code>no-referrer</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent.</li> <li> +<code>no-referrer-when-downgrade</code>: The <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> header will not be sent to <a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin">origin</a>s without <a href="https://developer.mozilla.org/en-US/docs/Glossary/TLS">TLS</a> (<a href="https://developer.mozilla.org/en-US/docs/Glossary/HTTPS">HTTPS</a>).</li> <li> +<code>origin</code>: The sent referrer will be limited to the origin of the referring page: its <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL">scheme</a>, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Host">host</a>, and <a href="https://developer.mozilla.org/en-US/docs/Glossary/Port">port</a>.</li> <li> +<code>origin-when-cross-origin</code>: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.</li> <li> +<code>same-origin</code>: A referrer will be sent for <a href="https://developer.mozilla.org/en-US/docs/Glossary/Same-origin_policy">same origin</a>, but cross-origin requests will contain no referrer information.</li> <li> +<code>strict-origin</code>: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).</li> <li> +<code>strict-origin-when-cross-origin</code> (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).</li> <li> +<code>unsafe-url</code>: The referrer will include the origin <em>and</em> the path (but not the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/hash">fragment</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/password">password</a>, or <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/username">username</a>). <strong>This value is unsafe</strong>, because it leaks origins and paths from TLS-protected resources to insecure origins.</li> </ul> </dd> <dt id="rel"><a href="#rel"><code>rel</code></a></dt> <dd> <p>The relationship of the linked URL as space-separated link types.</p> </dd> <dt id="target"><a href="#target"><code>target</code></a></dt> <dd> <p>Where to display the linked URL, as the name for a <em>browsing context</em> (a tab, window, or <a href="iframe"><code><iframe></code></a>). The following keywords have special meanings for where to load the URL:</p> <ul> <li> +<code>_self</code>: the current browsing context. (Default)</li> <li> +<code>_blank</code>: usually a new tab, but users can configure browsers to open a new window instead.</li> <li> +<code>_parent</code>: the parent browsing context of the current one. If no parent, behaves as <code>_self</code>.</li> <li> +<code>_top</code>: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as <code>_self</code>.</li> </ul> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Setting <code>target="_blank"</code> on <code><a></code> elements implicitly provides the same <code>rel</code> behavior as setting <a href="../attributes/rel/noopener"><code>rel="noopener"</code></a> which does not set <code>window.opener</code>.</p> </div> </dd> <dt id="type"><a href="#type"><code>type</code></a></dt> <dd> <p>Hints at the linked URL's format with a <a href="https://developer.mozilla.org/en-US/docs/Glossary/MIME_type">MIME type</a>. No built-in functionality.</p> </dd> </dl> +</div> +<h3 id="deprecated_attributes">Deprecated attributes</h3> +<div class="section-content"><dl> <dt id="charset"> +<a href="#charset"><code>charset</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Hinted at the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding">character encoding</a> of the linked URL.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> This attribute is deprecated and <strong>should not be used by authors</strong>. Use the HTTP <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> header on the linked URL.</p> </div> </dd> <dt id="coords"> +<a href="#coords"><code>coords</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Used with <a href="#shape">the <code>shape</code> attribute</a>. A comma-separated list of coordinates.</p> </dd> <dt id="name"> +<a href="#name"><code>name</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Was required to define a possible target location in a page. In HTML 4.01, <code>id</code> and <code>name</code> could both be used on <code><a></code>, as long as they had identical values.</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> Use the global attribute <a href="../global_attributes#id"><code>id</code></a> instead.</p> </div> </dd> <dt id="rev"> +<a href="#rev"><code>rev</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>Specified a reverse link; the opposite of <a href="#rel">the <code>rel</code> attribute</a>. Deprecated for being very confusing.</p> </dd> <dt id="shape"> +<a href="#shape"><code>shape</code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr> +</dt> <dd> <p>The shape of the hyperlink's region in an image map.</p> <div class="notecard note" id="sect5"> <p><strong>Note:</strong> Use the <a href="area"><code><area></code></a> element for image maps instead.</p> </div> </dd> </dl></div> +<h2 id="examples">Examples</h2> + +<h3 id="linking_to_an_absolute_url">Linking to an absolute URL</h3> +<div class="section-content"> +<h4 id="html">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="O9Xh/Og5khrawRE3A+AxB88YjoxeXDlngvDDwEwKepw=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.mozilla.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mozilla<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result">Result</h4> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Linking to an absolute URL sample" id="frame_linking_to_an_absolute_url" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=linking_to_an_absolute_url" loading="lazy"></iframe> +</div> +</div> +<h3 id="linking_to_relative_urls">Linking to relative URLs</h3> +<div class="section-content"> +<h4 id="html_2">HTML</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3OeGwYuyTv/zhlj89WwfcJ+iaiEY3V/wlyHK9bKptfA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//example.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Scheme-relative URL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/en-US/docs/Web/HTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Origin-relative URL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./p<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Directory-relative URL<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_2">Result</h4> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Linking to relative URLs sample" id="frame_linking_to_relative_urls" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=linking_to_relative_urls" loading="lazy"></iframe> +</div> +</div> +<h3 id="linking_to_an_element_on_the_same_page">Linking to an element on the same page</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="vjFJ6aoTIjsc4xz/hxRNBu11gJXv8X1tQXAVPfPp1Po=" data-language="html"><span class="token comment"><!-- <a> element links to the section below --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#Section_further_down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Jump to the heading below<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token comment"><!-- Heading to link to --></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Section_further_down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Section further down<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_3">Result</h4> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Linking to an element on the same page sample" id="frame_linking_to_an_element_on_the_same_page" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=linking_to_an_element_on_the_same_page" loading="lazy"></iframe> +</div> <div class="notecard note" id="sect9"> <p><strong>Note:</strong> You can use <code>href="#top"</code> or the empty fragment (<code>href="#"</code>) to link to the top of the current page, <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier" target="_blank">as defined in the HTML specification</a>.</p> </div> +</div> +<h3 id="linking_to_an_email_address">Linking to an email address</h3> +<div class="section-content"> +<p>To create links that open in the user's email program to let them send a new message, use the <code>mailto:</code> scheme:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Jb6UJm3VQOXjlsLsQlMeor/X7uynoJTFyLd/jZEdjg0=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:nowhere@mozilla.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Send email to nowhere<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_4">Result</h4> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Linking to an email address sample" id="frame_linking_to_an_email_address" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=linking_to_an_email_address" loading="lazy"></iframe> +</div> <p>For details about <code>mailto:</code> URLs, such as including a subject or body, see <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#email_links">Email links</a> or <a href="https://datatracker.ietf.org/doc/html/rfc6068" target="_blank">RFC 6068</a>.</p> +</div> +<h3 id="linking_to_telephone_numbers">Linking to telephone numbers</h3> +<div class="section-content"> +<div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="YeLw9jGA9vg6UYcXkF+BCK9vyMn14M/w7YB18h+ZpeM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel:+49.157.0156<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>+49 157 0156<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel:+1(800)555-0123<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>(800) 555-0123<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <h4 id="result_5">Result</h4> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Linking to telephone numbers sample" id="frame_linking_to_telephone_numbers" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=linking_to_telephone_numbers" loading="lazy"></iframe> +</div> <p><code>tel:</code> link behavior varies with device capabilities:</p> <ul> <li>Cellular devices autodial the number.</li> <li>Most operating systems have programs that can make calls, like Skype or FaceTime.</li> <li>Websites can make phone calls with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler</code></a>, such as <code>web.skype.com</code>.</li> <li>Other behaviors include saving the number to contacts, or sending the number to another device.</li> </ul> <p>See <a href="https://datatracker.ietf.org/doc/html/rfc3966" target="_blank">RFC 3966</a> for syntax, additional features, and other details about the <code>tel:</code> URL scheme.</p> +</div> +<h3 id="using_the_download_attribute_to_save_a_canvas_as_a_png">Using the download attribute to save a <canvas> as a PNG</h3> +<div class="section-content"> +<p>To save a <a href="canvas"><code><canvas></code></a> element's contents as an image, you can create a link where the <code>href</code> is the canvas data as a <code>data:</code> URL created with JavaScript and the <code>download</code> attribute provides the file name for the downloaded PNG file:</p> <h4 id="example_painting_app_with_save_link">Example painting app with save link</h4> <h5 id="html_3">HTML</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ye0L2ExfMb3ZSsS3Y0Yrn6IGMWWc4DAq2ZjTwnJVyNo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Paint by holding down the mouse button and moving it. + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">download</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my_painting.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Download my painting<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>canvas</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>canvas</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="css">CSS</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="WWvZzlFHKimd1W7wsW+bc4hqRbQxnQZk+02xMwVYt+8=" data-language="css"><span class="token selector">html</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +<span class="token selector">canvas</span> <span class="token punctuation">{</span> + <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 1px dashed<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +<span class="token selector">a</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> + <span class="token property">background</span><span class="token punctuation">:</span> #69c<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 5px 10px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h5 id="javascript">JavaScript</h5> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="qGGr/ZrMV4ggc0OtYRenghLaTrw2TGY8wUZ2+6CfU0o=" data-language="js"><span class="token keyword">const</span> canvas <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"canvas"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> c <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">"2d"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +c<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">"hotpink"</span><span class="token punctuation">;</span> +<span class="token keyword">let</span> isDrawing<span class="token punctuation">;</span> + +<span class="token keyword">function</span> <span class="token function">draw</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>isDrawing<span class="token punctuation">)</span> <span class="token punctuation">{</span> + c<span class="token punctuation">.</span><span class="token function">beginPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + c<span class="token punctuation">.</span><span class="token function">arc</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span> <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + c<span class="token punctuation">.</span><span class="token function">closePath</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + c<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> + +canvas<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"mousemove"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> + <span class="token function">draw</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>offsetX<span class="token punctuation">,</span> event<span class="token punctuation">.</span>offsetY<span class="token punctuation">)</span><span class="token punctuation">,</span> +<span class="token punctuation">)</span><span class="token punctuation">;</span> +canvas<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"mousedown"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>isDrawing <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +canvas<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"mouseup"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>isDrawing <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +document + <span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span> + <span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> + <span class="token string">"click"</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>href <span class="token operator">=</span> canvas<span class="token punctuation">.</span><span class="token function">toDataURL</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> + <span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <h5 id="result_6">Result</h5> +<div class="code-example" id="sect12"> + +<iframe class="sample-code-frame" title="Example painting app with save link sample" id="frame_example_painting_app_with_save_link" width="100%" height="400" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=example_painting_app_with_save_link" loading="lazy"></iframe> +</div> +</div> +<h2 id="security_and_privacy">Security and privacy</h2> +<div class="section-content"> +<p><code><a></code> elements can have consequences for users' security and privacy. See <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns"><code>Referer</code> header: privacy and security concerns</a> for information.</p> <p>Using <code>target="_blank"</code> without <a href="../attributes/rel/noreferrer"><code>rel="noreferrer"</code></a> and <a href="../attributes/rel/noopener"><code>rel="noopener"</code></a> makes the website vulnerable to <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/opener"><code>window.opener</code></a> API exploitation attacks, although note that, in newer browser versions setting <code>target="_blank"</code> implicitly provides the same protection as setting <code>rel="noopener"</code>. See <a href="#browser_compatibility">browser compatibility</a> for details.</p> +</div> +<h2 id="accessibility">Accessibility</h2> + +<h3 id="strong_link_text">Strong link text</h3> +<div class="section-content"> +<p><strong>The content inside a link should indicate where the link goes</strong>, even out of context.</p> <h4 id="inaccessible_weak_link_text">Inaccessible, weak link text</h4> <p>A sadly common mistake is to only link the words "click here" or "here":</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="PHRPy4Os+xCmHs++LjAUqXt0evtsOO9gsK7cLZOUzA4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Learn more about our products <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/products<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>here<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result_7">Result</h5> +<div class="code-example" id="sect13"> + +<iframe class="sample-code-frame" title="Inaccessible, weak link text sample" id="frame_inaccessible_weak_link_text" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=inaccessible_weak_link_text" loading="lazy"></iframe> +</div> <h4 id="strong_link_text_2">Strong link text</h4> <p>Luckily, this is an easy fix, and it's actually shorter than the inaccessible version!</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="+Tc5lxAd7W/DPkjpCyQjqGS4WC9YXWwfOqyPVk9WZKk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Learn more <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/products<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>about our products<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result_8">Result</h5> +<div class="code-example" id="sect14"> + +<iframe class="sample-code-frame" title="Strong link text sample" id="frame_strong_link_text" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=strong_link_text" loading="lazy"></iframe> +</div> <p>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.</p> +</div> +<h3 id="onclick_events">onclick events</h3> +<div class="section-content"> +<p>Anchor elements are often abused as fake buttons by setting their <code>href</code> to <code>#</code> or <code>javascript:void(0)</code> to prevent the page from refreshing, then listening for their <code>click</code> events .</p> <p>These bogus <code>href</code> 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.</p> <p>Use a <a href="button"><code><button></code></a> instead. In general, <strong>you should only use a hyperlink for navigation to a real URL</strong>.</p> +</div> +<h3 id="external_links_and_linking_to_non-html_resources">External links and linking to non-HTML resources</h3> +<div class="section-content"> +<p>Links that open in a new tab/window via <code>target="_blank"</code>, or links that point to a download file should indicate what will happen when the link is followed.</p> <p>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.</p> <h4 id="link_that_opens_a_new_tabwindow">Link that opens a new tab/window</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="G0kd4SKtECA0PLD2iWeWwI7LzlNjuCloPCk5xglhppY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.wikipedia.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Wikipedia (opens in new tab) +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result_9">Result</h5> +<div class="code-example" id="sect15"> + +<iframe class="sample-code-frame" title="Link that opens a new tab/window sample" id="frame_link_that_opens_a_new_tabwindow" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=link_that_opens_a_new_tabwindow" loading="lazy"></iframe> +</div> <h4 id="link_to_a_non-html_resource">Link to a non-HTML resource</h4> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="kAJN9/uxrfFR0zROlEu2QGNIZeSlnVVyW7+K+pY04/I=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-annual-report.ppt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2017 Annual Report (PowerPoint)<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <p>If an icon is used to signify link behavior, make sure it has an <a href="img#alt"><em>alt text</em></a>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="KKZ8Fu0KKyYqIaSDzMoSmS9f++1zCQ8+hsZhwDlWy9U=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.wikipedia.org<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Wikipedia + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(opens in new tab)<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>newtab.svg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2017-annual-report.ppt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + 2017 Annual Report + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(PowerPoint file)<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ppt-icon.svg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> +</pre> +</div> <h5 id="result_10">Result</h5> +<div class="code-example" id="sect16"> + +<iframe class="sample-code-frame" title="Link to a non-HTML resource sample" id="frame_link_to_a_non-html_resource" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=link_to_a_non-html_resource" loading="lazy"></iframe> +</div> <ul> <li><a href="https://webaim.org/techniques/hypertext/hypertext_links" target="_blank">WebAIM: Links and Hypertext - Hypertext Links</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_%E2%80%94_predictable_make_web_pages_appear_and_operate_in_predictable_ways">MDN / Understanding WCAG, Guideline 3.2</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html" target="_blank">G200: Opening new windows and tabs from a link only when necessary</a></li> <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html" target="_blank">G201: Giving users advanced warning when opening a new window</a></li> </ul> +</div> +<h3 id="skip_links">Skip links</h3> +<div class="section-content"> +<p>A <strong>skip link</strong> is a link placed as early as possible in <a href="body"><code><body></code></a> content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="uCcEPMWQrwx4WUkNH7CcO5SRVXuFI2PJJYClxIWSaZc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#content<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skip-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Skip to main content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> + + <span class="token comment"><!-- The skip link jumps to here --></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="sjFzqzI63Wkszs87H75n6HCdBZSKnnSjJ4gNU1OSYHE=" data-language="css"><span class="token selector">.skip-link</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">top</span><span class="token punctuation">:</span> -3em<span class="token punctuation">;</span> + <span class="token property">background</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +<span class="token selector">.skip-link:focus</span> <span class="token punctuation">{</span> + <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <h4 id="result_11">Result</h4> +<div class="code-example" id="sect17"> + +<iframe class="sample-code-frame" title="Skip links sample" id="frame_skip_links" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/a/runner.html?id=skip_links" loading="lazy"></iframe> +</div> <p>Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.</p> <p>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.</p> <ul> <li><a href="https://webaim.org/techniques/skipnav/" target="_blank">WebAIM: "Skip Navigation" Links</a></li> <li><a href="https://www.a11yproject.com/posts/skip-nav-links/" target="_blank">How-to: Use Skip Navigation links</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%e2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN / Understanding WCAG, Guideline 2.4 explanations</a></li> <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html" target="_blank">Understanding Success Criterion 2.4.1</a></li> </ul> +</div> +<h3 id="size_and_proximity">Size and proximity</h3> +<div class="section-content"> +<h4 id="size">Size</h4> <p>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 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels" target="_blank">CSS pixels</a> is recommended.</p> <p>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.</p> <ul> <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html" target="_blank">Understanding Success Criterion 2.5.5: Target Size</a></li> <li><a href="https://adrianroselli.com/2019/06/target-size-and-2-5-5.html" target="_blank">Target Size and 2.5.5</a></li> <li><a href="https://www.a11yproject.com/posts/large-touch-targets/" target="_blank">Quick test: Large touch targets</a></li> </ul> <h4 id="proximity">Proximity</h4> <p>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.</p> <p>Spacing may be created using CSS properties like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin"><code>margin</code></a>.</p> <ul> <li><a href="https://axesslab.com/hand-tremors/" target="_blank">Hand tremors and the giant-button-problem</a></li> </ul> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <th scope="row"><a href="../content_categories">Content categories</a></th> <td> <a href="../content_categories#flow_content">Flow content</a>, <a href="../content_categories#phrasing_content">phrasing content</a>, <a href="../content_categories#interactive_content">interactive content</a>, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="../content_categories#transparent_content_model">Transparent</a>, except that no descendant may be <a href="../content_categories#interactive_content">interactive content</a> or an <a href="a" aria-current="page">a</a> element, and no descendant may have a specified <a href="../global_attributes/tabindex">tabindex</a> attribute. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="../content_categories#phrasing_content">phrasing content</a>, or any element that accepts <a href="../content_categories#flow_content">flow content</a>, but not other <code><a></code> elements. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role"><code>link</code></a> when <code>href</code> attribute is present, otherwise <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/generic_role"><code>generic</code></a> </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td> <p>When <code>href</code> attribute is present:</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role"><code>button</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role"><code>checkbox</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role"><code>menuitem</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role"><code>menuitemcheckbox</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role"><code>menuitemradio</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role"><code>option</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role"><code>radio</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role"><code>switch</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role"><code>tab</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treeitem_role"><code>treeitem</code></a></li> </ul> <p>When <code>href</code> attribute is not present:</p> <ul> <li>any</li> </ul> </td> </tr> <tr> <th scope="row">DOM interface</th> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement"><code>HTMLAnchorElement</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element">HTML Standard <br><small># the-a-element</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody> +<tr> +<th><code>a</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes"><details><summary>1</summary>Starting with Firefox 41, <a> without <code>href</code> attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (<a href="https://bugzil.la/1167816">bug 1167816</a>).</details></td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes"><details><summary>4</summary>Starting with Firefox 41, <a> without <code>href</code> attribute is no longer classified as interactive content: clicking it inside <label> will activate labelled content (<a href="https://bugzil.la/1167816">bug 1167816</a>).</details></td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>attributionsrc</code></th> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">103</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-yes">117</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>charset</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>coords</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>1–58</summary>You can no longer nest an <code><a></code> element inside a <code><map></code> element to create a hotspot region - <code>coords</code> and <code>shape</code> attribute support removed.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>4–58</summary>You can no longer nest an <code><a></code> element inside a <code><map></code> element to create a hotspot region - <code>coords</code> and <code>shape</code> attribute support removed.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>download</code></th> +<td class="bc-supports-yes"><details><summary>14</summary>Starting in Chrome 65, cross-origin downloads are not supported on the <code><a></code> element.</details></td> +<td class="bc-supports-yes"> +<details><summary>18</summary>Starting in Edge 79, cross-origin downloads are not supported on the <code><a></code> element.</details><details><summary>13</summary>["Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (<a href="https://developer.microsoft.com/microsoft-edge/platform/issues/7160092/">bug 7160092</a>).", "Edge 17 or older didn't follow the attributes' value to determine filename (<a href="https://developer.microsoft.com/microsoft-edge/platform/issues/7260192/">bug 7260192</a>)."]</details> +</td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>15</summary>Starting in Opera 52, cross-origin downloads are not supported on the <code><a></code> element.</details></td> +<td class="bc-supports-yes">10.1</td> +<td class="bc-supports-yes"><details><summary>4.4</summary>Starting in Chrome 65, cross-origin downloads are not supported on the <code><a></code> element.</details></td> +<td class="bc-supports-yes"><details><summary>18</summary>Starting in Chrome 65, cross-origin downloads are not supported on the <code><a></code> element.</details></td> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes"><details><summary>14</summary>Starting in Opera 47, cross-origin downloads are not supported on the <code><a></code> element.</details></td> +<td class="bc-supports-yes">13</td> +<td class="bc-supports-yes"><details><summary>1.0</summary>Starting in Samsung Internet 9.0, cross-origin downloads are not supported on the <code><a></code> element.</details></td> +</tr> +<tr> +<th><code>href</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>href_sms</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>hreflang</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>implicit_noopener</code></th> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">74</td> +<td class="bc-supports-yes">12.1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">88</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">12.2</td> +<td class="bc-supports-yes">15.0</td> +</tr> +<tr> +<th><code>name</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>ping</code></th> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">17</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤37</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>referrerpolicy</code></th> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">79</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">38</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">51</td> +<td class="bc-supports-yes">50</td> +<td class="bc-supports-yes">41</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">7.2</td> +</tr> +<tr> +<th><code>rel</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>rev</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>shape</code></th> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>1–58</summary>You can no longer nest an <code><a></code> element inside a <code><map></code> element to create a hotspot region - <code>coords</code> and <code>shape</code> attribute support removed.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no"><details><summary>4–58</summary>You can no longer nest an <code><a></code> element inside a <code><map></code> element to create a hotspot region - <code>coords</code> and <code>shape</code> attribute support removed.</details></td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-no">No</td> +</tr> +<tr> +<th><code>target</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +<tr> +<th><code>text_fragments</code></th> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">67</td> +<td class="bc-supports-yes">16.1</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-yes">80</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">57</td> +<td class="bc-supports-yes">16.1</td> +<td class="bc-supports-yes">13.0</td> +</tr> +<tr> +<th><code>type</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr> +</tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="link"><code><link></code></a> is similar to <code><a></code>, but for metadata hyperlinks that are invisible to users.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:link"><code>:link</code></a> is a CSS pseudo-class that will match <code><a></code> elements with URL in <code>href</code> attribute that was not yet visited by the user.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:visited"><code>:visited</code></a> is a CSS pseudo-class that will match <code><a></code> elements with URL in <code>href</code> attribute that was visited by the user in the past.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link"><code>:any-link</code></a> is a CSS pseudo-class that will match <code><a></code> elements with <code>href</code> attribute.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Text_fragments">Text fragments</a> are user-agent instructions added to URLs that allow content authors to link to specific text on a page, without IDs being required.</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a</a> + </p> +</div> |