¿Alguna vez has utilizado la etiqueta abbr en HTML? Yo tampoco.
!Pero eso no significa que no sea útil!
Así que en esta lección de la serie del diccionario HTML de DropCoding, veremos qué es esta etiqueta abbr, para qué sirve y veremos un ejemplo de su uso.
Recuerda que tienes los comentarios de abajo para dejarme cualquier pregunta o sugerencia.
Y como siempre, también dejo por aquí abajo el video de la lección por si quieres echarle un vistazo.
¡Vamos con la lección!
¿Qué es la etiqueta abbr en HTML?
La etiqueta abbr sirve para definir una abreviación o un acrónimo.
Y ya está, poco más que añadir hasta aquí.
¡Es broma!
Veámoslo.
La etiqueta abbr en HTML es una herramienta que nos permite definir abreviaturas o acrónimos en nuestro contenido web.
Cuando usamos la etiqueta abbr, podemos agregar un atributo title que proporciona la versión completa o una explicación de la abreviatura o acrónimo.
Esto es especialmente útil para los visitantes del sitio web que pueden no estar familiarizados con el término abreviado.
Ejemplo de etiqueta ABBR
La ventaja principal de utilizar esta etiqueta es que permite especificar una descripción completa o explicación de la abreviatura.
La descripción completa o la explicación se especifica a través del atributo title que mostrará la explicación completa cuando el usuario coloque el cursor sobre la abreviatura.
Por ejemplo, aquí tenemos una etiqueta abbr señalando la palabra «DropCoding» y en el atributo title tenemos «Canal donde aprendemos diseño web». Es decir, cuando pasemos el ratón por encima de la palabra «DropCoding», aparecerá el texto que hayamos colocado en el atributo title.
<abbr title="Canal donde aprendemos diseño web">DropCoding</abbr>
En este caso, no se trata de ninguna abreviación ni de ningún acrónimo, pero no se me ha ocurrido nada más.
Además, con este ejemplo vemos que podemos poner lo que nosotros queramos, no hace falta que sea una abreviatura.
¿Para qué sirve la etiqueta abbr?
Entonces, ¿para qué sirve la etiqueta abbr realmente? Esta etiqueta es especialmente útil para que tu página web sea más accesible. De esta manera, los lectores de pantalla puedan usar la información del atributo title para ayudar a los usuarios con discapacidades visuales a entender el significado de algunas palabras concretas.
Incluso hay algunos gurús del SEO que afirman que este tipo de etiquetas pueden ayudar al posicionamiento web de tu sitio.
Así que ya sabes.
Atributos de la etiqueta abbr
La etiqueta abbr sólo puede tener atributos globales, que son los atributos genéricos que se pueden emplear en todas las etiquetas HTML, o casi todas.
A continuación, una pequeña lista de los atributos que puedes usar con esta etiqueta <abbr>:
| Atributo | Descripción |
|---|---|
title | Proporciona la versión completa o una explicación de la abreviatura o acrónimo. |
class | Especifica una o más clases para el elemento. |
id | Especifica un id único para el elemento. |
style | Especifica un estilo en línea para el elemento. |
dir | Especifica la dirección del texto para el contenido del elemento. |
lang | Especifica el idioma del contenido del elemento. |
tabindex | Especifica el orden de tabulación del elemento. |
accesskey | Especifica una tecla de acceso directo para activar/focar el elemento. |
hidden | Especifica si el elemento debe estar oculto. |
Aquí hay que destacar que, evidentemente, hay que colocar el atributo title para que esta etiqueta tenga sentido. Es lógico, ¿no?
Como ves, no tiene más complicación. Es una etiqueta muy fácil de utilizar y que nos puede ayudar con la accesibilidad y el posicionamiento de nuestro sitio web.
Espero que te haya gustado. Si tienes alguna pregunta o alguna sugerencia, puedes dejarla en los comentarios y nos vemos en la siguiente lección. ¡Adiós!