HTML negrita: las etiquetas b, strong y CSS

Qué es HTML negrita

HTML negrita es el texto que el navegador dibuja con letras más gruesas. Hay tres formas de conseguirlo. Primero, la etiqueta <b>. Segundo, la etiqueta <strong>. Y tercero, CSS puede poner cualquier texto en negrita con font-weight.

En pantalla, las tres se ven igual. Sin embargo, no significan lo mismo. Primero, una es solo un estilo. Otra le dice al lector que esas palabras importan. Y la tercera va en tu hoja de estilos, no en el texto.

Esta guía explica cuál usar y cuándo. Después, verás qué aporta el HTML negrita al SEO, cuánta negrita es demasiada y cómo arreglar una página donde casi cada línea está en negrita. Nuestro SEO Checker gratis detecta ese último problema, así que también explicamos su regla.

La etiqueta HTML negrita: b

El elemento <b> es la etiqueta HTML negrita más antigua. Envuelves las palabras en él y el navegador las muestra en negrita. Este es el ejemplo más simple:

<p>Añade <b>dos tazas</b> de harina.</p>

Hoy, el estándar HTML le da a <b> un papel limitado. Marca palabras que deben destacar, pero que no son más importantes que el resto. Por eso no añade nada al significado. Solo cambia el aspecto de las palabras.

Cuándo usar la etiqueta b

Usa <b> cuando quieras que la vista se pose en una palabra, pero no estés avisando ni enfatizando nada. Por ejemplo:

• Palabras clave en un resumen, para leerlo por encima.
• Nombres de productos en una reseña.
• Las primeras palabras de una noticia corta, que algunos sitios ponen en negrita.
• Palabras de una lista que el lector tiene que volver a encontrar rápido.

El estándar HTML Living Standard llama a <b> el último recurso. Dicho de otro modo, elige primero una etiqueta con significado real. Luego usa <b> solo cuando nada más encaje.

La etiqueta strong

La etiqueta <strong> también muestra el texto en negrita. Sin embargo, además lleva un mensaje. Dice que esas palabras son importantes, serias o urgentes.

<p><strong>Aviso:</strong> desenchufa el aparato antes de abrirlo.</p>

Ese significado cuenta, porque otros lo leen. Los buscadores y las herramientas de IA leen la etiqueta. Algunos lectores de pantalla también pueden anunciarla, si el usuario activa esa opción. Así, <strong> les dice a todos, y a tus lectores, qué palabras pesan más.

Cuándo usar la etiqueta strong

• Un aviso, como el riesgo de perder datos.
• Una condición clave, como una fecha límite o un precio.
• La única frase de una sección larga que nadie debe saltarse.

También puedes poner una dentro de otra. El texto dentro de dos <strong> cuenta como más importante que el de una sola. Aun así, casi ninguna página lo necesita. Si anidas a menudo, seguramente el texto pide una reescritura.

Strong o b en HTML

Mucha gente pregunta cuál es "mejor". En realidad, la pregunta es cuál es verdad para tus palabras. Por eso, esta es la respuesta corta.

• <b> significa "mira aquí". Solo añade estilo.
• <strong> significa "esto importa". Añade significado y estilo.
• Las dos salen en negrita por defecto, porque el navegador las pinta así.
• Las dos son HTML5 válido. Ninguna está anticuada ni prohibida.

Así que hazte una pregunta. Si lees la frase en voz alta, ¿marcarías esas palabras? Si la respuesta es sí, usa <strong>. Si solo quieres que llamen la atención, usa <b>. Y si la negrita es parte del diseño, como la etiqueta de un botón, usa CSS.

¿Y la cursiva? Funciona igual. La etiqueta <em> añade énfasis, mientras que <i> solo cambia el aspecto. Por eso las parejas encajan bien: strong y em llevan significado, b e i llevan estilo.

Texto en negrita con CSS

Cuando la negrita es parte del diseño, va en CSS. Los títulos, los botones, los enlaces del menú y las cabeceras de tabla son buenos ejemplos. La propiedad que necesitas es font-weight.

.price {
  font-weight: 700;
}

Los números van de 100, que es fino, a 900, que es muy grueso. El texto normal es 400 y la negrita es 700. También puedes escribir bold en lugar de 700, porque significan lo mismo.

bold, bolder y los números

La palabra bolder significa un paso más grueso que el texto padre. A primera vista, suena práctico, ya que ahorra trabajo. Sin embargo, el resultado depende de la fuente. Si una fuente no tiene peso 800, el navegador puede imitarlo o saltarlo. Por eso los números fijos son más previsibles.

Una nota sobre las fuentes

Una fuente web solo se ve bien en negrita si cargas su archivo de negrita. Si no, el navegador engorda las letras normales para imitarla. Esa negrita falsa se ve borrosa. Por lo tanto, carga el peso 700 de cada fuente que vayas a usar en negrita.

Por último, CSS también puede quitar la negrita. Por ejemplo, strong { font-weight: 600; } aclara un poco el texto strong en todo el sitio. El significado se queda, porque la etiqueta sigue ahí.

¿La negrita ayuda al SEO?

