Si buscas cómo aplicar negrita, cursiva o subrayado en HTML y CSS, la forma básica es esta:
- Negrita en HTML:
<strong>Texto</strong>o<b>Texto</b> - Negrita en CSS:
font-weight: bold; - Cursiva en HTML:
<em>Texto</em>o<i>Texto</i> - Cursiva en CSS:
font-style: italic; - Subrayado en HTML:
<u>Texto</u>(se usa poco hoy en día) - Subrayado en CSS:
text-decoration: underline;
A continuación, lo vemos con ejemplos sencillos y buenas prácticas.
Negrita en HTML y CSS
Negrita en HTML: <strong> y <b>
La forma recomendada para marcar texto importante es:
<strong> indica relevancia semántica.
<p>Este es un texto con <strong>información importante</strong> para el usuario.</p>
<b> solo indica negrita visual, sin significado extra:
<p>Este es un texto con <b>texto en negrita</b> sin énfasis semántico.</p>
Negrita con CSS: font-weight: bold;
Si quieres separar contenido de diseño, usa clases CSS:
<p>Este es un texto con <span class="negrita">parte en negrita</span> usando CSS.</p>
Clase CSS:
.negrita {
font-weight: bold;
}
También puedes aplicar negrita a un elemento completo:
h2 {
font-weight: bold; /* Por defecto casi todos los h2 ya son bold */
}
Cursiva en HTML y CSS
Cursiva en HTML: <em> y <i>
<em> añade énfasis semántico (lectores de pantalla lo pronuncian con énfasis).
Para enfatizar una palabra o frase:
<p>Este texto tiene una palabra en <em>cursiva importante</em> dentro de la oración.</p>
<i> se usa más para nombres, términos extranjeros, pensamientos, etc.:
<p>El término en latín <i>Lorem ipsum</i> se usa como texto de relleno.</p>
Cursiva con CSS: font-style: italic;
<p>Este texto tiene <span class="cursiva">una parte en cursiva</span> gracias a CSS.</p>
.cursiva {
font-style: italic;
}
Subrayado en HTML y CSS
Subrayado en HTML: <u>
<u> se usa cada vez menos, porque el subrayado suele asociarse a enlaces:
<p>Este es un <u>texto subrayado con HTML</u> usando la etiqueta u.</p>
No es la opción ideal si quieres controlar bien el diseño y la accesibilidad.
Subrayado con CSS: text-decoration: underline;
La forma más flexible es usar CSS:
<p>Este es un texto con <span class="subrayado">parte subrayada</span> usando CSS.</p>
.subrayado {
text-decoration: underline;
}
También puedes subrayar títulos o bloques completos:
h3.subrayado {
text-decoration: underline;
}
Subrayado y enlaces: cómo quitarlo o añadirlo
Por defecto, los enlaces suelen ir subrayados. Puedes quitar y controlar ese estilo:
<a href="#" class="enlace-simple">Enlace sin subrayado</a>
.enlace-simple {
text-decoration: none; /* Quita el subrayado */
font-weight: bold; /* Opcional: lo haces destacar */
}
.enlace-simple:hover {
text-decoration: underline; /* Lo subrayas solo al pasar el ratón */
}
Resumen de etiquetas y propiedades
- Negrita HTML:
<strong>,<b> - Negrita CSS:
font-weight: bold; - Cursiva HTML:
<em>,<i> - Cursiva CSS:
font-style: italic; - Subrayado HTML:
<u> - Subrayado CSS:
text-decoration: underline;
