Cuando estás creando una página web o un artículo en tu blog, saber cómo aplicar formato al texto con HTML es algo básico: resaltar una palabra, dar énfasis a una frase o subrayar algo importante mejora la legibilidad y la experiencia del usuario.
En este artículo te explico cómo poner texto en negrita, cursiva y subrayado en HTML, con ejemplos simples que puedes copiar y pegar.
Y sí, también veremos cuándo conviene usarlos desde una perspectiva de diseño y SEO.
Cómo poner texto en negrita en HTML
Para poner una palabra o frase en negrita, puedes usar dos etiquetas distintas: <b> y <strong>.
La diferencia es importante:
<p>Este texto tiene una <b>palabra en negrita</b>.</p>
<p>Y este usa <strong>énfasis semántico</strong> en HTML.</p>Este texto tiene una palabra en negrita.
Y este usa énfasis semántico en HTML.
<b>solo aplica estilo visual (pone el texto en negrita).<strong>además le da significado semántico: indica que ese texto tiene relevancia o importancia.
👉 Recomendación profesional:
Usa <strong> siempre que quieras destacar una palabra clave, una frase importante o una idea dentro del contenido. Es más correcto desde el punto de vista del SEO y la accesibilidad web.
Cómo poner texto en cursiva en HTML
Para poner texto en cursiva, puedes usar las etiquetas <i> o <em>:
<p>Este texto está en <i>cursiva</i>.</p>
<p>Y este tiene <em>énfasis semántico</em> con HTML.</p>Este texto está en cursiva.
Y este tiene énfasis semántico con HTML.
<i>cambia solo el estilo visual.<em>(de emphasis) comunica a los buscadores y lectores de pantalla que esa parte del texto tiene un énfasis especial.
💡 Consejo:
Al igual que con <strong>, utiliza <em> cuando el texto tenga una función real de énfasis (por ejemplo, una cita, una palabra extranjera o una idea importante).
Cómo subrayar texto en HTML
Para subrayar texto, puedes usar la etiqueta <u>:
<p>Este texto está <u>subrayado</u>.</p>Este texto está subrayado.
Sin embargo, no se recomienda abusar del subrayado, ya que en la web suele asociarse con enlaces.
Si quieres subrayar con un efecto visual sin confundir al usuario, puedes hacerlo con CSS:
<p style="text-decoration: underline;">Este texto está subrayado con CSS.</p>Este texto está subrayado con CSS.
O incluso controlar otros estilos:
<p style="text-decoration: underline wavy #00B894;">Subrayado personalizado en color verde.</p>
Subrayado personalizado en color verde.
Combinaciones: negrita, cursiva y subrayado en el mismo texto
Puedes combinar varias etiquetas para resaltar partes del texto:
<p><strong><em><u>Texto en negrita, cursiva y subrayado</u></em></strong></p>Texto en negrita, cursiva y subrayado
Aunque funciona, no es buena práctica abusar de estas combinaciones.
Úsalas solo cuando realmente quieras destacar algo muy importante.
Buenas prácticas de formato en HTML
- Usa las etiquetas semánticas (
<strong>,<em>) siempre que sea posible. - Evita el exceso de subrayado. Puede confundir al usuario con los enlaces.
- Combina formato con intención. Si todo está en negrita, nada destaca.
- Complementa con CSS. El HTML estructura el texto, el CSS lo viste.
Ejemplo más limpio y accesible:
<p>Con este tutorial ya sabes <strong>cómo poner negrita, cursiva y subrayado en HTML</strong> de forma correcta y profesional.</p>Con este tutorial ya sabes cómo poner negrita, cursiva y subrayado en HTML de forma correcta y profesional.
En resumen
- Negrita:
<strong>(mejor que<b>) - Cursiva:
<em>(mejor que<i>) - Subrayado:
<u>otext-decorationcon CSS - Combinación: se puede, pero con moderación
- Objetivo: mejorar la lectura y la experiencia del usuario
Saber aplicar formato al texto con HTML no es solo una cuestión estética: influye en cómo Google y los usuarios entienden tu contenido.
Usar etiquetas semánticas te ayuda a transmitir relevancia, claridad y jerarquía dentro de cada página.
Desde mi experiencia, escribir bien en HTML es parte de escribir bien en la web: claridad visual, estructura limpia y mensajes que el lector (y el buscador) entienden sin esfuerzo.
Preguntas frecuentes sobre cómo poner negrita, cursiva y subrayado en HTML
¿Cómo se pone una palabra en negrita en HTML?
Puedes poner una palabra en negrita usando la etiqueta <strong> o <b>.
La diferencia es que <strong> tiene un valor semántico (indica importancia para buscadores y lectores de pantalla), mientras que <b> solo aplica un estilo visual.
¿Qué diferencia hay entre <i> y <em>?
Ambas etiquetas sirven para poner texto en cursiva, pero <em> comunica énfasis real dentro del contenido, mientras que <i> solo cambia la forma visual. Si estás escribiendo contenido profesional o con enfoque SEO, utiliza <em> para dar relevancia o matiz al texto.
¿Cómo se subraya un texto en HTML?
Para subrayar texto puedes usar <u>, aunque hoy en día es más recomendable hacerlo con CSS:text-decoration: underline;
Esto te da más control sobre el diseño y evita confundir al usuario con enlaces subrayados.
¿Qué es mejor para SEO: usar <b> o <strong>?
Google interpreta la etiqueta <strong> como un indicativo de relevancia dentro del contenido, mientras que <b> solo tiene efecto visual.
Soy José Manuel Castillejo Rodríguez, diseñador web y especialista SEO, aunque con el tiempo he acabado metiéndome en casi todo lo que tiene que ver con el marketing digital.
Hoy ayudo a marcas y profesionales a construir presencia digital con estrategia, tanto optimizando un sitio como analizando datos o ideando nuevas formas de hacer que un proyecto crezca.
Cuando no estoy frente al ordenador, me gusta desconectar saliendo al aire libre, improvisando alguna escapada o simplemente disfrutando de un buen café mientras pienso en la siguiente idea que voy a poner en marcha.