En este artículo, vamos a aprender a usar la etiqueta <b> y en qué se diferencia de la etiqueta  <strong>.

¿Qué es la etiqueta <b> en HTML?

The <b> tag is used to to make a portion of the text bold without carrying any special importance. Here is an example using the <b> tag.

La etiqueta <b> se utiliza para poner en negrita una parte del texto sin que tenga una importancia especial. Este es un ejemplo de uso de la <b> etiqueta.

<p>Esto es un ejemplo en <b>texto negrita.</b></p>
Texto con etiqueta bold 
HTML renderizado

De acuerdo con el estándar de vida de HTML, la etiqueta <strong> se puede utilizar con los siguientes ejemplos:

palabras clave en el resumen de un documento, nombres de productos en una reseña, palabras procesables en un software interactivo basado en texto o el encabezamiento de un artículo.

Este es un ejemplo de uso de <b> para el nombre de un producto en una reseña

<p>Los <b>audifonos Haylou</b> se adaptan bien a los oídos y tienen un sonido increíble.</p>
Texto en negrito
HTML renderizado

La <b> etiqueta está pensada para llamar la atención del usuario sobre un tramo de texto. No se supone que tenga ninguna importancia, ni que transmita un tono de urgencia o seriedad.

Esto sería un uso incorrecto de la etiqueta <b>.

<p><b>Peligro!!</b> Esta area seria peligrosa.</p>
Uso incorrecto

La etiqueta adecuada para esta situación sería la etiqueta <strong> porque transmite una sensación de seriedad.

Diferencias entre la etiqueta <b> y la etiqueta <strong> en HTML

Cuando empecé a aprender HTML, pensaba que la etiqueta <b> y el tag eran <strong> lo mismo. Parte de la confusión es que ambas tienen el mismo estilo de negrita por defecto en la mayoría de los navegadores.

Una diferencia clave es que las etiquetas <strong> deben utilizarse cuando el texto tiene una fuerte importancia o un sentido de urgencia o seriedad. Las etiquetas <b>, en cambio, deben utilizarse para llamar la atención sobre un tramo de texto sin mayor importancia.

Este ejemplo de etiqueta <strong> indica al usuario qué elemento de la lista debe leerse primero y que tiene más importancia que los otros dos elementos de la lista.

<p>Lista por hacer del lunes:</p>
<ul>
    <li><p><strong>Pagar la renta.</strong></p></li>
    <li><p>Pagar mis cuentas.</p></li>
    <li><p>Ir a la tienda.</p></li>
</ul>
HTML
HTML renderizado

Otra diferencia clave es que <b> las etiquetas no deben utilizarse en los títulos y subtítulos, mientras que las etiquetas <strong> sí.

Este es un ejemplo en el que se utiliza la etiqueta <strong> para dar importancia al título del capítulo.

<h1>Capítulo 5: <strong>La batalla</strong></h1>
HTML

Cómo usar el atributo Class con las etiquetas en HTML

Es habitual añadir un atributo de clase en la etiqueta <b> para añadir más significado semántico.

Si tienes una serie de frases, puedes añadir una clase como ésta <strong class="lead"> a la primera etiqueta <p>, eso la marcará como la frase principal.

<article>
    <h2>Un niño se reúne con su madre biológica</h2>
    <p><b class="lead">Un niño de seis años se encuentra inesperadamente con su madre biológica en el supermercado local.</b></p>
    <p>Un niño y su abuelo estaban comprando en el supermercado, cuando una joven se les acercó por detrás.</p>
    [...]
</article>
HTML

¿Se debe utilizar la etiqueta <b> para estilizar el texto en HTML?

En HTML 5, no es apropiado usar la etiqueta <b> para estilizar el texto. El método de estilo preferido es utilizar la propiedad CSS font-weight.

Ejemplo usando la palabra clave de negrita

 <p class="demo-para">Estoy usando CSS para la negrita</p>
HTML
.demo-para {
  font-weight: bold;
}
CSS con etiqueta negrita

Ejemplo de uso de valores numéricos

.demo-para {
  font-weight: 700;
}
Peso de la fuente
HTML renderizado

Conclusión

Si bien, las etiquetas <b> y los tags <strong> pueden parecer similares en el navegador, tienen significados diferentes. Es importante conocer la diferencia entre ambas para poder utilizarlas adecuadamente.

Las etiquetas <b> se usan para llamar la atención sobre un tramo de texto, pero no tienen ninguna importancia especial. Las etiquetas <srong> en cambio, deben utilizarse si el texto transmite una sensación de importancia, seriedad o urgencia.

Espero que hayas disfrutado de este artículo y que hayas aprendido sobre cuándo utilizar las etiquetas <b>.

Traducido del artículo de Jessica Wilkins - HTML Bold Text Tutorial – How to Use the <b> Tag