significado - pre html
Usando la etiqueta HTML<abbr> para explicar el contenido (4)
Bootstrap 4 aplicará un estilo al elemento HTML <abbr> con un borde inferior punteado y un cursor de ayuda:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<p>You can use <abbr title="Cascading Style Sheets" class="text-info font-italic initialism">CSS</abbr> to style your <abbr title="HyperText Markup Language" class="text-info font-italic initialism">HTML</abbr>.</p>
¿Es una mala forma usar la etiqueta <abbr> para explicar palabras que no son realmente abreviaturas, sino para producir una explicación del contenido "pasar el cursor sobre"?
Si lo es, ¿por qué es de mala forma y cuál es una buena alternativa a HTML?
El elemento HTML define una abreviatura o un acrónimo.
Las abreviaturas de marcado pueden proporcionar información útil a los navegadores, sistemas de traducción y motores de búsqueda.
me gusta
<p> <abbr title="Unknown Flying Object"> UFO </abbr>
En realidad, no es necesario usar la etiqueta <abbr> para usar el atributo title= . Puede aplicarlo a muchas cosas, incluidas las etiquetas <span> .
Ejemplo de uso:
<span title="This is my explanation here.">Confusing text</span>
Desde w3schools.com: al marcar las abreviaturas, puede proporcionar información útil a los navegadores, correctores ortográficos, sistemas de traducción e indizadores de motores de búsqueda.
En otras palabras, proporcionará información engañosa a los motores de búsqueda cuando no haya razón para hacerlo, utilizando incorrectamente la etiqueta <abbr> .
Si desea que los motores de búsqueda comprendan mejor su contenido, debe usar la etiqueta para explicar el texto confuso dentro de su página web.
No es malo usarlo solo para propósitos de diseño, pero si un navegador no tiene soporte para él, sus usuarios sufrirán. Para uso general, un simple <span title="Explanation">Abbr</span> funciona mejor; por supuesto, deberá agregar algunos estilos con una hermosa regla CSS;)