Cómo poner negrita, cursiva y subrayado en HTML

Aprender a poner negrita, cursiva y subrayado en HTML es fácil pero algo un poco aburrido así que en esta guía voy a explicarte cómo aplicar estas etiquetas HTML escribiendo los peores chistes del mundo y además, te voy a detallar las implicaciones que tiene escoger una etiqueta u otra de cara a la visibilidad en los motores de búsqueda (por si te encuentras empezando a aprender SEO).

Negrita en HTML

Para poner las palabras en negrita, HTML nos ofrece dos etiquetas principales: <strong> y <b>. Aunque ambas generan el mismo efecto visual (texto en negrita), su significado semántico es diferente.

Uso de la etiqueta <strong>

La etiqueta <strong> se utiliza cuando el contenido tiene importancia semántica, es decir, cuando queremos indicar a los motores de búsqueda y a los lectores que esa palabra o frase es fundamental dentro del contexto del contenido.

Ejemplo de código

<p>¿Cómo se despiden los químicos? <strong>Ácido un placer...</strong></p>

Resultado

¿Cómo se despiden los químicos? Ácido un placer...

En este caso, los navegadores mostrarás "Ácido un placer..." en negrita y reconocerán que esta parte del texto es relevante, lo que puede mejorar el SEO.

Uso de la etiqueta <b>

La etiqueta <b> se usa cuando solo queremos escribir letras en negrita por razones de estilo, sin implicar un significado especial o enfatizar la importancia del contenido.

Ejemplo de código

<p>¿Cómo se llama el campeón de buceo japonés? <b>Tokofondo</b></p>

Resultado

¿Cómo se llama el campeón de buceo japonés? Tokofondo

En este caso, visualmente "Tokofondo" aparecerá en negrita pero sin relevancia semántica y los motores de búsqueda no le darán un peso especial en el SEO.

Diferencias clave entre <strong> y <b>

Característica	<strong>	<b>
Impacto visual	Texto en negrita	Texto en negrita
Significado semántico	Tiene relevancia para SEO y accesibilidad	Solo cambia el estilo visual
Lectores de pantalla	Lo enfatizan como importante	No lo leen con énfasis
Usos recomendados	Destacar información clave	Resaltar palabras sin importancia semántica

Cursiva en HTML

En HTML, la cursiva se utiliza para resaltar texto de una manera visualmente diferenciada. Sin embargo, no todas las formas de aplicar cursiva tienen el mismo significado. Existen dos etiquetas principales: <em> y <i>, cada una con un propósito diferente.

Uso de la etiqueta <em>

La etiqueta <em> significa énfasis. Cuando un lector de pantalla encuentra esta etiqueta, cambia su entonación para destacar la palabra o frase. Además, Google y otros motores de búsqueda la consideran semánticamente relevante, lo que puede influir en el SEO.

Ejemplo de código

<p>¿Qué hace un pez mago? <em>Nada por aquí, nada por allá</em></p>

Resultado

¿Qué hace un pez mago? Nada por aquí, nada por allá

En este caso, visualmente Nada por aquí, nada por allá aparecerá en cursiva y los motores de búsqueda le darán cierto peso semántico.

Uso de la etiqueta <i>

La etiqueta <i> solo aplica estilo visual, sin transmitir significado adicional. Es útil para palabras en otro idioma, nombres científicos o términos técnicos que no necesitan énfasis semántico.

Ejemplo de código

<p>¿Qué son 50 físicos y 50 químicos juntos? <i>100tíficos</i></p>

Resultado

¿Qué son 50 físicos y 50 químicos juntos? 100tíficos

En este caso, visualmente 100tíficos aparecerá en cursiva pero los motores de búsqueda no le darán cierto peso semántico.

Diferencias clave entre <em> y <i>

Característica	<em>	<i>
Impacto visual	Texto en cursiva	Texto en cursiva
Significado semántico	Tiene énfasis semántico, importante para SEO y accesibilidad	Solo cambia el estilo visual
Lectores de pantalla	Lo leen con énfasis	No afecta la lectura
Usos recomendados	Resaltar palabras clave con importancia	Términos en otro idioma, títulos o jerga técnica

Subrayado en HTML

El subrayado es un estilo de texto que en HTML se puede aplicar de varias maneras, aunque su uso debe ser cuidadoso. Tradicionalmente, los navegadores han asociado el subrayado con enlaces, por lo que su uso indebido puede generar confusión en la experiencia del usuario.

Uso de la etiqueta <u>

La etiqueta <u> se usa para subrayar texto sin que tenga un significado semántico especial. Se emplea en casos específicos, como nombres propios mal escritos, términos extranjeros o elementos que necesitan destacarse visualmente sin ser enlaces.

Ejemplo de código

<p>Conocí a mi novia en un ascensor, <u>soy el amor de subida</u></p>

Resultado

Conocí a mi novia en un ascensor, soy el amor de subida.

Otras formas de poner negrita, cursiva y subrayado sin HTML

Aunque HTML nos proporciona etiquetas como <strong>, <b>, <em>, <i> y <u> para dar formato al texto, existen otras formas más flexibles que me gustaría recomendarte para aplicar negrita, cursiva y subrayado sin alterar la semántica del contenido.

Aplicar negrita con CSS

Podemos usar la propiedad font-weight para controlar el grosor del texto y poner así letras en negritas.

Ejemplo de código

<style>
.negrita {
    font-weight: bold;
  }
</style>

<p>¿Qué es un terapeuta? <span class="negrita">1024 Gigapeutas</span></p>

Aplicar cursiva con CSS

Para poner texto en cursiva, usamos la propiedad font-style.

Ejemplo de código

<style>
.cursiva {
    font-style: italic;
  }
</style>

<p>¿Tienes libros para el cansancio?<span class="cursiva">lo siento, están agotados</span></p>

Aplicar subrayado con CSS

En CSS, la mejor forma de subrayar texto es con text-decoration: underline;.

Ejemplo de código

<style>
.subrayado {
    text-decoration: underline;
  }
</style>

<p>Tengo un amigo otaku que estaba triste <span class="cursiva">así que lo animé</span></p>

Buenas prácticas y consideraciones SEO

Como hemos visto, un uso correcto de negrita, cursiva y subrayado mejora la legibilidad del contenido y contribuye al SEO. A continuación, algunas buenas prácticas en un solo <ul> para estructurar todo de manera clara y concisa: