Referencia de etiquetas

Etiqueta b en HTML: negrita y atención al texto

La etiqueta  llama la atención sobre un fragmento de texto sin indicar mayor importancia ni énfasis de voz. Sirve, por ejemplo, para destacar palabras clave en el resumen de un curso y facilitar que se localicen al recorrerlo. Los navegadores suelen mostrar su contenido en negrita, pero su función se conserva aunque cambies ese aspecto con CSS.

Ejemplo mínimo de b

<p>El curso cubre <b>etiquetas</b>, <b>atributos</b> y ejemplos.</p>

Coloca este fragmento dentro del <body> de una página HTML y ábrela en el navegador. Verás un solo párrafo; «etiquetas» y «atributos» aparecerán normalmente en negrita. Son palabras que ayudan a identificar el contenido del curso, sin expresar una advertencia importante.

Si retiras las etiquetas  y , las palabras permanecen en el párrafo y pierden ese marcado de atención. Si conservas el elemento pero aplicas font-weight: normal, cambia su apariencia, no su significado en HTML.

Sintaxis y contenido permitido

Escribe una apertura , el fragmento que quieres destacar y un cierre . Ninguna de las dos etiquetas se puede omitir;  no cierra el elemento en HTML.

Puedes utilizarlo donde se admite contenido de frase, como dentro de un párrafo, un elemento de lista o un encabezado. A su vez,  admite contenido de frase: texto y elementos como , <a> o . No debe envolver párrafos, secciones ni listas completas. Estas reglas corresponden al modelo de contenido de b en el HTML Living Standard.

Para crear un título, utiliza el encabezado del nivel adecuado. Envolver una frase en  no la convierte en un encabezado ni crea una nueva sección.

B frente a strong: elegir por significado

Antes de escoger una etiqueta, decide qué comunica ese fragmento. Estas alternativas resuelven necesidades distintas:

Necesidad	Elección	Motivo
Localizar palabras clave en un resumen	`<b>`	Dirige la atención sin añadir importancia.
Señalar un aviso de seguridad	`<strong>`	Expresa importancia, gravedad o urgencia.
Acentuar una palabra que cambia el sentido de una frase	`<em>`	Marca énfasis en el discurso.
Aplicar un estilo a un nombre por diseño	CSS en el elemento adecuado	El cambio pedido es de presentación.

 y  suelen verse en negrita, pero no son intercambiables. Cambiar las palabras clave del curso a  les asignaría importancia; cambiar un aviso importante a  eliminaría ese significado. La explicación de MDN sobre b también distingue estas elecciones.

Caso práctico: ficha de un curso

Esta ficha usa  para dos palabras clave,  para un aviso de seguridad y un  con CSS para el nombre del portal. Copia el documento completo en un archivo llamado ficha.html y ábrelo en el navegador. No necesita recursos externos ni JavaScript.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ficha del curso Cuenta segura</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      margin: 2rem;
    }

    .ficha {
      max-width: 38rem;
      margin-inline: auto;
    }

    .ficha .nombre-portal {
      font-weight: 700;
    }
  </style>
</head>
<body>
  <article class="ficha">
    <h1>Cuenta segura</h1>
    <p>Un curso de <span class="nombre-portal">Portal Aula</span>.</p>
    <p>
      Aprenderás a crear una <b class="palabra-clave">contraseña</b>
      y activar la <b class="palabra-clave">verificación en dos pasos</b>.
    </p>
    <p>
      <strong>Aviso de seguridad: no compartas tu contraseña.</strong>
    </p>
  </article>
</body>
</html>

El nombre del portal, las dos palabras clave y el aviso se verán normalmente en negrita. El aspecto es parecido, pero cada uno cumple una función diferente. La clase palabra-clave identifica para qué se usa ; por sí sola no aplica estilos ni cambia su semántica.

Prueba estos cambios por separado y recarga el archivo:

Retira los dos pares de etiquetas . El resumen conserva sus palabras, pero ya no las marca como términos que llaman la atención.
Cambia font-weight: 700 a font-weight: normal. Solo el nombre del portal pierde la negrita; las palabras clave y el aviso conservan su presentación habitual.
Elimina el bloque <style>. El documento sigue siendo comprensible y  y  mantienen su significado. El nombre del portal deja de recibir el estilo personalizado.

Atributos, CSS y accesibilidad

 no tiene atributos específicos vigentes. Admite los atributos globales, entre ellos class para identificar usos o seleccionar estilos, id para identificar un elemento de forma única y lang si ese fragmento cambia de idioma. No necesitas añadirlos a todas las apariciones.

font-weight es una propiedad CSS, no un atributo de . Si solo quieres texto en negrita por diseño, aplica font-weight: bold o 700 al elemento que ya corresponda; utiliza  si necesitas agrupar un fragmento sin añadir otro significado. Los valores se describen en la referencia de font-weight de MDN.

No dependas de que un lector de pantalla anuncie la negrita o cambie la entonación al encontrar . Tampoco conviertas el aviso del ejemplo en una distinción solo visual: las palabras «Aviso de seguridad» y la instrucción completa permiten entenderlo sin ver el formato. El mapeo accesible de b no equivale a una promesa de lectura idéntica en todas las herramientas.

Errores y preguntas frecuentes

¿B está obsoleta? No. Tiene una función vigente: atraer la atención sin importancia añadida. Describirla como una etiqueta sin significado resulta incompleto.

¿Cómo hago negrita solo visual? Usa CSS font-weight sobre el elemento apropiado, como el nombre del portal del ejemplo. No elijas  únicamente porque se vea en negrita.

¿Por qué b no aparece en negrita? Revisa en las herramientas del navegador qué regla CSS determina font-weight, incluidas las reglas que hereda y las que se aplican directamente al elemento. Comprueba también el archivo de estilos y la fuente utilizada: el aspecto final depende de ambos.

¿Conviene marcar todo un párrafo? Solo cuando el fragmento completo cumple esa función. Destacar cada palabra hace más difícil reconocer lo que quieres señalar; para una advertencia importante, elige .

Como etiquetas relacionadas,  comunica importancia,  énfasis y  agrupa texto sin un significado propio. Cuando otra etiqueta describe mejor el contenido, utiliza esa alternativa.

Compatibilidad y fuentes

 está ampliamente disponible en los navegadores actuales; no necesita una biblioteca ni scripts para funcionar. MDN documenta la compatibilidad del elemento, consultada el 3 de octubre de 2026. La disponibilidad no garantiza el mismo grosor de letra ni el mismo anuncio por un lector de pantalla.

La función, sintaxis y atributos se contrastaron con el HTML Living Standard, sección de b. Las fuentes de MDN y W3C enlazadas en las secciones anteriores complementan la presentación, la compatibilidad y el mapeo accesible.