Un poco, y solo cuando es honesta. Google ha dicho que lee la negrita como una pista sobre el tema de un pasaje. Pero es una pista pequeña. No va a subir una página floja, y nunca sustituye a unos títulos claros y a un buen texto.

Sobre todo, la negrita ayuda a las personas. Quien lee por encima mira primero los títulos y después las palabras en negrita. Por eso, si tus negritas resumen cada sección, los lectores se quedan más tiempo. Y eso es justo lo que quieren ver los buscadores.

Cuándo la negrita perjudica

La negrita deja de funcionar cuando hay demasiada. Si media página está en negrita, nada destaca. Peor aún, una página llena de palabras clave en negrita parece relleno de palabras clave. Por eso auditorías como Seobility, y nuestro propio checker, avisan de ello.

Cuánta negrita es demasiada

No hay un límite oficial. Aun así, las herramientas de auditoría coinciden en cómo es el problema. Nuestro SEO Checker cuenta cada <b> y cada <strong> de la página. Luego muestra un aviso en tres casos.

1. Demasiadas. La página tiene más de 20 negritas y más de una por cada 40 palabras.
2. Repetidas. El mismo texto aparece en negrita más de una vez, como una palabra clave en cada párrafo.
3. Demasiado largas. Una negrita pasa de 70 caracteres, es decir, una frase entera.

La primera regla crece con la página. Una guía de 4.000 palabras admite más negrita que una ficha de producto de 300. En cambio, la segunda y la tercera regla valen para cualquier página, porque una repetición o una frase en negrita nunca ayudan al lector.

Por qué una frase entera en negrita es un problema

Una frase en negrita cuesta leerla. Además, las letras gruesas cansan en tramos largos. Además, si la frase es tan importante, quizá merezca un título o una nota destacada. Cualquiera de los dos resalta más que la negrita.

Cómo arreglar el exceso de negrita

El arreglo es sobre todo de edición, no de código. Por eso cada página lleva solo unos minutos. A continuación, este es el orden que seguimos en los sitios de clientes.

Paso 1: encuentra cada negrita

Analiza la página con el SEO Checker. Después abre la pestaña Elements, donde aparece el texto en negrita con su recuento. O, si lo prefieres, busca <b> y <strong> en el código fuente.

Paso 2: borra las repeticiones

Deja la primera negrita de cada frase y borra el resto. Una palabra clave no se vuelve más fuerte la tercera vez. De hecho, el lector deja de verla después de la primera.

Paso 3: acorta las negritas largas

Reduce cada frase en negrita a las dos o tres palabras que la sostienen. Por ejemplo, cambia una frase entera en negrita como "Haz una copia de seguridad antes de actualizar" por "Haz una copia de seguridad antes de actualizar".

Paso 4: pasa la negrita de diseño a CSS

Las etiquetas, los precios y las cabeceras de tabla son diseño. Así que dales una clase y una regla font-weight en lugar de una etiqueta. Entonces ya no cuentan como texto en negrita.

<!-- Antes -->
<p><b>Precio:</b> 29 $</p>

<!-- Después -->
<p><span class="label">Precio:</span> 29 $</p>

.label { font-weight: 700; }

Paso 5: comprueba el resultado

Pega tu nuevo marcado en el editor HTML online y compáralo con el anterior. Luego vuelve a analizar la página publicada. El aviso debería desaparecer. El vídeo de abajo muestra todo el proceso en una página de ejemplo.

Negrita en WordPress, Markdown y correo

A menudo, el HTML negrita no lo escribe nadie a mano, sino un editor. En cambio, un editor lo escribe por ti. Por eso conviene saber qué produce cada uno.

WordPress

El botón de negrita del editor de bloques, o Ctrl+B, escribe <strong>. Eso está bien para un énfasis real. Pero muchos autores lo pulsan solo para que el texto se vea mejor. Como resultado, las entradas de WordPress acaban a menudo con demasiada negrita. En ese caso, usa un título o un bloque con estilo.

Markdown

En Markdown, dos asteriscos a cada lado ponen el texto en negrita: **así**. La mayoría de herramientas lo convierten en <strong>. Nuestro conversor de Markdown a HTML te enseña el HTML exacto que obtienes.

El correo es distinto, porque las apps de correo quitan casi todo el CSS. Por eso, <b> y <strong> son más seguras que una clase en un email. Las dos funcionan en todos los buzones importantes.

Errores comunes

• Poner una palabra clave en negrita en cada párrafo para "ayudar al SEO". Se lee como relleno.
• Poner un párrafo entero en negrita para que destaque. Un título o una nota lo hacen mejor.
• Usar <strong> para etiquetas de diseño. Usa CSS, así la etiqueta conserva su significado.
• Escribir <b><strong> juntas. Con una basta.
• Cargar una fuente web sin su archivo de negrita, lo que da una negrita falsa y borrosa.
• Usar la vieja etiqueta <font> o estilos en línea. Pasa el estilo a tu CSS.

Cada uno es fácil de arreglar en cuanto lo ves. Por eso lo primero es un análisis rápido. Si quieres todos los detalles, merece la pena leer la página de MDN sobre el elemento strong.

Preguntas y respuestas