<a>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
O elemento <a>
em HTML (ou elemento âncora), com o atributo href
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. O conteúdo dentro de cada <a>
precisará indicar o destino do link.
Experimente
Atributos
Os atributos do elemento incluem os atributos globais.
download
-
Leva o usuário a salvar a URL em vez de navegar até ela. Pode ser usado com ou sem um valor:
-
Sem um valor, o browser irá sugerir um nome de arquivo/extensão, gerado a partir de diversas origens:
- O cabeçalho HTTP
Content-Disposition
- O segmento final no path (caminho) da URL
- The media type (from the (
Content-Type
header, the start of adata:
URL, orBlob.type
for ablob:
URL)
- O cabeçalho HTTP
-
A definição de um valor o sugere como o nome do arquivo. Caracteres
/
e\
são convertidos para underscores (_
).Arquivos de sistema talvez proibam alguns caracteres em nomes de arquivos, então o navegador irá ajustar o nome sugerido caso necessário.
Note: Notes:-
download
somente funciona para URLs de mesma origem, ou os esquemasblob:
edata:
- Se
Content-Disposition
tiver um diferentefilename
(nome do arquivo) quedownload
, o cabeçalho tem prioridade. (SeContent-Disposition: inline
, Firefox prioriza o cabeçalho enquanto o Chrome escolhedownload
.)
-
href
-
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:
- Sections of a page with fragment URLs(Seções de página com fragmentos URL)
- Pieces of media files with media fragments (Pedaços de arquivos de mídia com fragmentos da própria mídia)
- Números de telefone com
tel:
URLs - Email addresses with(Endereço de email com)
mailto:
URLs - Alguns navegadores talvez não aguentem certos arranjos em URL, para isso os websites fazem uso do
registerProtocolHandler()
hreflang
-
Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global
lang
attribute. ping
-
Uma lista de URLs separadas por espaços. Quando o link é seguido, o brrowser enviará requisições
POST
com o corpoPING
para as URLs. Typically for tracking. referrerpolicy
Experimental-
Quanto do referrer para ser enviado quando acessar o link. Acesse
Referrer-Policy
para possíveis valores e seus efeitos. rel
-
The relationship of the linked URL as space-separated link types.
target
-
Where to display the linked URL, as the name for a browsing context (a tab, window, or
<iframe>
). The following keywords have special meanings for where to load the URL:-
_self
: No atual contexto de pesquisa. (Default) -
_blank
: Normalmente uma nova aba, porém usuários podem configurar seus navegadores para abrir em uma nova janela. -
_parent
: the parent browsing context of the current one. If no parent, behaves as_self
. -
_top
: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as_self
.
Nota: Quando usando
target
, adicionerel="noreferrer noopener"
para evitar "exploit" parawindow.opener
API;Warning: Note: Linking to another page with
target="_blank"
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 usingrel="noreferrer noopener"
. -
type
-
Hints at the linked URL's format with a MIME type. No built-in functionality.
Obsolete attributes
charset
-
Hinted at the character encoding of the linked URL.
Nota: This attribute is obsolete and should not be used by authors. Use the HTTP
Content-Type
header on the linked URL. coords
-
Used with the
shape
attribute. A comma-separated list of coordinates. name
-
Was required to define a possible target location in a page. In HTML 4.01,
id
andname
could both be used on<a>
, as long as they had identical values.Nota: Use the global attribute
id
instead. rev
-
Specified a reverse link; the opposite of the
rel
attribute. Deprecated for being very confusing. shape
-
The shape of the hyperlink's region in an image map.
Nota: Use the
<area>
element for image maps instead.
Properties
Content categories | Flow content, phrasing content, interactive content, palpable content. |
---|---|
Permitted content | Transparent, containing either flow content (excluding interactive content) or phrasing content. |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents |
Any element that accepts
phrasing content, or any element that accepts
flow content, but not other <a> elements.
|
Implicit ARIA role |
link when href attribute is
present, otherwise
no corresponding role
|
Permitted ARIA roles |
When When
|
DOM interface | HTMLAnchorElement |
Examples
Linking to an absolute URL
HTML
<a href="https://www.mozilla.com"> Mozilla </a>
Result
Linking to relative URLs
HTML
<a href="//example.com">Scheme-relative URL</a>
<a href="/pt-BR/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>
Result
Linking to an element on the same page
<!-- <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>
Nota: You can use href="#top"
or the empty fragment (href="#"
) to link to the top of the current page, as defined in the HTML specification.
Linking to an email address
To create links that open in the user's email program to let them send a new message, use the mailto:
scheme:
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
For details about mailto:
URLs, such as including a subject or body, see Email links or RFC 6068.
Linking to telephone numbers
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>
tel:
link behavior varies with device capabilities:
- Cellular devices autodial the number.
- Most operating systems have programs that can make calls, like Skype or FaceTime.
- Websites can make phone calls with
registerProtocolHandler
, such asweb.skype.com
. - Other behaviors include saving the number to contacts, or sending the number to another device.
See RFC 3966 for syntax, additional features, and other details about the tel:
URL scheme.
Using the download attribute to save a <canvas> as a PNG
To save a <canvas>
element's contents as an image, you can create a link with a download
attribute and the canvas data as a data:
URL:
Example painting app with save link
HTML
<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>
CSS
html {
font-family: sans-serif;
}
canvas {
background: #fff;
border: 1px dashed;
}
a {
display: inline-block;
background: #69c;
color: #fff;
padding: 5px 10px;
}
JavaScript
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()),
);
Result
Security and privacy
<a>
elements can have consequences for users' security and privacy. See Referer
header: privacy and security concerns for information.
Using target="_blank"
without rel="noreferrer"
and rel="noopener"
makes the website vulnerable to window.opener
API exploitation attacks (vulnerability description).
Accessibility
Strong link text
The content inside a link should indicate where the link goes, even out of context.
Inaccessible, weak link text
A sadly common mistake is to only link the words "click here" or "here":
<p>Learn more about our products <a href="/products">here</a>.</p>
Strong link text
Luckily, this is an easy fix, and it's actually shorter than the inaccessible version!
<p>Learn more <a href="/products">about our products</a>.</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.
onclick events
Anchor elements are often abused as fake buttons by setting their href
to #
or javascript:void(0)
to prevent the page from refreshing, then listening for their click
events .
These bogus href
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.
Use a <button>
instead. In general, you should only use a hyperlink for navigation to a real URL.
External links and linking to non-HTML resources
Links that open in a new tab/window via target="_blank"
, or links that point to a download file should indicate what will happen when the link is followed.
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.
Link that opens a new tab/window
<a target="_blank" href="https://www.wikipedia.org">
Wikipedia (opens in new tab)
</a>
Link to a non-HTML resource
<a href="2017-annual-report.ppt"> 2017 Annual Report (PowerPoint) </a>
If an icon is used to signify link behavior, make sure it has alt text:
<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>
Skip links
A skip link is a link placed as early as possible in <body>
content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.
<body> <a href="#content">Skip to main content</a> <header> … </header> <main id="content"> <!-- The skip link jumps to here -->
.skip-link {
position: absolute;
top: -3em;
background: #fff;
}
.skip-link:focus {
top: 0;
}
Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.
Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.
Size and proximity
Size
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 CSS pixels is recommended.
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.
- Understanding Success Criterion 2.5.5: Target Size
- Target Size and 2.5.5
- Quick test: Large touch targets
Proximity
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.
Spacing may be created using CSS properties like margin
.
Specifications
Specification |
---|
HTML Standard # the-a-element |
Compatibilidade com navegadores
BCD tables only load in the browser