Sobre este problema HTML
Nas versões anteriores do HTML, havia dois elementos separados para formas abreviadas de palavras e frases: <abbr> para abreviações (como “Dr.” ou “etc.”) e <acronym> para acrónimos (como “NASA” ou “HTML”). A especificação HTML5 eliminou esta distinção porque os acrónimos são simplesmente um tipo de abreviação. O elemento <abbr> agora cobre todos os casos.
Usar o elemento obsoleto <acronym> causa erros de validação W3C e tem várias desvantagens práticas:
- Conformidade com padrões: O elemento não faz parte da especificação HTML atual. Os validadores irão sinalizá-lo como um erro, e não há garantia de que os futuros navegadores o suportem.
-
Acessibilidade: As tecnologias assistivas são concebidas e testadas com base nos padrões atuais. Embora muitos leitores de ecrã ainda processem
<acronym>, depender de um elemento obsoleto arrisca comportamento inconsistente. O elemento<abbr>tem semânticas de acessibilidade bem definidas e padronizadas. -
Consistência: Usar
<abbr>para todas as abreviações e acrónimos simplifica a sua marcação e torna-a mais fácil de manter para os programadores.
A correção é simples: substitua cada etiqueta <acronym> por <abbr>. O atributo title funciona da mesma forma em ambos os elementos — fornece a forma expandida da abreviação ou acrónimo que os navegadores normalmente exibem como uma dica ao passar o rato por cima.
Exemplos
❌ Obsoleto: usando <acronym>
<p>A <acronym title="World Wide Web">WWW</acronym> foi inventada por Tim Berners-Lee.</p>
<p>Esta página está escrita em <acronym title="HyperText Markup Language">HTML</acronym>.</p>
✅ Corrigido: usando <abbr>
<p>A <abbr title="World Wide Web">WWW</abbr> foi inventada por Tim Berners-Lee.</p>
<p>Esta página está escrita em <abbr title="HyperText Markup Language">HTML</abbr>.</p>
Usando <abbr> para abreviações e acrónimos
Uma vez que <abbr> agora lida com todas as formas abreviadas, você pode usá-lo consistentemente ao longo da sua marcação:
<p>
Contacte o <abbr title="Doctor">Dr.</abbr> Smith na
<abbr title="National Aeronautics and Space Administration">NASA</abbr>
para mais informações sobre a <abbr title="International Space Station">ISS</abbr>.
</p>
Estilizar <abbr> com CSS
Alguns navegadores aplicam um sublinhado pontilhado por defeito aos elementos <abbr> com um atributo title. Você pode personalizar isso com CSS:
<style>
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
</style>
<p>Os ficheiros são transferidos usando <abbr title="File Transfer Protocol">FTP</abbr>.</p>
Se está a migrar uma base de código grande, uma simples pesquisa e substituição de <acronym por <abbr e </acronym> por </abbr> irá lidar com a conversão. Não são necessárias outras alterações de atributos ou conteúdo — os dois elementos aceitam os mesmos atributos e modelo de conteúdo.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.