Etiqueta HTML <b>
La etiqueta <b> se usa para resaltar en negrita una parte del texto que queremos destacar para el usuario
La etiqueta HTML <b> se usa para renderizar una parte del texto en negrita y hacer que destaque. La etiqueta <b> solo cambia la apariencia visual; no tiene ningún significado semántico (incluso para los motores de búsqueda).
Este capítulo es para cualquier persona que escriba HTML y quiera poner texto en negrita de la manera correcta. Aprenderás para qué sirve la etiqueta <b> en el HTML moderno, cuándo usarla en lugar de CSS, y en qué se diferencia de <strong>, <i> y <em> — cuatro etiquetas que es fácil confundir.
En HTML5, la etiqueta <b> está pensada para énfasis estilístico no semántico, como marcar palabras clave, nombres de productos o etiquetas de interfaz de usuario, y no como alternativa a otras etiquetas.
Cuándo usar la etiqueta <b>
En HTML5 la etiqueta <b> tiene un propósito específico y limitado: llamar la atención sobre un fragmento de texto por razones puramente estilísticas, sin implicar que el texto sea más importante. La especificación HTML enumera tres casos clásicos:
- Palabras clave en un documento, por ejemplo la primera aparición de un término técnico.
- Nombres de productos en una reseña o descripción.
- La frase de entrada o las palabras iniciales del párrafo de un artículo.
<p><b>HTML</b> is the standard markup language for web pages.</p>
<p>The <b>Galaxy S24</b> ships with a brighter display this year.</p>
<p><b>In a hurry?</b> Skip to the summary below.</p>En cada caso el texto en negrita destaca visualmente, pero no necesariamente es más importante para el significado de la frase — esa distinción es lo que separa <b> de <strong>.
Evita usar la etiqueta <b> para títulos y encabezados. En su lugar, usa las etiquetas <h1>–<h6>, que aportan significado al esquema del documento.
<b> o CSS?
Si tu objetivo es puramente visual y está ligado a una regla de diseño — por ejemplo "todos los nombres de productos en este catálogo van en negrita" — aplicar negrita con la propiedad CSS font-weight suele ser la mejor opción, porque el estilo reside en tu hoja de estilos y puede cambiarse en un solo lugar. Recurre a la etiqueta <b> cuando la negrita forma parte del propio contenido del documento (una palabra clave puntual o una frase de introducción), no un patrón de diseño repetible. En cualquier caso, ninguno de los dos enfoques transmite importancia a las tecnologías de asistencia — para eso necesitas <strong>.
Sintaxis
La etiqueta <b> va en pares. El contenido se escribe entre las etiquetas de apertura ( <b> ) y cierre ( </b> ).
Ejemplo de la etiqueta HTML <b> :
Ejemplo de la etiqueta HTML <b> |W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
</head>
<body>
<p><b>This section of the text </b> has been rendered in bold,</p>
</body>
</html>La apariencia predeterminada del elemento <b> es negrita, pero ese renderizado en negrita es simplemente el estilo predeterminado del navegador — puedes cambiarlo con CSS.
Aplicar negrita con CSS en su lugar
Cuando la negrita está determinada por tu diseño en lugar de por el contenido, aplícala con la propiedad CSS font-weight en un <span> (o cualquier elemento) en lugar de usar <b> ``. Esto mantiene el estilo reutilizable en tu hoja de estilos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
.bold-text {
font-weight: 700;
}
</style>
</head>
<body>
<p>
<span class="bold-text">This section of the text </span>
has been rendered in bold.
</p>
</body>
</html> <b> vs <strong>
Tanto el elemento <b> como <strong> renderizan el texto en negrita de forma predeterminada, por lo que tienen el mismo aspecto en pantalla. La diferencia está en el significado:
<strong><b>
El mismo texto marcado de ambas formas:
<!-- Importance reaches assistive tech -->
<p><strong>Warning:</strong> do not unplug the device while updating.</p>
<!-- Visual attention only, no extra importance -->
<p>The new <b>UltraView</b> monitor is now in stock.</p>Regla general: si la negrita significa algo — este texto es más importante y un usuario de lector de pantalla debe saberlo — usa <strong> . Si solo quieres una señal visual, usa `<b>` `` o CSS font-weight.
<b> vs <i> , <em> y <strong>
Estas cuatro etiquetas se confunden con frecuencia porque dos producen negrita y dos producen cursiva. Se dividen según la misma línea que <b> y <strong> — visual frente a semántico:
| Etiqueta | Estilo predeterminado | ¿Transmite importancia/énfasis? |
|---|---|---|
<b> | Negrita | No — solo visual |
<strong> | Negrita | Sí — importancia fuerte |
<i> | Cursiva | No — solo visual (voz alternativa, términos) |
<em> | Cursiva | Sí — énfasis de entonación |
Así, <b> es el equivalente en negrita de <i>, y <strong> es el equivalente en negrita de <em>.
Accesibilidad
Los lectores de pantalla no asignan al elemento <b> ningún rol semántico — su texto se anuncia exactamente igual que el texto circundante, sin ningún cambio de énfasis. Esto es intencional, porque <b> es presentacional. La consecuencia práctica: nunca uses <b> cuando la importancia del texto deba llegar a los usuarios de tecnologías de asistencia. Si una frase es genuinamente más importante, márcala con <strong> (o con <em> para énfasis hablado) para que el significado llegue a todos, no solo a los lectores con visión.
Atributos
La etiqueta <b> admite Atributos globales y Atributos de evento.
Cómo aplicar un atributo global a una etiqueta HTML <b>
<p>The <b class="highlight" title="Important keyword">keyword</b> is emphasized here.</p>