Etiqueta HTML <abbr>
La etiqueta HTML <abbr> define una abreviatura o acrónimo, como "HTML", "Sr.", "Dic.", "ASAP". Aprende con el tutorial HTML de W3Docs.
La etiqueta HTML <abbr> marca una abreviatura o acrónimo — una forma reducida de una palabra o frase, como HTML, CSS, Sr., Dic., ASAP o ATM. Al envolver la forma corta en <abbr> y proporcionar su expansión completa mediante el atributo title, conviertes una cadena de letras sin significado aparente en contenido autodescriptivo y legible por máquinas.
Esta página explica para qué sirve <abbr>, por qué es importante para la accesibilidad y el SEO, cómo se comporta el atributo title (y dónde se queda corto), y las mejores prácticas para usarlo correctamente.
Por qué importa <abbr>
Visualmente, <abbr> hace muy poco — en el mejor de los casos, algunos navegadores añaden un subrayado punteado tenue. Su valor real es semántico: le indica al software, no solo a los lectores videntes, que un fragmento de texto es una abreviatura y qué significa.
- Lectores de pantalla. La tecnología de asistencia puede anunciar la expansión del atributo
title, o leer la abreviatura de una forma adaptada a la configuración del usuario. Esto ayuda a las personas que no pueden ver un tooltip al pasar el cursor a entender acrónimos comoWCAGoARIA. - Motores de búsqueda y otras herramientas. Marcar las abreviaturas proporciona a los rastreadores, herramientas de traducción e indexadores contexto adicional sobre el significado real de los términos abreviados.
- Lectores no nativos o nuevos. Un lector que no reconoce
ASAPo un acrónimo específico de un dominio obtiene el significado completo en lugar de tener que adivinarlo.
En resumen, un simple HTML son solo cuatro letras; <abbr title="HyperText Markup Language">HTML</abbr> son cuatro letras más su significado, disponible tanto para humanos como para máquinas.
Sintaxis
La etiqueta <abbr> va en pares. El contenido se escribe entre las etiquetas de apertura (<abbr>) y cierre (</abbr>).
Ejemplo de la etiqueta HTML <abbr>:
Etiqueta 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>El atributo title
La etiqueta <abbr> no tiene atributos obligatorios, pero el atributo title es lo que la hace útil. Escribe la forma completa y expandida de la abreviatura en title:
<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for web pages.</p>En los navegadores de escritorio, al pasar el cursor sobre la abreviatura se muestra la expansión como tooltip. Los lectores de pantalla también pueden exponer el valor de title a los usuarios.
Limitaciones de title
El tooltip de title es conveniente, pero no debes depender de él como único medio para que los usuarios descubran la expansión:
- Solo aparece al pasar el cursor. Los usuarios de pantallas táctiles (teléfonos, tabletas) y los usuarios que solo utilizan el teclado generalmente no pueden activarlo.
- Su visualización es inconsistente entre lectores de pantalla y no está garantizado que sea anunciado.
Por esta razón, las Pautas de Accesibilidad para el Contenido Web (criterio de éxito de WCAG 3.1.4 Abreviaciones) recomiendan que también deletrees la abreviatura en el texto circundante la primera vez que aparezca y uses la forma corta después:
<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>De esta forma, el significado está disponible para todos — no solo para los usuarios que pueden pasar el cursor.
Atributos
La etiqueta <abbr> admite los Atributos Globales y los Atributos de Evento. El más importante de ellos es el atributo global title, descrito anteriormente.
Cómo dar estilo a una etiqueta HTML <abbr>
De forma predeterminada, algunos navegadores muestran un subrayado punteado bajo el contenido de <abbr>, pero el estilo no es consistente — por ejemplo, versiones antiguas de algunos navegadores no mostraban ningún subrayado. Para obtener un aspecto fiable y predecible, aplica tu propio estilo con CSS. Un patrón habitual es un borde inferior punteado más un cursor help para indicar que al pasar el cursor se revela más información:
<!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>Cuándo usar <abbr> y mejores prácticas
Usa <abbr> siempre que una forma abreviada pueda no ser comprendida por todos los lectores, especialmente la primera vez que aparece en tu contenido.
- Proporciona siempre un
titlecon la expansión completa. Un<abbr>sintitleañade poco valor. - Deletrea el término en su primer uso en el texto visible (WCAG 3.1.4) y usa la abreviatura después. No hagas del tooltip de
titlela única fuente de significado. - Limita el
titlesolo a la expansión — escribeWorld Wide Web Consortium, no una oración completa de explicación. - No abuses del marcado. No es necesario envolver cada instancia de una abreviatura bien conocida en una página; marcar la primera aparición suele ser suficiente.
- Úsalo también para acrónimos. El HTML moderno no tiene un elemento de acrónimo separado —
<abbr>cubre tanto abreviaturas como acrónimos.
Compatibilidad con navegadores
El elemento <abbr> es compatible con todos los navegadores modernos. Ten en cuenta que la apariencia predeterminada varía: algunos navegadores muestran un subrayado punteado, otros no muestran ninguna indicación visual. Si te importa una señal visual consistente, aplica tu propio CSS como se muestra arriba en lugar de depender del valor predeterminado del navegador.
Elementos relacionados
<acronym>— el elemento obsoleto para acrónimos; usa<abbr>en su lugar.<dfn>— marca la instancia definitoria de un término.<cite>— referencia el título de una obra creativa.