Cómo poner texto en negrita en HTML: strong, b y CSS

Para poner texto en negrita en HTML puedes utilizar las etiquetas <strong> y <b>, o aplicar la propiedad CSS font-weight. La opción correcta depende de si quieres comunicar importancia dentro del contenido o simplemente cambiar su apariencia.

Si una palabra o frase tiene una importancia especial, utiliza <strong>:

<p>
    Antes de continuar, <strong>guarda una copia de seguridad</strong>.
</p>

Si solo necesitas aumentar visualmente el grosor de la letra, puedes hacerlo mediante CSS:

.negrita {
    font-weight: 700;
}

La etiqueta <b> también suele mostrarse en negrita, pero tiene un uso semántico diferente que conviene conocer.

Cómo escribir texto en negrita con strong

La etiqueta <strong> indica que una parte del contenido tiene una importancia especial, seriedad o urgencia dentro del contexto.

Su sintaxis es sencilla:

<strong>Texto importante</strong>

También puede utilizarse dentro de un párrafo:

<p>
    El formulario debe enviarse antes del
    <strong>viernes a las 5:00 p. m.</strong>
</p>

Los navegadores suelen representar visualmente el contenido de <strong> con una tipografía más gruesa, aunque esa apariencia puede modificarse mediante CSS.

Lo importante es que la etiqueta no se elige únicamente porque “se ve en negrita”. Se utiliza porque el fragmento tiene mayor importancia dentro del mensaje.

Cómo utilizar la etiqueta b en HTML

La etiqueta <b> permite llamar la atención sobre una parte del texto sin indicar que esa información tiene mayor importancia que el resto.

Por ejemplo:

<p>
    Disponible en los modelos
    <b>Básico</b>,
    <b>Profesional</b> y
    <b>Empresa</b>.
</p>

En HTML moderno, <b> no debería utilizarse simplemente como sustituto de CSS. Puede ser apropiado para destacar determinados términos, nombres de productos o fragmentos a los que se quiere dirigir la atención cuando no existe otra etiqueta semántica más adecuada.

Diferencia entre strong y b

Aunque <strong> y <b> suelen verse iguales en el navegador, no significan lo mismo.

La elección debería depender del propósito del texto y no únicamente de su apariencia.

Cómo poner texto en negrita con CSS

Cuando el objetivo es exclusivamente visual, CSS ofrece mayor control mediante la propiedad font-weight.

Por ejemplo:

.texto-negrita {
    font-weight: bold;
}

Y en HTML:

<p class="texto-negrita">
    Este texto utiliza negrita mediante CSS.
</p>

También pueden utilizarse valores numéricos:

.texto-destacado {
    font-weight: 700;
}

El valor 400 suele representar un peso normal y 700 suele corresponder a una negrita convencional.

Sin embargo, el resultado real depende de los pesos disponibles en la tipografía utilizada. Algunas fuentes incluyen muchas variantes y otras solo ofrecen un peso normal y otro en negrita.

Valores de font-weight que puedes utilizar

La propiedad acepta palabras clave y valores numéricos.

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;

font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;

En CSS moderno también pueden utilizarse otros valores numéricos compatibles con determinadas fuentes variables.

No tiene sentido elegir 900 únicamente porque parezca “más fuerte”. El grosor debe adaptarse a la tipografía, jerarquía visual y legibilidad del diseño.

Ejemplo completo de negrita en HTML y CSS

Este ejemplo permite ver las tres opciones juntas:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de negrita</title>

    <style>
        .negrita-css {
            font-weight: 700;
        }
    </style>
</head>

<body>

    <p>
        Este texto contiene una
        <strong>advertencia importante</strong>.
    </p>

    <p>
        Puedes elegir entre el plan
        <b>Profesional</b> y el plan Empresa.
    </p>

    <p class="negrita-css">
        Este párrafo utiliza CSS para cambiar el peso de la fuente.
    </p>

</body>
</html>

Cuándo utilizar strong, b o CSS

Una forma sencilla de decidir es pensar primero qué significa el fragmento.

Si necesitas comunicar que algo es especialmente importante, utiliza <strong>.

Si quieres llamar la atención sobre un término sin transmitir importancia, <b> puede ser apropiado.

Si la intención es solamente visual, utiliza CSS.

Por ejemplo, si todos los títulos de determinadas tarjetas deben mostrarse con un grosor de 700 únicamente por decisión de diseño, no necesitas envolverlos con <strong>. El estilo puede resolverse directamente desde la hoja CSS.

No utilices strong solo para cambiar el diseño

Una práctica habitual es utilizar <strong> cada vez que se quiere mostrar una palabra visualmente en negrita.

Eso puede terminar utilizando una etiqueta semántica para una función puramente estética.

Por ejemplo:

<strong>Precio</strong>

puede ser correcto si la palabra realmente tiene una importancia especial dentro del contenido.

Pero si todos los precios de una interfaz deben tener un grosor concreto únicamente como parte del diseño, es preferible utilizar una clase:

<span class="precio">$150.000</span>

.precio {
    font-weight: 700;
}

¿La etiqueta strong mejora el SEO?

No utilizaría <strong> como una técnica para intentar mejorar posiciones en Google.

Su función principal es aportar significado dentro del documento. No tiene sentido llenar un artículo de palabras clave en negrita esperando que los buscadores les asignen automáticamente mayor importancia.

