Etiqueta HTML <acronym>
La etiqueta <acronym> indica al navegador que sus caracteres son un acrónimo o abreviatura. Aprende con sintaxis y ejemplos.
La etiqueta <acronym> se utilizaba para definir un acrónimo o abreviatura. Para proporcionar la frase completa, se usa el atributo global title, que se muestra como información emergente al pasar el cursor sobre el texto.
Esta página explica qué hacía <acronym>, por qué fue eliminada de HTML5 y cómo usar el elemento moderno <abbr> en su lugar, incluyendo los detalles de accesibilidad que debes tener en cuenta.
La etiqueta <acronym> es una etiqueta HTML obsoleta y no es compatible con HTML5. Usa la etiqueta <abbr> en su lugar.
Por qué se eliminó <acronym> de HTML5
HTML tenía dos elementos para palabras abreviadas: <acronym> para acrónimos (una abreviación que se pronuncia como una sola palabra, como NASA o SCUBA) y <abbr> para abreviaturas (cualquier forma abreviada, como Dr. o HTML). En la práctica, esta distinción generaba más confusión de la que resolvía — los autores no se ponían de acuerdo sobre si algo era un "acrónimo" o una "abreviatura," y los lectores de pantalla no tenían ninguna forma útil de actuar sobre esa diferencia.
HTML5 simplificó esto manteniendo solo <abbr>, que marca tanto abreviaturas como acrónimos. Como todo acrónimo es también una abreviatura, el elemento dedicado <acronym> se volvió redundante y fue eliminado de la especificación.
Sintaxis
La etiqueta <acronym> viene en pares. El contenido se escribe entre las etiquetas de apertura (<acronym>) y cierre (</acronym>).
Ejemplo de la etiqueta HTML <acronym>:
Etiqueta HTML acronym
<!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>En el siguiente ejemplo, se usa la etiqueta <abbr> en lugar de <acronym>. El navegador renderiza los caracteres dentro de la etiqueta <abbr> como una abreviatura o un acrónimo. El atributo title siempre debe contener la forma expandida completa del término — este es el texto que la tecnología de asistencia puede anunciar y que los navegadores muestran como información emergente.
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 special form of designating an individual resource address on the Internet </p>
</body>
</html>Abreviatura vs. acrónimo
Los dos términos se solapan, que es exactamente la razón por la que HTML5 los unificó:
- Una abreviatura es cualquier forma acortada de una palabra o frase, como Dr. para "Doctor" o etc. para "et cetera."
- Un acrónimo es un tipo específico de abreviatura formado por las primeras letras de una frase y pronunciado como una sola palabra, como NASA o RADAR.
El elemento <abbr> maneja ambos casos. Se envuelve la forma abreviada en <abbr> y se coloca la expansión completa en el atributo title — el navegador no necesita saber si técnicamente es un acrónimo:
<p>
<abbr title="HyperText Markup Language">HTML</abbr> is written with
<abbr title="Cascading Style Sheets">CSS</abbr>.
</p>Compatibilidad con navegadores y comportamiento actual de <acronym>
Aunque <acronym> es obsoleta, todos los navegadores principales aún la reconocen y la renderizan como alternativa, por lo que las páginas antiguas no se rompen. Internamente, los navegadores convierten <acronym> en la misma interfaz DOM que <abbr> (HTMLElement), lo que significa que los scripts y los estilos tratan a ambas de forma consistente. A pesar de esto, nunca debes usar <acronym> en código nuevo — los validadores la marcan como error, y las herramientas futuras no tienen obligación de admitirla.
Estilos predeterminados
Los navegadores modernos no aplican ningún estilo predeterminado a las etiquetas <acronym> o <abbr>. Cualquier apariencia visual (como subrayados o versalitas) debe definirse explícitamente con CSS.
Históricamente, algunos navegadores renderizaban <abbr> y <acronym> con un subrayado punteado para indicar que había información emergente disponible. Si quieres recuperar ese aspecto familiar, agrégalo tú mismo:
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}Accesibilidad
El atributo title es más que una información emergente — es el nombre accesible de la abreviatura. Cuando un lector de pantalla encuentra <abbr title="World Health Organization">WHO</abbr>, puede anunciar la expansión completa en lugar de deletrear o pronunciar incorrectamente las letras. Proporciona siempre el término completo en title para que el marcado sea significativo para las personas que no pueden ver la información emergente.
Los tooltips de title no son accesibles para todos. Solo aparecen al pasar el cursor con el ratón, por lo que los usuarios que solo usan teclado o pantallas táctiles nunca los ven. Trata el tooltip como una mejora progresiva: si la expansión es esencial, escríbela también en el texto circundante la primera vez que aparezca el término, por ejemplo "la Organización Mundial de la Salud (<abbr title="World Health Organization">WHO</abbr>)."
Atributos
La etiqueta <acronym> admite los Atributos Globales y los Atributos de Evento.
Cómo aplicar estilos a la etiqueta HTML <acronym>
Como los navegadores no aplican estilos predeterminados, puedes usar CSS para garantizar una apariencia consistente. Ten en cuenta que dar estilo a la etiqueta <acronym> es obsoleto, ya que la propia etiqueta está en desuso. El siguiente ejemplo aplica estilos a la etiqueta <abbr> (el reemplazo moderno) con un subrayado punteado y versalitas:
abbr {
text-decoration: underline dotted;
font-variant: small-caps;
}