Esto puede parecer una pregunta básica y tonta, sin apenas importancia. Pero en realidad tiene más fondo del que pueda parecer...
Tradicionalmente en HTML, si queríamos poner un texto resaltado y que se viese en negrita, la forma de hacerlo era simplemente usando la etiqueta <b>. La cosa era muy sencilla.
Sin embargo, en HTML5 tenemos muchas más opciones que parecen equivalentes. Podemos utilizar también la etiqueta <strong>, la etiqueta <em> o la propiedad CSS font-weight aplicada a una etiqueta que envuelva el texto que queremos en negrita.
Realmente ¿no es todo lo mismo? ¿Existe una forma más correcta de hacerlo que otras?
Pues lo cierto es que no es todo igual. Cada una tiene sus aplicaciones y sus implicaciones, por lo que no es correcto usarlas indistintamente.
HTML5 es un lenguaje semántico
HTML5 supuso un cambio en la manera de considerar el lenguaje de las páginas Web. Si lo utilizas, tienes que dejar lo más clara posible la separación entre el contenido y la manera de visualizarlo (tarea que le corresponde a CSS). Por lo tanto, si estás usando HTML5 válido, cualquier etiqueta que introduzcas en tu HTML debe aportar un valor semántico, de significado, al contenido. No vale cualquier cosa, por mucho que funcione.
Cualquier etiqueta, si no aporta significado o si no es una etiqueta neutra (como <div> o <span>), entonces en HTML5 sobra y se considera incorrecta.
Y esto es importante no solo por ser formales y seguir el estándar. Importa también porque influye en cómo interpretan nuestras páginas los buscadores (y por lo tanto en el posicionamiento), o los dispositivos lectores de pantalla, por ejemplo.
Por eso, las etiquetas no deberíamos aplicarlas a la ligera, pensando solamente en que hemos conseguido nuestro objetivo (en este caso, resaltar en negrita un texto). Cosa que además en un futuro podría volverse contra ti.
¿Cuál es la manera correcta de poner negritas en HTML5?
La etiqueta <strong> realmente no está diseñada para dar negrita, aunque el resultado sea en realidad ese. Esta etiqueta es semántica, y por lo tanto sirve para dar contexto al contenido de la página. En este caso la etiqueta <strong> sirve para indicar que lo que va dentro de ella reviste importancia o urgencia. Eso se traduce en que la mayoría de los navegadores la muestran en negrita, pero eso es un efecto colateral, no su objetivo. Por lo tanto debes saber que si la utilizas además estás otorgándole un significado especial de cara a los buscadores y otros posibles programas que analicen tu código.
También tenemos la opción de utilizar la etiqueta <b> para conseguir el mismo efecto. Pero de nuevo se trata de un elemento semántico, que en este caso indica al navegador que ese contenido requiere atención. Esta etiqueta lleva existiendo desde el principio de los tiempos. En versiones antiguas de HTML, en las que la separación entre contenido y aspecto no era tan clara como en HTML5, de verdad se usaba para poner textos en negrita. En HTML5 sigue existiendo y se comporta del mismo modo aparentemente, pero en la actualidad su significado semántico es el de "Llamar la atención sobre el contenido" o, tal y como la define el estándar: "Bring attention tag" (de ahí lo de la "b"). El resultado es el mismo que con <strong> y también sale en negrita por defecto en todos los navegadores, pero tiene un significado (una orientación semántica) diferente, y si la ponemos debemos ser conscientes de ello.
La etiqueta <em>, denota que queremos poner énfasis en un texto. Los navegadores generalmente la visualizan en cursiva (no en negrita). Al igual que las anteriores no debemos usarlas solo por querer conseguir una letra en cursiva. Para eso están las propiedades CSS. Se debe usar con intención semántica. El orden de énfasis o importancia que le podemos dar semánticamente al texto, de mayor a menor, sería: <strong>, <b> y <em>.
Si por el contrario envuelves el contenido que quieres que vaya en negrita con un <span> y le asignas el estilo para que se vea en negrita (font-weight:bold;), estarás consiguiendo que se vea de este modo sin dotarlo de significado.
Entonces: ¿cuál debo usar?
Tenemos tres opciones aparentemente para conseguir texto en negrita en HTML5. Pero no son equivalentes. Las "recetas" para usar uno u otro serían las siguientes:
- Si solo quieres que aparezca en negrita, sin dotar de significado de importancia especial al texto, deberías envolverlo en algún elemento neutro (como
<span>) y aplicarle la propiedad font-weight.
- Si además realmente la frase o contenido en cuestión tiene especial importancia en un contenido, el uso de
<strong> le da un enfoque semántico e indicará a los buscadores este hecho.
- La etiqueta
<b> se usa muy poco en la actualidad. Ocupa menos que la anterior y está reconocida por el estándar y por los navegadores, pero es un vestigio del pasado y realmente no la necesitas. Sería mejor usar la anterior si quieres darle el significado de importante. Salvo que requieras denotar varios niveles de importancia, como hemos visto más arriba.
Si usamos alguna de estas dos últimas y queremos asegurarnos al 100% de que se verá siempre en negrita, yo recomendaría redefinir el aspecto de ambas etiquetas en CSS así:
strong, b {
font-weight: bold;
}
De esta manera nos aseguramos de que siempre se verán en negrita, que es nuestra intención. Ten en cuenta que, aunque los navegadores por defecto utilizan el estilo negrita para ambas, nada les obliga a hacerlo, y podría cambiar en alguna versión de algún navegador en el futuro (es poco probable, pero puede ocurrir, ya que nadie indica cómo debe ser el aspecto por defecto de las etiquetas). De este modo además podemos elegir el nivel de negrita que queremos aplicar (por ejemplo bolder en lugar de bold o un % diferente), y nos garantizamos una visualización homogénea en todos los navegadores, entre los que este parámetro podría variar.
¿A que nunca creíste que algo tan simple pudiera encerrar por debajo tantos pequeños detalles?
¡Espero que te resulte útil!
Fecha de publicación: