Definiendo acrónimos y siglas con <abbr> en HTML5

Seguimos creando y codificando contenido en HTML5, seguiremos hasta hacernos unos auténticos profesionales del desarrollo web. En esta ocasión vamos a ver una etiqueta, que puede que nos parezca significante, pero tiene mucho significado en cuanto a la semántica de un sitio web. Así que vamos como definir acrónimos y siglas con <abbr>> en HTML5.

Uso y definición de <abbr>


Si tengo que definir el elemento <abbr>, diría que representa a un termino abreviado o acrónimo. La etiqueta <abbr>, soporta un atributo title, donde vamos a definir el nombre completo del acrónimo. De manera resumida y que entendamos todos los mortales, la etiqueta <abbr>, sirve para crear un mensaje cuando pasas el ratón por encima de la abreviatura o siglas. Este mensaje no es más, que el nombre completo de esa abreviatura y además ayuda a los motores de búsqueda a indexar mejor.

Usar esta etiqueta no es que sea obligatorio, pero es un método muy valido para mostrar una explicación de ese acrónimo. Y si ademas logramos tener una web con mejor semántica y a Google le gusta esto, pues mejor. Vamos a ver a continuación un ejemplo visual y veréis que fácil es definirla.


También que el texto abreviado sea un enlace, lo vemos en el siguente ejemplo:


De esta forma estamos creando un sitio mucho más accesible, los buscadores y navegadores sabrán a que nos referimos con W3C. De hecho acabo de utilizarla cuando me he referido al consorcio. Vamos a ver un ultimo ejemplo muy común, es colocar la abreviatura del tipo de empresa dentro del pie de página en un sitio web. Lo podemos ver en el siguiente ejemplo:

Conclusiones


Bueno ya sabemos como definir acrónimos y siglas con <abbr> en HTML5. No necesitamos saber nada más en cuanto a esta etiqueta, pero si debes utilizarla en tu sitio web. De esta manera estaremos siendo mucho más semánticos a la hora de escribir código HTML5. No creo que tengas dudas al respecto, pero si es así, puedes dejarme un comentario e intentare resolverte cualquier duda.

No olvides unirte a la comunidad de HTML5 y CSS3, danos un like en la página de Facebook y déjanos un comentario si te apetece. Quiero darte las gracias por tu visita este humilde blog y me gustaría que lo compartieras con tus amigos.

Prohibida la distribución de este articulo incluyendo las imágenes,
sin la autorización del autor. Todos los derechos reservados ©

Publicar un comentario

0 Comentarios