Damián De Luca - Capacitación & Desarrollo Web

Abreviaturas con la etiqueta abbr en HTML5

HTML5

El uso de abreviaturas es bastante común a la hora de escribir en la Web. El nombre de una institución, las siglas de una entidad o la manera en que se conoce un ente gubernamental son algunas de las muchas opciones para las que se pueden utilizar.

En HTML tenemos una etiqueta indicada para este fin: <abbr>. Si bien su importancia semántica ya estaba indicada en el estándar, todo se refuerza con HTML5 y su uso muy recomendado a la hora de utilizar abreviaturas, incluyendo siempre el atributo title para especificar a qué se refiere.

Abreviaturas HTML5 en un ejemplo de código

Después de la introducción nada mejor que un ejemplo de código. Veamos a continuación esta característica en un sencillo código HTML:

<p>La primera especificación de <abbr title="HyperText Markup Language">HTML</abbr> fue publicada por Tim Berners-Lee en la década del noventa.</p>

El resultado es el que vemos a continuación:

La primera especificación de HTML fue publicada por Tim Berners-Lee en la década del noventa.

En este ejemplo, cuando pasamos con el mouse por encima de la palabra HTML podremos ver, en la mayoría de los navegadores, que nos muestran la descripción de la abreviatura. Esa es solo una de las ventajas de utilizar este elemento. En realidad es una opción muy importante para brindar mayor información a los agentes informáticos, como el caso del navegador y también de los robots de los buscadores.

Consideraciones finales

Vale decir que si necesitamos «definir» algo que utilizaremos varias veces en la misma página, podemos usar  la etiqueta <dfn>, que nos permitirá agregarle una id para que luego desde cualquier lugar de la página podamos saltar hasta esta definición, son un simple link. Cabe señalar que <dfn> y <abbr> pueden trabajar juntas.

Si te interesa aprender más sobre HTML5 dejame un comentario o escribeme un mensaje.

Salir de la versión móvil