path: root/files/pt-br/web/html/element/a/index.html

---
title: <a>
slug: Web/HTML/Element/a
tags:
  - Conteúdo
  - Elemento
  - HTML
  - Internet
  - Rede
  - Referencia
  - Semántica HTML a nivel de texto
  - Web
translation_of: Web/HTML/Element/a
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">O <strong>elemento</strong> <strong><code>&lt;a&gt;</code> </strong>em <strong>HTML </strong>(ou elemento âncora), com o atributo <a href="#href"><code>href</code></a> cria-se um hiperligação nas páginas web, arquivos, endereços de emails, ligações na mesma página ou endereços na URL.</span> O conteúdo dentro de cada <code>&lt;a&gt;</code> <strong>precisará</strong> indicar o destino do link.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div>

<p class="hidden">O exemplo de código está armazenado no repositório GitHub. Se deseja contribuir, clone o projeto no <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e nos envie uma pull request (subir as atualizações).</p>

<h2 id="Atributos">Atributos</h2>

<p>Os atributos do elemento incluem os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p>

<dl>
 <dt id="download">{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}</dt>
 <dd>Leva o usuário a salvar a URL em vez de navegar até ela. Pode ser usado com ou sem um valor:</dd>
 <dd>
 <ul>
  <li>Sem um valor, o <em>browser </em>irá sugerir um nome de arquivo/extensão, gerado a partir de diversas origens:
   <ul>
    <li>O cabeçalho HTTP {{HTTPHeader("Content-Disposition")}}</li>
    <li>O segmento final no <a href="/en-US/docs/Web/API/URL/pathname">path</a> (caminho) da URL</li>
    <li>The {{Glossary("MIME_type", "media type")}} (from the ({{HTTPHeader("Content-Type")}} header, the start of a <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URL</a>, or {{domxref("Blob.type")}} for a <a href="/en-US/docs/Web/API/URL/createObjectURL"><code>blob:</code> URL</a>)</li>
   </ul>
  </li>
  <li>A definição de um valor o sugere como o nome do arquivo. Caracteres <code>/</code> e <code>\</code> são convertidos para <em>underscores </em>(<code>_</code>).Arquivos de sistema talvez proibam alguns caracteres em nomes de arquivos, então o navegador irá ajustar o nome sugerido caso necessário.  </li>
 </ul>

 <div class="note"><strong>Notes:</strong>

 <ul>
  <li><code>download</code> somente funciona para <a href="/en-US/docs/Web/Security/Same-origin_policy">URLs de mesma origem </a>, ou os esquemas <code>blob:</code> e <code>data:</code></li>
  <li>Se  <code>Content-Disposition</code> tiver um diferente <code>filename</code> (nome do arquivo) que <code>download</code>,  o cabeçalho tem prioridade. (Se <code>Content-Disposition: inline</code>, Firefox prioriza o cabeçalho enquanto o Chrome escolhe <code>download</code>.)</li>
 </ul>
 </div>
 </dd>
 <dt id="href">{{HTMLAttrDef("href")}}</dt>
 <dd>
 <p>A URL para a qual o hiperlink aponta. Links não se restrigem a URLs baseadas no protocolo HTTP — eles podem utilizar qualquer tipo de URL suportado pelos browsers:</p>

 <ul>
  <li>Sections of a page with fragment URLs(Seções de página com fragmentos URL)</li>
  <li>Pieces of media files with media fragments (Pedaços de arquivos de mídia com fragmentos da própria mídia)</li>
  <li>Números de telefone com <code>tel:</code> URLs</li>
  <li>Email addresses with(Endereço de email com) <code>mailto:</code> URLs</li>
  <li>Alguns navegadores talvez não aguentem certos arranjos em URL, para isso os websites fazem uso do <code><a href="/en-US/docs/Web/API/Navigator/registerProtocolHandler">registerProtocolHandler()</a></code></li>
 </ul>
 </dd>
 <dt id="hreflang">{{HTMLAttrDef("hreflang")}}</dt>
 <dd>Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as <a href="/en-US/docs/Web/HTML/Global_attributes/lang">the global <code>lang</code> attribute</a>.</dd>
 <dt id="ping">{{HTMLAttrDef("ping")}}</dt>
 <dd>Uma lista de URLs separadas por espaços. Quando o link é seguido, o brrowser enviará requisições {{HTTPMethod("POST")}} com o corpo <code>PING</code> para as URLs. Typically for tracking.</dd>
 <dt id="referrerpolicy">{{HTMLAttrDef("referrerpolicy")}}{{Experimental_Inline}}</dt>
 <dd>Quanto do <a href="/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> para ser enviado quando acessar o link. Acesse  <a href="/en-US/docs/Web/HTTP/Headers/Referrer-Policy"><code>Referrer-Policy</code></a> para possíveis valores e seus efeitos.</dd>
 <dt id="rel">{{HTMLAttrDef("rel")}}</dt>
 <dd>The relationship of the linked URL as space-separated <a href="/en-US/docs/Web/HTML/Link_types">link types</a>.</dd>
 <dt id="target">{{HTMLAttrDef("target")}}</dt>
 <dd>Where to display the linked URL, as the name for a <em>browsing context</em> (a tab, window, or <code>&lt;iframe&gt;</code>). The following keywords have special meanings for where to load the URL:
 <ul>
  <li><code>_self</code>: No atual contexto de pesquisa. (Default)</li>
  <li><code>_blank</code>: Normalmente uma nova aba, porém usuários podem configurar seus navegadores para abrir em uma nova janela.</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="note">
 <p><strong>Note:</strong> Quando usando <code>target</code>, adicione <code>rel="noreferrer noopener"</code> para evitar "exploit" para <code>window.opener</code> API;</p>
 </div>

 <div class="blockIndicator warning">
 <p><strong>Note:</strong> Linking to another page with <code>target="_blank"</code> will run the new page in the same process as your page. If the new page executes JavaScript, your page's performance may suffer. This can also be avoided by using <code>rel="noreferrer noopener"</code>.</p>
 </div>
 </dd>
 <dt id="type">{{HTMLAttrDef("type")}}</dt>
 <dd>Hints at the linked URL’s format with a {{Glossary("MIME type")}}. No built-in functionality.</dd>
</dl>

<h3 id="Obsolete_attributes">Obsolete attributes</h3>

<dl>
 <dt id="charset">{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>Hinted at the {{Glossary("character encoding")}} of the linked URL.
 <div class="note">
 <p><strong>Note:</strong> This attribute is obsolete and <strong>should not be used by authors</strong>. Use the HTTP {{HTTPHeader("Content-Type")}} header on the linked URL.</p>
 </div>
 </dd>
 <dt id="coords">{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>Used with <a href="#shape">the <code>shape</code> attribute</a>. A comma-separated list of coordinates.</dd>
 <dt id="name">{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>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>&lt;a&gt;</code>, as long as they had identical values.
 <div class="note">
 <p><strong>Note:</strong> Use the global attribute {{HTMLAttrxRef("id")}} instead.</p>
 </div>
 </dd>
 <dt id="rev">{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>Specified a reverse link; the opposite of <a href="#rel">the <code>rel</code> attribute</a>. Deprecated for being very confusing.</dd>
 <dt id="shape">{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}</dt>
 <dd>The shape of the hyperlink’s region in an image map.
 <div class="note"><strong>Note:</strong> Use the {{HTMLElement("area")}} element for image maps instead.</div>
 </dd>
</dl>

<h2 id="Properties">Properties</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Transparent</a>, containing either <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a> (excluding <a href="/en-US/docs/Web/HTML/Content_categories#Interactive_content">interactive content</a>) or <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parents</th>
   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, but not other <code>&lt;a&gt;</code> elements.</td>
  </tr>
  <tr>
   <th scope="row">Implicit ARIA role</th>
   <td>{{ARIARole("link")}} when <code>href</code> attribute is present, otherwise <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>
    <p>When <code>href</code> attribute is present:</p>

    <ul>
     <li>{{ARIARole("button")}}</li>
     <li>{{ARIARole("checkbox")}}</li>
     <li>{{ARIARole("menuitem")}}</li>
     <li>{{ARIARole("menuitemcheckbox")}}</li>
     <li>{{ARIARole("menuitemradio")}}</li>
     <li>{{ARIARole("option")}}</li>
     <li>{{ARIARole("radio")}}</li>
     <li>{{ARIARole("switch")}}</li>
     <li>{{ARIARole("tab")}}</li>
     <li>{{ARIARole("treeitem")}}</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>{{DOMxRef("HTMLAnchorElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Examples">Examples</h2>

<h3 id="Linking_to_an_absolute_URL">Linking to an absolute URL</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;a href="https://www.mozilla.com"&gt;
  Mozilla
&lt;/a&gt;</pre>

<h4 id="Result">Result</h4>

<p>{{EmbedLiveSample('Linking_to_an_absolute_URL')}}</p>

<h3 id="Linking_to_relative_URLs">Linking to relative URLs</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;a href="//example.com"&gt;Scheme-relative URL&lt;/a&gt;
&lt;a href="/en-US/docs/Web/HTML"&gt;Origin-relative URL&lt;/a&gt;
&lt;a href="./p"&gt;Directory-relative URL&lt;/a&gt;
</pre>

<div class="hidden">
<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">a { display: block; margin-bottom: 0.5em }</pre>
</div>

<h4 id="Result_2">Result</h4>

<p>{{EmbedLiveSample('Linking_to_relative_URLs')}}</p>

<h3 id="Linking_to_an_element_on_the_same_page">Linking to an element on the same page</h3>

<pre class="brush: html notranslate">&lt;!-- &lt;a&gt; element links to the section below --&gt;
&lt;p&gt;&lt;a href="#Section_further_down"&gt;
  Jump to the heading below
&lt;/a&gt;&lt;/p&gt;

&lt;!-- Heading to link to --&gt;
&lt;h2 id="Section_further_down"&gt;Section further down&lt;/h2&gt;
</pre>

<div class="blockIndicator note">
<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">as defined in the HTML specification</a>.</p>
</div>

<h3 id="Linking_to_an_email_address">Linking to an email address</h3>

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

<pre class="brush: html notranslate">&lt;a href="mailto:nowhere@mozilla.org"&gt;Send email to nowhere&lt;/a&gt;</pre>

<p>For details about <code>mailto:</code> URLs, such as including a subject or body, see <a href="/en-US/docs/Web/Guide/HTML/Email_links">Email links</a> or {{RFC(6068)}}.</p>

<h3 id="Linking_to_telephone_numbers">Linking to telephone numbers</h3>

<pre class="brush: html notranslate">&lt;a href="tel:+49.157.0156"&gt;+49 157 0156&lt;/a&gt;
&lt;a href="tel:+1(555)5309"&gt;(555) 5309&lt;/a&gt;</pre>

<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 {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler")}}, 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 {{RFC(3966)}} for syntax, additional features, and other details about the <code>tel:</code> URL scheme.</p>

<h3 id="Using_the_download_attribute_to_save_a_&lt;canvas>_as_a_PNG">Using the download attribute to save a &lt;canvas&gt; as a PNG</h3>

<p>To save a {{HTMLElement("canvas")}} element’s contents as an image, you can create a link with a <code>download</code> attribute and the canvas data as a <code>data:</code> URL:</p>

<h4 id="Example_painting_app_with_save_link">Example painting app with save link</h4>

<h5 id="HTML_3">HTML</h5>

<pre class="brush: html notranslate">&lt;p&gt;Paint by holding down the mouse button and moving it.
  &lt;a href="" download="my_painting.png"&gt;Download my painting&lt;/a&gt;
&lt;/p&gt;

&lt;canvas width="300" height="300"&gt;&lt;/canvas&gt;
</pre>

<h5 id="CSS_2">CSS</h5>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}</pre>

<h5 id="JavaScript">JavaScript</h5>

<pre class="brush: js notranslate">var canvas = document.querySelector('canvas'),
    c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI*2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener('mousemove', event =&gt;
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener('mousedown', () =&gt; isDrawing = true);
canvas.addEventListener('mouseup', () =&gt; isDrawing = false);

document.querySelector('a').addEventListener('click', event =&gt;
  event.target.href = canvas.toDataURL()
);
</pre>

<h5 id="Result_3">Result</h5>

<p>{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}}</p>

<h2 id="Security_and_privacy">Security and privacy</h2>

<p><code>&lt;a&gt;</code> elements can have consequences for users’ security and privacy. See <a href="/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 <code>rel="noreferrer"</code> and <code>rel="noopener"</code> makes the website vulnerable to {{domxref("window.opener")}} API exploitation attacks (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">vulnerability description</a>).</p>

<h2 id="Accessibility">Accessibility</h2>

<h3 id="Strong_link_text">Strong link text</h3>

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

<pre class="brush: html example-bad notranslate">&lt;p&gt;
  Learn more about our products &lt;a href="/products"&gt;here&lt;/a&gt;.
&lt;/p&gt;
</pre>

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

<pre class="brush: html example-good notranslate">&lt;p&gt;
  Learn more &lt;a href="/products"&gt;about our products&lt;/a&gt;.
&lt;/p&gt;</pre>

<p>Assistive software have shortcuts to list all links on a page. However, strong link text benefits all users — the “list all links” shortcut emulates how sighted users quickly scan pages.</p>

<h3 id="onclick_events">onclick events</h3>

<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 {{HTMLElement("button")}} instead. In general, <strong>you should only use a hyperlink for navigation to a real URL</strong>.</p>

<h3 id="External_links_and_linking_to_non-HTML_resources">External links and linking to non-HTML resources</h3>

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

<pre class="brush: html notranslate">&lt;a target="_blank" href="https://www.wikipedia.org"&gt;
  Wikipedia (opens in new tab)
&lt;/a&gt;
</pre>

<h4 id="Link_to_a_non-HTML_resource">Link to a non-HTML resource</h4>

<pre class="brush: html notranslate">&lt;a href="2017-annual-report.ppt"&gt;
  2017 Annual Report (PowerPoint)
&lt;/a&gt;
</pre>

<p>If an icon is used to signify link behavior, make sure it has {{HTMLAttrxRef("alt", "img", "alt text", "true")}}:</p>

<pre class="brush: html notranslate">&lt;a  target="_blank" href="https://www.wikipedia.org"&gt;
  Wikipedia
  &lt;img alt="(opens in new tab)" src="newtab.svg"&gt;
&lt;/a&gt;

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

<ul>
 <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_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">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">G201: Giving users advanced warning when opening a new window</a></li>
</ul>

<h3 id="Skip_links">Skip links</h3>

<p>A <strong>skip link</strong> is a link placed as early as possible in {{HTMLElement("body")}} content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.</p>

<pre class="notranslate">&lt;body&gt;
  &lt;a href="#content"&gt;Skip to main content&lt;/a&gt;

  &lt;header&gt;
    …
  &lt;/header&gt;

  &lt;main id="content"&gt; &lt;!-- The skip link jumps to here --&gt;
</pre>

<pre class="brush: css notranslate">.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}</pre>

<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/">WebAIM: "Skip Navigation" Links</a></li>
 <li><a href="https://a11yproject.com/posts/skip-nav-links/">How-to: Use Skip Navigation links</a></li>
 <li><a href="/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">Understanding Success Criterion 2.4.1</a></li>
</ul>

<h3 id="Size_and_proximity">Size and proximity</h3>

<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">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">Understanding Success Criterion 2.5.5: Target Size</a></li>
 <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5</a></li>
 <li><a href="https://a11yproject.com/posts/large-touch-targets/">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 {{CSSxRef("margin")}}.</p>

<ul>
 <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem</a></li>
</ul>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td>
   <td>{{Spec2("Referrer Policy")}}</td>
   <td>Added the <code>referrerpolicy</code> attribute.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "&lt;a&gt;")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "&lt;a&gt;")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "&lt;a&gt;")}}</td>
   <td>{{Spec2("HTML4.01")}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("html.elements.a")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{HTMLElement("link")}} is similar to <code>&lt;a&gt;</code>, but for metadata hyperlinks that are invisible to users.</li>
 <li>{{CSSxRef(":link")}} is a CSS pseudo-class that will match <code>&lt;a&gt;</code> elements with valid <code>href</code> attributes.</li>
</ul>