De forma predeterminada, el contenido de texto vinculado a HTML el uso del elemento "ancla" o se estiliza con un subrayado. A menudo, los diseñadores web eligen eliminar este estilo predeterminado eliminando el subrayado.
Razones a favor y en contra del subrayado
A muchos diseñadores no les importa el aspecto del texto subrayado, especialmente en bloques de contenido densos con muchos enlaces. Todas esas palabras subrayadas realmente pueden interrumpir el flujo de lectura de un documento. Muchos han argumentado que esos subrayados en realidad hacen que las palabras sean más difíciles de distinguir y leer rápidamente debido a la forma en que el subrayado cambia las formas naturales de las letras.
Sin embargo, existen ventajas legítimas de conservar estos subrayados en los enlaces de texto. Por ejemplo, cuando navega a través de grandes bloques de texto, los enlaces subrayados junto con el contraste de color adecuado facilitan a los lectores el escaneo inmediato de una página y ver dónde están los enlaces.
Si decide eliminar enlaces del texto (un proceso simple que cubriremos en breve), asegúrese de encontrar formas de darle estilo a ese texto para diferenciar lo que es un enlace de lo que es texto sin formato. Esto se hace más a menudo con contraste de color, pero el color por sí solo puede representar un problema para los visitantes con deficiencias visuales como el daltonismo. Dependiendo de su forma particular de daltonismo, el contraste puede perderse por completo, impidiéndoles ver la diferencia entre el texto vinculado y no vinculado. Es por eso que el texto subrayado todavía se considera la mejor manera de mostrar enlaces.
Entonces, ¿cómo desactivas un subrayado si aún quieres hacerlo? Dado que esta es una característica visual que nos preocupa, pasaremos a la parte de nuestro sitio web que maneja todo lo visual: CSS.
Utilice hojas de estilo en cascada para desactivar los subrayados en los enlaces
En la mayoría de los casos, no busca desactivar un subrayado en un solo enlace de texto. En cambio, su estilo de diseño probablemente requiera que elimine los subrayados de todos los enlaces. Haría esto agregando estilos a su hoja de estilo externa.
a {
decoración de texto: ninguna;
}
¡Eso es! Esa simple línea de CSS desactivaría el subrayado (que en realidad usa la propiedad CSS para "text-decoration") en todos los enlaces.
También puede ser más específico con este estilo. Por ejemplo, si solo desea desactivar el subrayado o los enlaces dentro del elemento "nav", puede escribir:
nav a {
decoración de texto: ninguna;
}
Ahora, los enlaces de texto en la página obtendrían el subrayado predeterminado, pero aquellos en la navegación lo eliminarían.
Una cosa que muchos diseñadores web eligen hacer es volver a "activar" el enlace cuando alguien pasa el cursor sobre el texto. Esto se haría usando: hover Pseudoclase CSS, como esto:
a {
decoración de texto: ninguna;
}
a: hover {
decoración de texto: subrayado;
}
Usando CSS en línea
Como alternativa a realizar cambios en una hoja de estilo externa, también puede agregar los estilos directamente al elemento en sí en HTML.
El problema con este método es que coloca información de estilo dentro de su estructura HTML, lo cual no es una práctica recomendada. El estilo (CSS) y la estructura (HTML) deben mantenerse separados.
Si desea que se elimine el subrayado de todos los enlaces de texto de un sitio, agregue esta información de estilo a cada enlace de forma individual significaría que se agregaría una buena cantidad de marcado adicional a los código. Esta hinchazón de la página puede ralentizar el tiempo de carga de un sitio y hacer que la administración general de la página sea mucho más desafiante. Por estas razones, es preferible recurrir siempre a una hoja de estilo externa para todas las necesidades de estilo de página.
Para concluir
Tan fácil como eliminar el subrayado de los enlaces de texto de una página web, también debe tener en cuenta las consecuencias de hacerlo. Si bien puede limpiar el aspecto de una página, puede hacerlo a expensas de la usabilidad general. Tenga esto en cuenta la próxima vez que considere cambiar las propiedades de "decoración de texto" de una página.