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>
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>
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>
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>
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>
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>
¿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>
.demo-para {
font-weight: bold;
}
Ejemplo de uso de valores numéricos
.demo-para {
font-weight: 700;
}
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