Vamos a ver cómo funciona esta etiqueta, cuándo usarla y por qué a veces es mejor elegir otra opción.
La etiqueta <b> (de la palabra inglesa bold, que significa “negrita”) se usa en HTML para resaltar visualmente el texto en negrita. No añade significado adicional al texto, solo resalta el contenido para el lector. En este artículo veremos cómo funciona esta etiqueta y en qué se diferencia de otras maneras de destacar texto.
Cómo funciona la etiqueta <b> y para qué sirve
La etiqueta <b> pone en negrita el texto seleccionado para que destaque en la página. Los motores de búsqueda y los lectores de pantalla (programas que leen el texto en voz alta para personas con discapacidad visual) ignoran este tipo de resaltado. Para indicarles que es un texto importante al que hay que prestar atención, se utilizan otros métodos. Hablaremos de ellos más adelante.
Con la etiqueta <b>, puedes destacar, por ejemplo:
- El nombre de un producto o marca;
- El texto de un botón;
- Las primeras palabras de los puntos de una lista, para separarlos visualmente.
<p>Este es texto normal, y <b>este es texto en negrita</b>.</p>En la página, solo se destacará la frase “este es texto en negrita“.
Cómo escribir y usar correctamente la etiqueta <b> en un documento HTML
La etiqueta <b> es una etiqueta de apertura y cierre, es decir, debes abrirla (<b>) y luego cerrarla (</b>). Todo lo que esté dentro aparecerá en negrita.
<p>Para iniciar el programa, pulsa <b>Inicio</b>.</p>El navegador modifica el texto resaltado de esta manera, aplicando el estilo font-weight: bold.
La etiqueta no tiene atributos únicos, pero admite atributos HTML comunes:
class: para conectar estilos CSS;id: para una identificación única;style: para una configuración rápida de la apariencia;title: información sobre herramientas.
<b class="highlight" title="Información importante">¡Presta atención!</b>Esto es lo que ocurre:
class="highlight": conecta una clase CSS con el nombrehighlight, con la que puedes definir estilos (por ejemplo, color, sangría, etc.) en un archivo CSS;title="Información importante": si pasas el ratón sobre el texto, aparecerá una información sobre herramientas con esta frase.
La etiqueta <b> y la etiqueta <strong>: ¿cuál es la diferencia?
<strong> es una etiqueta similar para destacar texto. Ambas etiquetas ponen el texto en negrita, pero funcionan de manera diferente:
- La etiqueta
<b>simplemente resalta el texto visualmente, sin significado adicional. - La etiqueta
<strong>indica que el texto es importante y que hay que prestarle atención. Esto lo entienden los navegadores, los motores de búsqueda y los lectores de pantalla (programas que leen el texto en voz alta). Con la etiqueta<strong>puedes destacar, por ejemplo, advertencias o frases clave.
<p>Este texto <b>simplemente está en negrita</b>, y este <strong>es importante</strong>.</p>Visualmente, el resultado de estas etiquetas es exactamente el mismo.
Cómo afecta la etiqueta <b> a la accesibilidad y al SEO
Los motores de búsqueda ignoran la etiqueta <b> porque no tiene significado, es decir, esta etiqueta no afecta al SEO.
La etiqueta <b> por sí sola no ayuda a crear un entorno accesible para personas con discapacidad visual, pero se puede usar junto con los atributos ARIA. Entonces, el texto comenzará a interactuar con los lectores de pantalla.
Los atributos ARIA ayudan a explicar el significado del texto a los programas de lectura de pantalla. Esto es importante si usas <b> y quieres que el resaltado se entienda correctamente.
El atributo aria-label proporciona una sugerencia de texto que los lectores de pantalla pronuncian junto con el contenido del elemento.
<p>Velocidad del coche: <b aria-label="críticamente alta"> — 200 km/h</b></p>El lector de pantalla dirá:
"Velocidad del coche críticamente alta — 200 kilómetros por hora".El atributo aria-hidden ayuda a ocultar el texto de los lectores de pantalla:
<p>Este es un mensaje <b aria-hidden="true">importante</b>.</p>El lector de pantalla solo leerá: “Este es un mensaje” — la palabra “importante” se omitirá, pero permanecerá visualmente en la pantalla.
Uso de estilos en lugar de la etiqueta <b>
Si solo necesitas poner texto en negrita, no es necesario usar la etiqueta <b>. Puedes hacer lo mismo con CSS, el lenguaje que controla la apariencia de la página.
<p>Este es <span class="highlight">texto resaltado</span>.</p>.highlight {
font-weight: 700;
}Aquí, la fuente de la frase resaltada dentro de la etiqueta <span> estará en negrita porque hemos definido el estilo font-weight: 700, es decir, hemos indicado el grosor de la fuente 700. Es mejor usar un valor numérico que el valor bold, porque las fuentes modernas admiten diferentes grosores:
| Nombre | Grosor |
|---|---|
| Thin / Hair | 100 |
| Extra Light | 200 |
| Light | 300 |
| Regular | 400 |
| Medium | 500 |
| Semi Bold | 600 |
| Bold | 700 |
| Extra Bold | 800 |
| Black / Heavy / Ultra | 900 |
Usando números, ajustas con precisión la apariencia del texto. Esto es importante si tienes un diseño o necesitas un estilo unificado.
Los estilos tienen varias ventajas sobre la etiqueta <b>:
- Puedes controlar el estilo en un solo lugar: cambias el estilo en CSS y se aplica a todos los elementos necesarios.
- Es fácil usar diferentes tipos de resaltado: negrita (
font-weight), color (color), subrayado (text-decoration) y otros. - El código se vuelve más limpio: la estructura (HTML) y el diseño (CSS) están separados.
Pero la etiqueta <b> se puede usar:
- Para resaltar rápidamente el texto en un pequeño fragmento;
- Si no tienes acceso a CSS (por ejemplo, en un CMS o constructor de sitios web);
- En ejemplos de aprendizaje o borradores.
