La etiqueta <abbr> viene de abbreviation que significa abreviación y sirve para mostrar el significado de las abreviaciones que usemos en nuestros posts. Ejemplo:
[...] escuchando a SOAD.
Como ven, la palabra SOAD está subrayada con puntos y al pasarle el ratón por encima muestra un ‘Tooltip’ con su significado.
Para lograr eso, yo usé este código:
<abbr title=”System of a Down”>SOAD</abbr>
Bastante simple ¿no?
Aunque esta etiqueta está hecha para abreviaciones y siglas, podemos aprovecharla para otras palabras que sepamos que algunos no van a entender.
- Me duelen las canillas.
- Que chido.
- Traigo una hueva que hasta parecen dos.
- La dí una patada en el huesito sabroso.
La apariencia estándar es el subrayado punteado del mismo color que la letra y yo les recomiendo que lo dejen así para que no se confunda con un enlace, pero si quieren modificar su apariencia pueden agregar estas líneas de CSS:
abbr {
text-decoration: none;
border-bottom: 1px dotted #ff8800;
}
Ahora el subrayado sería color naranja (jeje). Échenle imaginación e imprímanle su propio estilo.
