HTML <acronym> Tag
A tag <acronym> indica ao navegador que os caracteres são um acrônimo ou abreviação. Aprenda com sintaxe e exemplos.
A tag <acronym> era usada para definir um acrônimo ou abreviação. Para fornecer a expressão completa, utiliza-se o atributo global title, que é exibido como uma dica de ferramenta quando você passa o cursor sobre o texto.
Esta página explica o que a <acronym> fazia, por que foi removida do HTML5 e como usar o elemento moderno <abbr> no lugar dela — incluindo os detalhes de acessibilidade que você precisa acertar.
A tag <acronym> é uma tag HTML descontinuada e não é suportada no HTML5. Use a tag <abbr> em seu lugar.
Por que a <acronym> foi removida do HTML5
O HTML já teve dois elementos para palavras abreviadas: <acronym> para acrônimos (uma abreviação pronunciada como uma única palavra, como NASA ou SCUBA) e <abbr> para abreviações (qualquer forma reduzida, como Dr. ou HTML). Na prática, essa distinção causava mais confusão do que resolvia — os autores discordavam se algo era um "acrônimo" ou uma "abreviação", e os leitores de tela não tinham uma maneira útil de agir com base nessa diferença.
O HTML5 simplificou isso mantendo apenas <abbr>, que marca tanto abreviações quanto acrônimos. Como todo acrônimo também é uma abreviação, o elemento dedicado <acronym> tornou-se redundante e foi removido da especificação.
Sintaxe
A tag <acronym> vem em pares. O conteúdo é escrito entre as tags de abertura (<acronym>) e fechamento (</acronym>).
Exemplo da tag HTML <acronym>:
HTML acronym Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Hover the mouse cursor over acronym HTML</p>
<acronym title="Hyper Text Markup Language">HTML</acronym>
</body>
</html>No exemplo a seguir, a tag <abbr> é usada no lugar de <acronym>. O navegador renderiza os caracteres dentro da tag <abbr> como uma abreviação ou acrônimo. O atributo title deve sempre conter a forma expandida completa do termo — este é o texto que as tecnologias assistivas podem anunciar e que os navegadores exibem como dica de ferramenta.
Exemplo da tag HTML <abbr>:
HTML abbr tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><abbr title="Universal Resource Locator">URL</abbr> - This is a special form of designating an individual resource address on the Internet </p>
</body>
</html>Abreviação vs. acrônimo
Os dois termos se sobrepõem, o que é exatamente o motivo pelo qual o HTML5 os unificou:
- Uma abreviação é qualquer forma reduzida de uma palavra ou expressão, como Dr. para "Doutor" ou etc. para "et cetera."
- Um acrônimo é um tipo específico de abreviação formado pelas letras iniciais de uma expressão e pronunciado como uma única palavra, como NASA ou RADAR.
O elemento <abbr> trata ambos. Você envolve a forma curta em <abbr> e coloca a expansão completa no atributo title — o navegador não precisa saber se tecnicamente é um acrônimo:
<p>
<abbr title="HyperText Markup Language">HTML</abbr> is written with
<abbr title="Cascading Style Sheets">CSS</abbr>.
</p>Suporte dos navegadores e como a <acronym> se comporta hoje
Mesmo que a <acronym> seja obsoleta, todos os principais navegadores ainda a reconhecem e a renderizam como fallback, para que as páginas antigas não quebrem. Por baixo dos panos, os navegadores analisam a <acronym> na mesma interface DOM que a <abbr> (HTMLElement), o que significa que scripts e estilos tratam as duas de forma consistente. Apesar disso, você nunca deve usar <acronym> em código novo — os validadores a sinalizam e as ferramentas futuras não têm obrigação de suportá-la.
Estilo padrão
Os navegadores modernos não aplicam nenhum estilo padrão às tags <acronym> ou <abbr>. Qualquer aparência visual (como sublinhados ou versaletes) deve ser definida explicitamente com CSS.
Historicamente, alguns navegadores renderizavam <abbr> e <acronym> com um sublinhado pontilhado para indicar que uma dica de ferramenta estava disponível. Se você quiser essa aparência familiar de volta, adicione-a você mesmo:
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}Acessibilidade
O atributo title é mais do que uma dica de ferramenta — é o nome acessível da abreviação. Quando um leitor de tela encontra <abbr title="World Health Organization">WHO</abbr>, ele pode anunciar a expansão completa em vez de soletrar ou pronunciar incorretamente as letras. Sempre forneça o termo completo no title para que a marcação seja significativa para pessoas que não conseguem ver a dica de ferramenta.
As dicas de ferramenta do title não são acessíveis a todos. Elas aparecem apenas ao passar o cursor do mouse, portanto usuários que usam apenas teclado ou tela sensível ao toque nunca as veem. Trate a dica de ferramenta como um aprimoramento progressivo: se a expansão for essencial, também escreva-a no texto ao redor na primeira vez que o termo aparecer, por exemplo "a Organização Mundial da Saúde (<abbr title="World Health Organization">WHO</abbr>)."
Atributos
A tag <acronym> suporta os Atributos Globais e os Atributos de Evento.
Como estilizar a tag HTML <acronym>
Como os navegadores não aplicam estilo padrão, você pode usar CSS para garantir uma aparência consistente. Observe que estilizar a tag <acronym> é obsoleto, pois a própria tag está descontinuada. O exemplo a seguir estiliza a tag <abbr> (o substituto moderno) com um sublinhado pontilhado e versaletes:
abbr {
text-decoration: underline dotted;
font-variant: small-caps;
}