<abbr>

<abbr> marca una abreviatura o acrónimo: cualquier forma abreviada de un término que puede no ser evidente para todos los lectores. Su valor práctico vive en el atributo title, que provee la expansión completa y se la entrega a las tecnologías de asistencia y al navegador.

El problema que resuelve es de comprensión: no todos los lectores conocen todas las siglas. “ONU” puede ser obvio para un lector adulto de habla española pero no para alguien que aprendió español recientemente. “DOM” es claro para un desarrollador web pero opaco para un periodista que cubre tecnología. <abbr title="..."> le da a esos lectores acceso a la expansión sin interrumpir el flujo del texto para quien ya la conoce.

Sin title, el elemento es válido pero pierde casi toda su utilidad: solo añade el subrayado punteado que algunas hojas de estilo aplican, sin entregar información adicional. La regla práctica: si no podés escribir el title, no uses <abbr> — dejá el texto tal cual o expandí la abreviatura la primera vez entre paréntesis.

Cómo funciona

<abbr> es un elemento en línea. Fluye con el texto circundante. Muchos navegadores aplican un subrayado punteado al contenido de <abbr> para indicar que hay información adicional disponible; ese estilo se puede cambiar con CSS.

Cuando el usuario pasa el cursor sobre el <abbr>, el navegador muestra el contenido del title como tooltip. Los lectores de pantalla pueden leer la expansión directamente o hacer el acrónimo disponible como texto alternativo.

Modelo de contenido

Acepta contenido en línea (phrasing content). Va dentro de párrafos, headings, <li>, <td>, o cualquier elemento que acepte contenido en línea.

Sintaxis

<p>La <abbr title="Organización de las Naciones Unidas">ONU</abbr> fue fundada en 1945.</p>

<p>Usamos <abbr title="Cascading Style Sheets">CSS</abbr> para estilizar la página.</p>

<p>El <abbr title="Document Object Model">DOM</abbr> es la representación del HTML en memoria.</p>

Atributos

title

La expansión completa de la abreviatura. Es el único atributo específico de <abbr> y su razón de ser. Reglas:

• Escribila completa, sin abreviar: title="HyperText Markup Language", no title="Hyper Text ML".
• El title en <abbr> tiene semántica especial: el navegador sabe que es la expansión de la abreviatura, no un tooltip genérico.
• Sin title, el <abbr> es válido pero no aporta información accesible — solo marca visualmente que hay una abreviatura.

Accesibilidad

El comportamiento de los lectores de pantalla con <abbr> varía:

• NVDA + Firefox: puede leer el title como expansión.
• JAWS: en algunos modos, anuncia “abreviación: ONU, expandida: Organización de las Naciones Unidas”.
• VoiceOver (macOS/iOS): lee el contenido del elemento; el title puede estar disponible con gestos específicos.

Gotcha táctil: en dispositivos táctiles (móviles, tablets), no hay cursor y por lo tanto no hay hover. El tooltip del title nunca aparece en pantallas táctiles. Si la expansión es crítica para entender el contenido, considerad escribirla la primera vez entre paréntesis:

<p>La Organización de las Naciones Unidas (<abbr title="Organización de las Naciones Unidas">ONU</abbr>)…</p>

Cuándo usarlo

• Primera aparición de una abreviatura en el documento, especialmente si la audiencia puede no conocerla.
• Acrónimos técnicos o institucionales en contextos educativos o legales.
• No es necesario marcar cada aparición — con la primera alcanza y la referencia queda establecida.

Notas, gotchas e interacción

• Sin title no sirve. Un <abbr> sin title solo agrega el subrayado punteado — no aporta la información accesible que justifica usarlo.
• <abbr> no reemplaza la primera escritura completa. En textos largos, la buena práctica es escribir el término completo la primera vez, poner la abreviatura entre paréntesis, y luego usar el <abbr> para las menciones siguientes.
• El subrayado punteado se puede quitar con CSS. Si el diseño no admite subrayado, abbr { text-decoration: none; }. El contenido semántico se preserva aunque no haya estilo visual.
• No confundir con <acronym>. <acronym> existía en HTML 4 para distinguir acrónimos (que se pronuncian como palabra: “NASA”) de abreviaturas (que se deletrean: “ONU”). En HTML5 fue eliminado — usá <abbr> para ambos casos.

Vigente / legacy

<abbr> está vigente. <acronym> es obsoleto (eliminado en HTML5) — si encontrás código con él, reemplazalo por <abbr>.