¿Cómo hacer subrayado en HTML?

| Última modificación: 12 de abril de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

El subrayado es una forma efectiva de resaltar texto en una página web. Descubre cómo subrayar texto en HTML utilizando la etiqueta <u> o la propiedad CSS text-decoration. ¡Aprende más aquí!

¿Qué es el subrayado en HTML y cuál es su utilidad?

El subrayado en HTML es una técnica que se utiliza para resaltar texto mediante la adición de una línea horizontal debajo de las palabras o frases específicas. Esta línea ayuda a enfatizar el texto y a llamar la atención del lector hacia él.

La utilidad del subrayado en HTML radica en su capacidad para destacar partes importantes del texto y para proporcionar claridad visual. Tradicionalmente, el subrayado se ha utilizado para indicar que un texto es un enlace o link, permitiendo a los usuarios identificar fácilmente los elementos interactivos en una página web.

Además de señalar enlaces, el subrayado en HTML también se utiliza para resaltar texto incorrecto, nombres propios, títulos u otras partes del texto que requieran atención especial. Esta técnica ayuda a mejorar la legibilidad y la comprensión del contenido, facilitando a los usuarios la identificación de la información relevante.

El subrayado en HTML es una herramienta versátil que se utiliza para resaltar texto y proporcionar claridad visual en una página web. Ya sea para indicar enlaces, resaltar partes importantes del texto o mejorar la legibilidad, el subrayado desempeña un papel importante en el diseño y la presentación de contenido en línea.

Subrayado en HTML con la etiqueta <u>

La etiqueta <u> es una de las etiquetas en HTML y una de las formas más simples de agregar subrayado a texto en HTML. Todo lo que encierras dentro de esta etiqueta aparecerá subrayado en la página web. Es una técnica directa y fácil de implementar para resaltar partes específicas del texto.

Aunque la etiqueta <u> proporciona una forma rápida de agregar subrayado, es importante tener en cuenta que su uso está sujeto a convenciones de estilo y accesibilidad. En el pasado, se utilizaba comúnmente para indicar enlaces, pero esta práctica ha caído en desuso debido a preocupaciones de accesibilidad y legibilidad.

El subrayado generado por la etiqueta <u> puede confundirse fácilmente con los enlaces, lo que puede llevar a una experiencia de usuario confusa. Por esta razón, se recomienda evitar el uso de la etiqueta <u> para subrayar texto que no sea un enlace. En cambio, se prefiere utilizar otras técnicas, como la propiedad CSS text-decoration, para agregar subrayado a texto en HTML. Esto permite un mayor control sobre la apariencia del subrayado y evita posibles confusiones con los enlaces.

A pesar de estas consideraciones, la etiqueta <u> sigue siendo útil en ciertos casos, como cuando se necesita subrayar texto para propósitos de diseño o cuando se está siguiendo un estilo específico de marca. Sin embargo, es importante utilizarla con moderación y considerar cuidadosamente su impacto en la usabilidad y accesibilidad del sitio web.

Ejemplo

Veamos un pequeño ejemplo de cómo usar la etiqueta <u>:

<p>Este es un texto <u>subrayado</u>.</p>

El resultado en el navegador se verá como:

subrayado en HTML

Subrayado en HTML con la propiedad CSS text-decoration

La propiedad CSS text-decoration es otra forma de subrayar texto en HTML. Esta propiedad controla la decoración del texto en una página web, incluyendo el subrayado. Simplemente establece el valor de la propiedad text-decoration a underline. Por ejemplo:

<p style="text-decoration: underline;">Este es un texto subrayado.</p>

El resultado en el navegador será el mismo que con la etiqueta <u>.

¿Por qué subrayar texto en HTML?

El subrayado es una técnica común para resaltar partes del texto y darles mayor importancia. Se utiliza para señalar links o enlaces, aunque en el ámbito digital su uso está disminuyendo. Sin embargo, sigue siendo útil para resaltar texto incorrecto, títulos o nombres propios.

Este es una herramienta útil para enfatizar texto en una página web. Ya sea utilizando la etiqueta o la propiedad CSS text-decoration, puedes agregar fácilmente subrayado a tus elementos de texto.

¿Quieres aprender más sobre HTML y otras tecnologías web? Únete al Bootcamp de KeepCoding y obtén las habilidades que necesitas para destacar en el sector tecnológico. ¡Tu cambio de vida te espera!

Alberto Casero

Alberto Casero es CTO en Watium, Fundador de Kas Factory & Coordinador del Bootcamp en Desarrollo Web.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado