Después de explicar cómo subrayar en HTML, en este artículo te explicamos todo lo que debes saber para poder quitar el subrayado de un enlace HTML.
¡Despegamos!
Índice de Contenidos
Subrayado por defecto en HTML
Al programar en HTML, los navegadores suelen dar unos estilos por defecto a determinados elementos. El caso más común es el de los enlaces.
Los hipervínculos son un elemento vital de la web y resulta importante que llamen la atención, ya que deben incentivar que los usuarios hagan clic sobre los mismos. Es por ello que la mayoría de navegadores web destacan automáticamente los links creados en HTML.
Sin embargo, existen muchas formas de hacer los enlaces más atractivos y darles un estilo personalizado. Para ello, habitualmente se prescinde del subrayado HTML, como realizamos en HTML Masters para que el subrayado solo aparezca cuando pones encima el ratón.
Para lograrlo, existen diferentes técnicas que explicamos a continuación.
Quitar el subrayado de todos los enlaces HTML
La forma más rápida de quitar el subrayado de los enlaces HTML de toda la web es emplear una regla CSS.
Como bien sabrás, el estilo visual de un documento HTML se define a través del lenguaje CSS, cuyo código puede ser añadido dentro de las etiquetas HTML (en línea), entre las etiquetas <style></style> incluidas en el head o en un documento diferenciado.
En este caso, para simplificar la visualización del código, se escoge la segunda opción. Para crear la regla, emplearemos como selector la etiqueta de los enlaces (<a>), la propiedad CSS text-decoration y el valor none:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo</title>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://htmlmasters.tech/">HTML Masters</a>
</body>
</html>
Puedes copiar dicho código y guardarlo en un documento con extensión .html y abrirlo con cualquier navegador para comprobarlo.
Quitar el subrayado de un determinado grupo de enlaces
El ejemplo anterior sirve para quitar el subrayado a todos los enlaces del documento HTML. Sin embargo, puede que quieras modificar el estilo de algunos enlaces únicamente.
Para ello, lo más adecuado es asignar una clase a los enlaces a los que se les vaya a quitar el subrayado. Es decir, debes crear un atributo class y asignarle un mismo valor (inventado) a todos los enlaces que quieras modificar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo</title>
<style>
.enlace-sin-subrayado {
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://htmlmasters.tech/" class="enlace-sin-subrayado">HTML Masters 1</a>
<a href="https://htmlmasters.tech/">HTML Masters 2</a>
<a href="https://htmlmasters.tech/" class="enlace-sin-subrayado">HTML Masters 3</a>
<a href="https://htmlmasters.tech/">HTML Masters 4</a>
<a href="https://htmlmasters.tech/" class="enlace-sin-subrayado">HTML Masters 5</a>
</body>
</html>
Con el ejemplo anterior, el primero, tercero y quinto enlace no tendrán subrayado.
Quitar el subrayado de un único enlace HTML
Si lo que deseas es quitar el subrayado de un único enlace HTML, lo más adecuado es emplear un ID único a dicho enlace y emplearlo como selector CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo</title>
<style>
#enlace-sin-subrayado {
text-decoration: none;
}
</style>
</head>
<body>
<a href="https://htmlmasters.tech/">HTML Masters 1</a>
<a href="https://htmlmasters.tech/">HTML Masters 2</a>
<a href="https://htmlmasters.tech/" id="enlace-sin-subrayado">HTML Masters 3</a>
<a href="https://htmlmasters.tech/">HTML Masters 4</a>
<a href="https://htmlmasters.tech/">HTML Masters 5</a>
</body>
</html>
Se podría emplear una clase en vez de un ID, pero lo correcto es aplicar clases cuando se quiere distinguir un grupo de elementos y utilizar un ID para diferenciar a un único elemento.
Conclusión
En resumen, para evitar el subrayado automático que aplican los navegadores web a los enlaces HTML es necesario emplear un regla CSS. Para suprimir el subrayado en todos los enlaces, lo más rápido es utilizar un selector de etiqueta, apuntando a todos los elementos <a>.
Por el contrario, para apuntar a un grupo de enlaces se recomienda emplear selectores de clase y, en caso de querer modificar un único enlace, lo más correcto es emplear un ID.
Si tienes cualquier duda, ¡déjanos un comentario!
¡Hasta la próxima!
