¿No sabes cómo poner negrita en HTML? Te lo explico de 3 maneras

Resaltar los textos de tus páginas web para que sean más visibles te ayudará a mejorar la experiencia de usuario drásticamente. Lo mejor de todo es que es muy sencillo, solo tienes que usar negrita en HTML y tus frases quedarán destacadas de inmediato. Así que, aquí te explico desde la forma más básica para añadir negrita, hasta la más avanzada que se trata de combinar HTML con CSS para que controles el estilo de tus textos.

¿Qué es la negrita en HTML?

Como te comenté, si usas negrita en HTML podrás resaltar tu texto y quedará más grueso y marcado. Por lo general, se usa para destacar palabras clave, encabezados o cualquier contenido importante.

En este lenguaje de marcado tienes varias formas de aplicar este efecto, pero veremos las más comunes:

1. Etiqueta <b>: Resalta texto visualmente en negrita.
2. Etiqueta <strong>: Además de poner el texto en negrita, añade un significado semántico, indicando que el texto tiene una importancia especial.

Cómo poner negrita en HTML: pasos básicos

Usa la etiqueta <b>

Esta primera forma es muy sencilla. Solo debes usar la etiqueta <b> para aplicar negrita a un texto en HTML. Se vería algo así:

<p>Este es un texto <b>en negrita</b>.</p>

Algo importante aquí es que, aunque puedes poner negrita en HTML con <b>, se usa más para lo visual que para aportarle significado adicional al contenido.

Usa la etiqueta <strong>

Ahora bien, para que resaltes tu texto en negrita y le añadas una dimensión semántica, es mejor que uses la etiqueta <strong>:

<p>Por favor, lee las <strong>instrucciones importantes</strong>.</p>

¿Por qué? resulta que, lo que hace esta etiqueta es decirle al navegador: “oye, este texto sí tiene una relevancia especial”.

Entonces… ¿Cuándo usar <b> y cuándo usar <strong>?

Siempre recuerda que ambas etiquetas producen visualmente el mismo resultado (negrita), pero usa cada una de acuerdo al contexto:

• Usa <b> si solo necesitas cambiar el estilo del texto, sin transmitir significado adicional.
• Usa <strong> si el texto tiene importancia semántica, como advertencias, notas clave o alertas.

Cómo combinar HTML y CSS para una negrita más avanzada

Si quieres personalizar más el estilo de tus textos, lo mejor es que optes por usar CSS. De hecho, tienes la propiedad font-weight que te permite controlar el grosor del texto.

Ejemplo básico con CSS

<p style="font-weight: bold;">Este texto está en negrita gracias a CSS.</p>

Usa clases para estilos reutilizables

La verdad no te recomiendo usar estilos en línea, mejor usa clases CSS para que tu código esté limpio y organizado:

HTML:

<p class="resaltado">Este texto tiene una clase CSS que lo pone en negrita.</p>

CSS:

.resaltado {
    font-weight: bold;
}

Controla el grosor del texto con font-weight

Lo bueno es que si usas CSS, tienes más que solo la negrita estándar. Aquí puedes ajustar el grosor del texto utilizando diferentes valores de font-weight:

.negrita {
    font-weight: bold;
}

.extranegrita {
    font-weight: bolder;
}

.normal {
    font-weight: normal;
}

Gracias a estos valores tendrás un control más preciso sobre cómo quieres que se vea el texto.

Cómo poner negrita con HTML y CSS

Te dejo este ejemplo más completo para que veas cómo destacar tu texto con negrita usando tanto HTML como CSS:

HTML:

<div class="contenedor">
    <p>Este es un texto normal.</p>
    <p class="resaltado">Este texto está resaltado en negrita.</p>
    <p class="advertencia">Advertencia: Este es un texto importante.</p>
</div>

CSS:

.resaltado {
    font-weight: bold;
    color: #333;
}

.advertencia {
    font-weight: bold;
    color: red;
    background-color: #f8d7da;
    padding: 10px;
    border: 1px solid red;
    border-radius: 5px;
}

Si observas bien, aquí no solo se aplica negrita sino que también se usan colores y bordes para resaltar texto importante.

¡Ojo! No hagas esto al poner negrita en HTML

El W3C afirma que lo mejor es que ya no uses <b> para negritas si lo que quieres es resaltar contenido importante. Lo que sí te recomienda hacer es usar <strong> o font-weight con CSS, para que tu código sea más semántico y accesible.

Consejos a la hora de usar negrita en HTML

1. Todo no puede ir en negrita: Si todo está en negrita, nada resaltará.
2. Usa <strong> para contenido importante: Prioriza la semántica en lugar de solo el estilo visual.
3. Complementa con CSS: Mantén tu código HTML limpio delegando los estilos a una hoja de estilos externa.
4. Piensa en la accesibilidad: Los lectores de pantalla interpretan <strong> como contenido relevante, ayudando a usuarios con discapacidades visuales.
5. Añade comentarios, espacios en blanco, usa cursiva y subraya tus textos para mejorar la experiencia de usuario.

Tus proyectos web ya no serán tan básicos como antes. Ahora, al usar negrita en HTML tendrás una funcionalidad para resaltar el contenido importante y brindar una excelente experiencia de usuario. Recuerda usar <strong> o estilos avanzados con CSS.

¿Quieres aprender más trucos y convertirte en un desarrollador web completo? En el Bootcamp de Programación desde Cero de KeepCoding, aprenderás desde lo más básico hasta tecnologías avanzadas que te prepararán para entrar al sector IT.