Para SEO resulta mucho más relevante que el contenido responda correctamente a la intención de búsqueda, tenga una estructura comprensible y aporte información útil.

Utiliza <strong> cuando tenga sentido para el lector.

¿Strong mejora automáticamente la accesibilidad?

<strong> aporta significado semántico al documento, pero no debería afirmarse que todos los lectores de pantalla van a pronunciar siempre ese contenido de una manera diferente.

El comportamiento puede variar según la tecnología de asistencia y su configuración.

Por ello, una advertencia importante no debería depender únicamente de una palabra en negrita. Cuando sea necesario, utiliza también un texto claro que explique la importancia del mensaje.

Cómo poner varias palabras en negrita

Puedes envolver cualquier fragmento de texto:

<p>
    Nuestro horario es de
    <strong>lunes a viernes de 8:00 a. m. a 5:00 p. m.</strong>
</p>

No es necesario crear una etiqueta por cada palabra si forman parte del mismo mensaje.

Cómo poner solo una palabra en negrita

También puedes destacar una única palabra:

<p>
    Este servicio requiere <strong>confirmación</strong> previa.
</p>

El resto del párrafo conservará su estilo normal.

Cómo poner un enlace en negrita

Si necesitas que un enlace tenga mayor grosor por razones de diseño, puedes hacerlo mediante CSS:

<a class="enlace-destacado" href="/contacto/">Contactar</a>

.enlace-destacado {
    font-weight: 700;
}

No es necesario envolver todos los enlaces en <strong> únicamente para mostrarlos en negrita.

Cómo poner negrita en HTML con estilos inline

También existe la posibilidad de aplicar CSS directamente sobre el elemento:

<span style="font-weight: 700;">Texto en negrita</span>

Funciona, pero en proyectos medianos o grandes suele ser más fácil mantener los estilos dentro de clases CSS.

Así puedes cambiar la apariencia desde un único lugar sin editar cada elemento individualmente.

Cómo poner texto en negrita desde PHP

PHP no tiene una etiqueta propia para mostrar texto en negrita. Si PHP genera una página HTML, simplemente debe producir el marcado HTML correspondiente.

Por ejemplo:

<?php
echo '<strong>Texto importante</strong>';
?>

El navegador recibe finalmente:

<strong>Texto importante</strong>

Por eso hablar de “negrita en PHP” normalmente significa generar HTML o aplicar CSS desde una página construida con PHP.

Cómo poner texto en cursiva en HTML

La cursiva es un formato relacionado, pero tampoco todas las etiquetas que suelen mostrarse en cursiva tienen el mismo significado.

Para indicar énfasis se utiliza <em>:

<p>
    Yo dije que era <em>hoy</em>, no mañana.
</p>

La etiqueta <i> puede utilizarse para determinados textos que tradicionalmente se presentan con una voz o estilo diferente, como términos técnicos, expresiones en otro idioma o ciertos nombres.

Si únicamente quieres que un elemento tenga apariencia cursiva, puedes usar:

.cursiva {
    font-style: italic;
}

Cómo subrayar texto en HTML

Para un subrayado exclusivamente visual suele ser preferible utilizar CSS:

.subrayado {
    text-decoration: underline;
}

Y en HTML:

<span class="subrayado">Texto subrayado</span>

HTML también dispone de la etiqueta <u>, pero su significado actual no consiste simplemente en “hacer texto subrayado”. Se utiliza para determinadas anotaciones textuales donde no existe una etiqueta más apropiada.

Además, conviene utilizar el subrayado con cuidado en interfaces web porque los usuarios suelen asociarlo visualmente con los enlaces.

Negrita, cursiva, subrayado y resaltado

Errores frecuentes al aplicar negrita

• Utilizar <strong> únicamente para cambiar la apariencia.
• Poner párrafos completos en negrita sin una razón clara.
• Destacar demasiadas palabras y hacer más difícil identificar lo importante.
• Utilizar <b> cuando existe una etiqueta semántica más adecuada.
• Aplicar estilos inline repetidos cuando una clase CSS sería más fácil de mantener.
• Usar negrita sobre muchas palabras clave con la intención de mejorar el SEO.

La fuente también determina cómo se verá la negrita

No todas las tipografías disponen de los mismos pesos.

Una fuente puede ofrecer únicamente:

400 - Normal
700 - Bold

Otra puede incluir:

300
400
500
600
700
800
900

Por eso escribir:

font-weight: 600;

no garantiza que todas las tipografías dispongan de un archivo o variante exactamente correspondiente a ese peso.

El navegador utilizará los pesos disponibles de acuerdo con la familia tipográfica y sus características.

Qué opción conviene usar en un proyecto real

La decisión puede simplificarse pensando primero en el significado.

Si estás escribiendo una advertencia:

<strong>No cierres la ventana mientras se guarda el archivo.</strong>

Si tienes un término al que quieres dirigir la atención sin indicar mayor importancia:

<b>Plan Profesional</b>

Si necesitas que todos los precios de una tarjeta aparezcan con mayor peso únicamente por diseño:

.precio {
    font-weight: 700;
}

Esta separación entre significado y apariencia permite mantener el HTML más claro y hace que los estilos sean más fáciles de administrar.