, o, lo que menos se prefiere, con el elemento HTML U.subrayado html){kind=link}
Subrayado html:
Esta página muestra cómo crear un subrayado bajo cualquier texto u otro elemento HTML.
Hay dos formas principales de crear un subrayado. El método que use dependerá de lo que intente lograr. En realidad, hay tres formas principales, pero una de ellas está desactualizada. Más sobre eso a continuación.
Texto de subrayado
Puede usar la propiedad de decoración de texto de CSS para especificar que debe aparecer un subrayado debajo de su texto. Me gusta esto:
<p style = “text-decoration: underline;”> Este texto ha sido subrayado </ p>
(Este texto ha sido subrayado)
Eliminar un subrayado
La propiedad de decoración de texto se usa comúnmente para eliminar los subrayados de los hipervínculos. Para hacer eso, simplemente use text-decoration: none ;.
Para demostrar esto, el siguiente ejemplo utiliza un párrafo que ha sido subrayado, pero que también contiene texto dentro de un elemento <span> al que se le quitó el subrayado.
<p> <a href=”//www.html.am/html-codes/links/”> Enlace normal </a> </ p>
(Enlace normal)
<p> <a href=”https://www.quackit.com/css/css_hyperlinks.cfm” style=”text-decoration:none;”> Enlace con subrayado eliminado </a> </ p>
(Enlace eliminado)
Subrayar cualquier elemento HTML
Puede usar la propiedad CSS border-bottom para agregar un subrayado a cualquier elemento HTML. En realidad, no es realmente un subrayado. Es simplemente un borde que se extiende a lo largo de la parte inferior del elemento. Aquí hay un ejemplo:
<p style = “border-bottom: 1px solid black;”> Este párrafo tiene un borde inferior. </ p>
(Este párrafo tiene un borde inferior)
Lo bueno de la propiedad de borde inferior (como con todas las propiedades de borde de CSS) es que puede especificar diferentes estilos para el borde. Aquí hay algunos para darle una idea:
<p style = “border-bottom: 1px solid black;”> 1 pixel, solid, black … </ p>
1 pixel, sólido, negro …
<p style = “borde inferior: 1px negro punteado;”> 1 píxel, punteado, negro … </ p>
1 píxel, punteado, negro …
<p style = “border-bottom: 10px doble naranja;”> 10 píxeles, doble naranja … </ p>
10 píxeles, doble naranja …
<p style = “borde inferior: 1px verde discontinuo;”> 1 píxel, verde discontinuo … </ p>
1 píxel, verde discontinuo …
Para más estilos de borde, revisa los bordes de HTML en Quackit.
Una nota sobre usabilidad
Subrayar el texto normal en la web puede causar problemas de usabilidad. Esto se debe a que la mayoría de los usuarios de la web se han acostumbrado a asociar texto subrayado con un hipervínculo. Esto se debe a que los navegadores suelen subrayar hipervínculos (a menos que el desarrollador haya especificado lo contrario). Por lo tanto, no se recomienda subrayar el texto a menos que realmente lo necesite (o el texto sea un hipervínculo).
Si necesita enfatizar el texto, use la etiqueta <em>. Para darle más importancia al texto, usa la etiqueta <strong>. Estos elementos se crearon específicamente para esos fines, y los navegadores usualmente renderizan este texto de manera apropiada.
La eliminación de los subrayados de los hipervínculos también puede causar problemas de usabilidad. Si elige hacer esto, asegúrese de que los usuarios tengan alguna otra forma de distinguir hipervínculos del texto normal. Por lo general, el texto de diferentes colores será suficiente, pero asegúrese de usar un color que no cause problemas a los usuarios daltónicos.
Palabras claves relacionadas:subrayado html