diff options
Diffstat (limited to 'files/pt-br/web/html/element/a/index.html')
| -rw-r--r-- | files/pt-br/web/html/element/a/index.html | 486 |
1 files changed, 486 insertions, 0 deletions
diff --git a/files/pt-br/web/html/element/a/index.html b/files/pt-br/web/html/element/a/index.html new file mode 100644 index 0000000000..e1445c8ab8 --- /dev/null +++ b/files/pt-br/web/html/element/a/index.html @@ -0,0 +1,486 @@ +--- +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><a></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><a></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><iframe></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><a></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><a></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"><a href="https://www.mozilla.com"> + Mozilla +</a></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"><a href="//example.com">Scheme-relative URL</a> +<a href="/en-US/docs/Web/HTML">Origin-relative URL</a> +<a href="./p">Directory-relative URL</a> +</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"><!-- <a> element links to the section below --> +<p><a href="#Section_further_down"> + Jump to the heading below +</a></p> + +<!-- Heading to link to --> +<h2 id="Section_further_down">Section further down</h2> +</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"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></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"><a href="tel:+49.157.0156">+49 157 0156</a> +<a href="tel:+1(555)5309">(555) 5309</a></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_<canvas>_as_a_PNG">Using the download attribute to save a <canvas> 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"><p>Paint by holding down the mouse button and moving it. + <a href="" download="my_painting.png">Download my painting</a> +</p> + +<canvas width="300" height="300"></canvas> +</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 => + draw(event.offsetX, event.offsetY) +); +canvas.addEventListener('mousedown', () => isDrawing = true); +canvas.addEventListener('mouseup', () => isDrawing = false); + +document.querySelector('a').addEventListener('click', event => + event.target.href = canvas.toDataURL() +); +</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><a></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"><p> + Learn more about our products <a href="/products">here</a>. +</p> +</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"><p> + Learn more <a href="/products">about our products</a>. +</p></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"><a target="_blank" href="https://www.wikipedia.org"> + Wikipedia (opens in new tab) +</a> +</pre> + +<h4 id="Link_to_a_non-HTML_resource">Link to a non-HTML resource</h4> + +<pre class="brush: html notranslate"><a href="2017-annual-report.ppt"> + 2017 Annual Report (PowerPoint) +</a> +</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"><a target="_blank" href="https://www.wikipedia.org"> + Wikipedia + <img alt="(opens in new tab)" src="newtab.svg"> +</a> + +<a href="2017-annual-report.ppt"> + 2017 Annual Report + <img alt="(PowerPoint file)" src="ppt-icon.svg"> +</a></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"><body> + <a href="#content">Skip to main content</a> + + <header> + … + </header> + + <main id="content"> <!-- The skip link jumps to here --> +</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", "<a>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}</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><a></code>, but for metadata hyperlinks that are invisible to users.</li> + <li>{{CSSxRef(":link")}} is a CSS pseudo-class that will match <code><a></code> elements with valid <code>href</code> attributes.</li> +</ul> |