índice
Históricamente, en las primeras versiones del lenguaje, el subrayado HTML se conseguía exclusivamente con la etiqueta <u> (de underline).
Durante un tiempo, esta etiqueta cayó en desuso y fue «reprobada» porque se consideraba que el diseño debía estar separado del contenido. Sin embargo, con la llegada de HTML5, la etiqueta <u> ha vuelto con un propósito más semántico.
¿Cuándo usar <u>?
No se trata solo de «hacer una raya debajo». Según los estándares actuales, deberías usarla para:
- Indicar errores ortográficos.
- Nombres propios en ciertos contextos.
- Anotaciones que, aunque no tengan énfasis (para eso está <strong>), necesitan una distinción visual.
Ejemplo de código: <p>Este es un ejemplo de <u>subrayado HTML</u> usando la etiqueta básica.</p>
La forma profesional: Usando CSS
Si buscas un resultado limpio y profesional, el subrayado HTML debe gestionarse a través de CSS (Hojas de Estilo en Cascada). Esto te da un control total y evita «ensuciar» el código estructural de tu web.
La propiedad mágica aquí es text-decoration.
El subrayado estándar en CSS
Para subrayar cualquier elemento (un párrafo, un título o un span), solo necesitas añadir esta línea a tu archivo de estilos:
CSS:
.texto-subrayado {
text-decoration: underline;
}
HTML:
<p class=»texto-subrayado»>Este texto luce un subrayado impecable gracias al CSS.</p>
Personalización avanzada
Aquí es donde nos diferenciamos de la competencia. Con CSS moderno, puedes decidir el color, el grosor y hasta el estilo de la línea (punteada, ondulada, etc.).
- Color del subrayado:
text-decoration-color: #ff5733; - Grosor de la línea:
text-decoration-thickness: 3px; - Estilo:
text-decoration-style: wavy;(para un efecto ondulado).
Esto es vital para mantener la coherencia con la identidad visual de tu marca. Si tu paleta de colores es minimalista, quizás un subrayado fino y gris sea más elegante que el negro puro por defecto.
El dilema de la usabilidad: ¿Subrayar o no subrayar?
Como consultor de marketing digital, uno de los errores más comunes que veo en auditorías web es el uso excesivo o incorrecto del subrayado.
¿Por qué es un problema? Desde que existe internet, los usuarios han aprendido que «texto subrayado = enlace». Si subrayas frases que no son clicables, estarás frustrando a tu visitante. Harán clic, no pasará nada y sentirán que tu web «no funciona».
Reglas de oro para el subrayado:
- Evítalo en textos largos: Dificulta la lectura horizontal al «cortar» las astas descendentes de letras como la «p», «g» o «y».
- Resérvalo para los enlaces: Si no es un link, considera usar negrita o cursiva para resaltar información.
- Cuidado con el SEO: Google no te va a penalizar por usar la etiqueta
<u>, pero una mala experiencia de usuario (UX) sí afecta a tus métricas de retención.
Diferencias entre <u>, <span> y text-decoration
Para que no te queden dudas, aquí tienes una tabla comparativa que te ayudará a elegir el método correcto según tu necesidad:
Cómo hacer un subrayado con border-bottom (Truco Pro)
A veces, el subrayado estándar queda demasiado pegado a las letras. Si quieres que tu subrayado HTML respire, puedes usar un borde inferior en lugar de la decoración de texto:
.subrayado-elegante {
border-bottom: 2px solid #000;
padding-bottom: 2px;
display: inline-block;
}
Este método es el preferido por diseñadores UI para crear botones minimalistas o resaltar títulos de sección de forma sofisticada.
Poner un subrayado HTML es sencillo, pero hacerlo bien requiere criterio. Ya sea que optes por la simplicidad de la etiqueta <u> o la potencia del CSS, recuerda siempre poner la experiencia del usuario por delante.
En Jimenez Blas, sabemos que una web que comunica bien es una web que vende. Si sientes que tu sitio necesita un empujón técnico o estratégico, contar con un equipo experto puede ser la clave para pasar al siguiente nivel. ¡Manos al código!
FAQS
¿El subrayado HTML afecta al SEO?
El subrayado HTML no afecta directamente al SEO. El uso de la etiqueta <u> o de CSS para subrayar no es un factor de ranking. Sin embargo, si confundes al usuario subrayando texto que no es un enlace, tu tasa de rebote podría subir, y eso sí afecta indirectamente al SEO.
¿Cómo quito el subrayado de los enlaces?
Por defecto, los navegadores subrayan todos los enlaces (). Para quitarlo, usa: a { text-decoration: none; } Eso sí, asegúrate de que el enlace sea distinguible por su color para no arruinar la accesibilidad.
¿Puedo subrayar solo una palabra dentro de un párrafo?
Puedes subrayar solo una palabra dentro de un párrafo, ¡claro! La forma más limpia es envolver esa palabra en una etiqueta <span> con una clase CSS o, si tiene sentido semántico, usar la etiqueta <u>.
¿Funciona igual en todos los navegadores?
Sí, las propiedades básicas de text-decoration funcionan en Chrome, Firefox, Safari y Edge. Las propiedades más avanzadas (como text-decoration-thickness) también son compatibles con las versiones actuales de todos los navegadores modernos.
