Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

HTML5: ¿Cuál es la forma correcta de poner negritas? ¿strong, b o "font-weight"?

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!

José M. Alarcón Aguín Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José M. Alarcón Aguín
Archivado en: Desarrollo Web

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Comentarios (8) -

Buf, siento decir que este artículo es bastante erroneo... Para empezar, en los inicios del html, se utilizaba la <b> para negritas y la <i> para cursivas... pero <b> no viene de "bring attention tag" ni mucho menos... viene simple y llanamente de "bold", de igual manera que la <i> viene de "italic". Por otra parte, estas dos etiquetas no conllevan ninguna carga semántica.
Cuando se introdujo en su momento html5 y se apostó por la web semántica, se 'deprecaron' las etiquetas <b> e <i> justamente por no tener significado semántico, y se apostó en su lugar por <strong> y <em>, que sí lo tenían.
Ha sido más tarde, cuando han visto que por temas de diseño, a veces se quieren remarcar textos en negrita y/o en cursiva únicamente por un tema estético, cuando han vuelto a recuperar la <b> y la <i>...
Así pues, si quieres utilizar una negrita o una cursiva porque quieres dar importancia o enfatizar un contenido, has de utilizar <strong> y/o <em>... Por el contrario, si es un contenido que no aporta nada significativo, pero lo quieres destacar por un tema de diseño, has de utilizar la <b> y/o la <i>

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola Carlos:

Gracias por comentar.

No sé por qué dices que es erróneo ni veo que contradigas nada de lo que digo en el artículo.

Lo de "Bring attention" es AHORA, en el estándar HTML5, no antes, que obviamente el significado era "Bold". Ahora mismo, en el estándar actual significa eso y tiene un aspecto semántico también como explico en el articulo. Puedes comprobarlo viendo el estándar (html.spec.whatwg.org/.../text-level-semantics.html) o la MDN (developer.mozilla.org/.../b).

El estándar no está de acuerdo contigo en lo de usar <b> e <i> sin carga semántica. Si ves el enlace anterior, y tal y como digo en el artículo, la semántica de <b>  es precisamente la que explico: llamar la atención sobre algo. En el caso de <i> su semántica es, y cito (html.spec.whatwg.org/.../text-level-semantics.html):

"The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts."

O sea, que sí es una etiqueta semántica que casualmente se ve en cursiva, pero no es para poner nada en cursiva.

Finalmente lo que dices de:

"si quieres utilizar una negrita o una cursiva porque quieres dar importancia o enfatizar un contenido, has de utilizar <strong> y/o <em>... Por el contrario, si es un contenido que no aporta nada significativo, pero lo quieres destacar por un tema de diseño, has de utilizar la <b> y/o la <i>"

no es correcto ya que "por temas de diseño" no deberías poner etiqueta alguna jamás en HTML5. El diseño en HTML5 se da siempre obligatoriamente con estilos CSS, pero no con etiquetas. Otra cosa es que los estilos por defecto del navegador las muestren de determinada manera, pero no deberías usarlas por eso, sino por dar un determinado significado al contenido. ¡De eso precisamente va todo el artículo!

Como digo, gracias por comentar, pero en este caso el estándar y yo creemos que estás equivocado.

Saludos!

Responder

Gracias por vuestra respuesta... rápida además!!
Vale... admito que la parte aragonesa de mis genes me puede estar jugando una mala pasada, pero según tu primer link sobre el uso de la <b> (html.spec.whatwg.org/.../text-level-semantics.html), la definición dice literalmente "The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.", vamos, que traducido al español es algo así como "texto al que se presta atención con fines utilitarios sin transmitir ninguna importancia adicional".
De hecho, como bien apuntas, se aconseja utilizar los CSS para dar estilos gráficos, por eso, en la W3C (https://www.w3.org/2009/cheatsheet/#search,b) se aconseja el uso de la <b> como último recurso.
Tampoco quiero cargar este hilo con una discusión si no es enriquecedora, y no soy muy de hablar en público... pero podemos seguir en privado... tienes mi email  ;o)

Responder

Héctor Santos
Héctor Santos

Madre mia Jose Manuel. Carlos tiene razón. Iba a comentar yo lo mismo, pero veo que Carlos ya te ha contestado dos veces y ambas con toda la razón del mundo.

Responder

Alessandro Ventura
Alessandro Ventura

Hola,

pero por ejemplo, al comienzo del articulo, la frase ¿Existe una forma más correcta de hacerlo que otras?, en el código he visto que utilizaste <strong>, cuando después de lo leído, yo habría utilizado un <span> con font-weight, dado que no me parece algo interesante para los buscadores...Estoy confundido, pero entiendo que no es una regla fija a seguir..

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola:

Do as I say, not as I do! ;-)

En este caso no me estaba preocupando por buscadores ni por nada: simplemente he usado el botón de "Bold" que me da el editor del blog pra destacar ciertas frases y ayudar con la lectura rápida. El botón usa <strong>, a lo loco, sin preguntar nada.

No hay que obsesionarse tampoco con esto. El artículo es una explicación de lo que, formalmente, debería hacerse con cada etiqueta o en cada caso si quieres ser estricto. La realidad es que luego va tu editor de contenido y pone lo que le parece, lo cual no es óbice para que hubiera sido más cuidadoso justo en este artículo y hubiese editado el código fuente directamente para que fuera como tú dices.

Saludos.

Responder

pedro salinas
pedro salinas

claro como el agu. Muchas gracias

Responder

Estoy viendo esto en 2021... Aún así, me da bronca cómo Carlos no reconoce su error. Y para colmo Héctor después dice que Carlos tiene razón. Evidentemente, o es un amigo de Carlos, o es el propio Carlos, o es su necedad la que habla o sus pocas ganas de leer el standard definido por la W3C y que también pueden leer en MDN.
Doy clases de HTML (entre otros lenguajes) y el artículo está 99% bien (yo agregaría alguna cosita y no estoy de acuerdo con eso de que se pueda comparar la importancia de strong, b y em, porque de estas etiquetas solo strong transmite "importancia").
Si quieren ver buenos usos de la etiqueta b, vean como en cualquier artículo de la Wikipedia cada vez que se nombra la temática del artículo a lo largo del texto, la misma suele aparecer en negrita, pero no porque sea importante (mencionar "perro" no es importante, no?), sino porque se destaca, llama la atención en el texto ("bring attention to") y nada más. Se destaca. Punto. No es importante.
Los comentarios como los de Carlos y Héctor, que hablan por habar, sin leer, sin ganas de aprender o reconocer errores, son los que terminan generando artículos como este, que es el producto de que la gente se confunde, por comentarios errados como los suyos.

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.