Tag HTML <abbr>
A tag HTML <abbr> define uma abreviação ou sigla, como "HTML", "Sr.", "Dez.", "ASAP", "ATM". Aprenda com o tutorial HTML do W3Docs!
A tag HTML <abbr> marca uma abreviação ou sigla — uma forma reduzida de uma palavra ou expressão, como HTML, CSS, Sr., Dez., ASAP ou ATM. Ao envolver a forma abreviada em <abbr> e fornecer sua expansão completa por meio do atributo title, você transforma uma sequência de letras sem sentido em um conteúdo autodescritivo e legível por máquinas.
Esta página explica para que serve o <abbr>, por que ele é importante para acessibilidade e SEO, como o atributo title funciona (e onde ele apresenta limitações), e as boas práticas para utilizá-lo corretamente.
Por que o <abbr> é importante
Visualmente, o <abbr> faz muito pouco — no máximo, alguns navegadores adicionam um sublinhado pontilhado suave. Seu real valor é semântico: ele informa ao software, e não apenas aos leitores com visão, que um trecho de texto é uma abreviação e o que ela representa.
- Leitores de tela. A tecnologia assistiva pode anunciar a expansão no atributo
title, ou ler a abreviação de um modo que se adapte às configurações do usuário. Isso ajuda pessoas que não conseguem ver uma dica de ferramenta ao passar o mouse a compreender siglas comoWCAGouARIA. - Mecanismos de busca e outras ferramentas. Marcar abreviações oferece a crawlers, ferramentas de tradução e indexadores um contexto adicional sobre o que seus termos abreviados realmente significam.
- Leitores não nativos e iniciantes. Um leitor que não conhece
ASAPou uma sigla específica de um domínio recebe o significado completo, em vez de ter que adivinhar.
Em resumo, um simples HTML é apenas quatro letras; <abbr title="HyperText Markup Language">HTML</abbr> são quatro letras mais seu significado, disponível para humanos e máquinas igualmente.
Sintaxe
A tag <abbr> vem em pares. O conteúdo é escrito entre as tags de abertura (<abbr>) e de fechamento (</abbr>).
Exemplo da tag HTML <abbr>:
Tag HTML <abbr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><abbr title="Universal Resource Locator">URL</abbr> - This is a specific way of designating an individual resource address on the Internet </p>
</body>
</html>O atributo title
A tag <abbr> não possui atributos obrigatórios, mas o atributo title é o que a torna útil. Coloque a forma completa e expandida da abreviação em title:
<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for web pages.</p>Em navegadores de desktop, passar o mouse sobre a abreviação exibe a expansão como uma dica de ferramenta. Leitores de tela também podem expor o valor de title aos usuários.
Limitações do title
A dica de ferramenta do title é conveniente, mas você não deve depender dela como a única forma de os usuários descobrirem a expansão:
- Ela só aparece ao passar o mouse. Usuários de telas sensíveis ao toque (celulares, tablets) e usuários que navegam apenas pelo teclado geralmente não conseguem acioná-la.
- Sua exibição é inconsistente entre diferentes leitores de tela e não é garantido que seja anunciada.
Por isso, as Diretrizes de Acessibilidade para Conteúdo Web (critério de sucesso WCAG 3.1.4 Abreviações) recomendam que você também escreva por extenso a abreviação no texto ao redor na primeira vez que ela aparecer, usando depois apenas a forma abreviada:
<p>
The <abbr title="World Wide Web Consortium">W3C</abbr> (World Wide Web
Consortium) develops web standards. The W3C also maintains the HTML
specification.
</p>Dessa forma, o significado fica disponível para todos — não apenas para os usuários que podem passar o mouse.
Atributos
A tag <abbr> suporta os Atributos Globais e os Atributos de Evento. O mais importante deles é o atributo global title, descrito acima.
Como estilizar uma tag HTML <abbr>
Por padrão, alguns navegadores exibem um sublinhado pontilhado sob o conteúdo de <abbr>, mas a estilização não é consistente — por exemplo, versões antigas de alguns navegadores não exibiam sublinhado algum. Para obter uma aparência confiável e previsível, estilize-a você mesmo com CSS. Um padrão comum é uma borda inferior pontilhada com um cursor help para indicar que passar o mouse revela mais informações:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
abbr {
text-decoration: none;
border-bottom: 1px dotted #000;
cursor: help;
}
</style>
</head>
<body>
<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for documents designed to be displayed in a web browser.</p>
</body>
</html>Quando usar <abbr> e boas práticas
Use <abbr> sempre que uma forma abreviada puder não ser compreendida por todos os leitores, especialmente na primeira vez que aparecer no seu conteúdo.
- Sempre forneça um
titlecom a expansão completa. Um<abbr>semtitleagrega pouco valor. - Escreva o termo por extenso na primeira ocorrência no texto visível (WCAG 3.1.4) e use a abreviação a partir daí. Não faça da dica de ferramenta do
titlea única fonte do significado. - Mantenha o
titleapenas com a expansão — escrevaWorld Wide Web Consortium, não uma frase completa de explicação. - Não exagere na marcação. Não é necessário envolver cada ocorrência de uma abreviação bem conhecida em uma página; marcar a primeira ocorrência geralmente é suficiente.
- Use-o para siglas também. O HTML moderno não possui um elemento separado para siglas —
<abbr>abrange tanto abreviações quanto siglas.
Suporte a navegadores
O elemento <abbr> é suportado por todos os navegadores modernos. Observe que a aparência padrão varia: alguns navegadores renderizam um sublinhado pontilhado, outros não exibem nada visível. Se uma indicação visual consistente for importante para você, aplique seu próprio CSS conforme mostrado acima, em vez de depender do padrão do navegador.
Elementos relacionados
<acronym>— o elemento obsoleto para siglas; use<abbr>em seu lugar.<dfn>— marca a instância de definição de um termo.<cite>— referencia o título de uma obra criativa.