0 Comentarios
Cuando empiezas en el mundo del desarrollo web, hay algo que parece muy simple, pero que plantea muchas dudas: ¿Cómo subrayar un texto en HTML? No es raro que te lo preguntes. Todos, al principio, necesitamos destacar ciertas partes del texto en nuestras webs, ya sea para enfatizar algo importante, para imitar el estilo de los libros de texto o simplemente por una cuestión estética. En este artículo vamos a guiarte paso a paso para que sepas exactamente qué hacer.
Subrayar un texto es una forma de resaltar información, pero ojo, no es lo mismo que hacerla más importante a nivel semántico. En HTML, el subrayado no debería usarse a la ligera. Hoy en día, tiene implicaciones de accesibilidad y estilo que conviene tener en cuenta.
De hecho, si estás diseñando una web profesional, como las que hacemos en nuestro servicio de diseño web en Alicante, es importante saber cómo y cuándo aplicar el subrayado sin romper las buenas prácticas.
La etiqueta <u> viene del inglés "underline" y fue pensada originalmente para subrayar texto, como su nombre indica. Por ejemplo:
<p>Este texto está <u>subrayado</u> con HTML.</p>
Pros:
Muy fácil de usar.
Compatible con todos los navegadores.
Contras:
Tiene poco valor semántico.
Puede confundir al usuario, ya que muchos asocian el subrayado a un enlace.
No es la forma recomendada hoy en día según las buenas prácticas de accesibilidad.
Hoy preferimos separar contenido de presentación, y eso lo conseguimos con CSS. Usar text-decoration nos permite subrayar sin afectar el código semántico.
<p class="subrayado">Texto con estilo CSS</p>
.subrayado {
text-decoration: underline;
}
Esto es limpio, flexible y controlable. Además, puedes cambiar el color, estilo de línea e incluso usar animaciones si quieres ponerte creativo.
Aquí tienes un ejemplo simple que puedes copiar y pegar:
<h2><u>Noticias importantes</u></h2>
<p>Revisa este <u>mensaje urgente</u> antes de continuar.</p>
Recuerda: sólo para casos muy puntuales o cuando no tienes acceso a editar CSS. Y mejor evitarlo si puedes.
Para hacer las cosas bien desde el principio, crea una clase CSS específica:
destacar {
text-decoration: underline;
text-decoration-color: #ff0000; /* rojo */
text-decoration-style: wavy; /* estilo ondulado */
}
Y luego en tu HTML:
<p class="destacar">Texto subrayado con estilo personalizado</p>
Con CSS también puedes combinar otros efectos, como hover, negrita o cambios de color para mejorar la experiencia del usuario.
Evita usar <u> para contenido que no sea verdaderamente decorativo.
No subrayes enlaces falsos. El subrayado está muy ligado a los links; si no lo es, usa otro estilo visual.
Utiliza clases CSS reutilizables. Te ahorrarás mucho tiempo a largo plazo.
Cuida la accesibilidad. Asegúrate de que el color del subrayado tenga buen contraste con el fondo.
Revisa cómo se ve en móvil. A veces el subrayado puede quedar mal ajustado o molesto en pantallas pequeñas.
Siempre que puedas, usa CSS. <u> está obsoleto en muchas guías de estilo modernas.
Sí. Con CSS puedes usar transition o animation para lograr efectos al pasar el ratón, por ejemplo:
.subrayado:hover {
text-decoration: underline wavy blue;
}
Puedes usar text-decoration-color o simplemente cambiar el color del texto al mismo tiempo.
Conclusión: Subrayar en HTML es fácil, pero hacerlo bien tiene su truco. Nuestra recomendación profesional desde Overant, tu agencia de diseño web en Alicante, es apostar por CSS para mantener tu código limpio y accesible.
Si estás empezando o quieres mejorar tu presencia online con una web bien hecha, hablémoslo. ¡Nos encanta crear cosas que funcionen y se vean bien!
¿Qué te ha parecido este artículo?