Abreviaturas con la etiqueta abbr en 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. ¿Un ejemplo? Veamos el que sigue a continuación:

<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.

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.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.