Par défaut, le contenu textuel qui est lié au HTML l'utilisation de l'élément ou « ancre » est stylisée avec un soulignement. Souvent, les concepteurs Web choisissent de supprimer ce style par défaut en supprimant le soulignement.
Raisons pour et contre le soulignement
De nombreux concepteurs ne se soucient pas de l'apparence du texte souligné, en particulier dans les blocs de contenu denses avec beaucoup de liens. Tous ces mots soulignés peuvent vraiment interrompre le flux de lecture d'un document. Beaucoup ont fait valoir que ces soulignements rendent les mots plus difficiles à distinguer et à lire rapidement en raison de la façon dont le soulignement modifie les formes naturelles des lettres.
Il y a cependant des avantages légitimes à conserver ces soulignements sur les liens de texte. Par exemple, lorsque vous parcourez de gros blocs de texte, les liens soulignés associés à un contraste de couleurs approprié permettent aux lecteurs de numériser immédiatement une page et de voir où se trouvent les liens.
Si vous décidez de supprimer des liens du texte (un processus simple que nous aborderons sous peu), assurez-vous de trouver des moyens de styliser ce texte pour toujours différencier ce qui est un lien de ce qui est du texte brut. Cela se fait le plus souvent avec contraste de couleur, mais la couleur à elle seule peut poser problème aux visiteurs ayant une déficience visuelle comme le daltonisme. En fonction de leur forme particulière de daltonisme, le contraste peut être totalement perdu sur eux, les empêchant de voir la différence entre le texte lié et non lié. C'est pourquoi le texte souligné est toujours considéré comme le meilleur moyen d'afficher les liens.
Alors, comment désactiver un soulignement si vous le souhaitez toujours? Puisqu'il s'agit d'une caractéristique visuelle qui nous intéresse, nous allons nous tourner vers la partie de notre site Web qui gère tout ce qui est visuel - CSS.
Utiliser des feuilles de style en cascade pour désactiver les soulignements sur les liens
Dans la plupart des cas, vous ne cherchez pas à désactiver le soulignement sur un seul lien texte. Au lieu de cela, votre style de conception vous oblige probablement à supprimer les soulignements de tous les liens. Vous feriez cela en ajoutant des styles à votre feuille de style externe.
une {
texte-décoration: aucun ;
}
C'est ça! Cette simple ligne de CSS désactiverait le soulignement (qui utilise en fait la propriété CSS pour "text-decoration") sur tous les liens.
Vous pouvez également être plus précis avec ce style. Par exemple, si vous souhaitez uniquement désactiver le soulignement ou les liens à l'intérieur de l'élément "nav", vous pouvez écrire:
nav a {
texte-décoration: aucun ;
}
Désormais, les liens de texte sur la page obtiendraient le soulignement par défaut, mais ceux de la navigation l'auraient supprimé.
Une chose que de nombreux concepteurs de sites Web choisissent de faire est de réactiver le lien lorsque quelqu'un survole le texte. Cela serait fait en utilisant le :hover pseudo-classe CSS, comme ça:
une {
texte-décoration: aucun ;
}
a: survolez {
texte-décoration: soulignement ;
}
Utilisation de CSS en ligne
Au lieu d'apporter des modifications à une feuille de style externe, vous pouvez également ajouter les styles directement à l'élément lui-même dans HTML.
Le problème avec cette méthode est qu'elle place les informations de style dans votre structure HTML, ce qui n'est pas une bonne pratique. Le style (CSS) et la structure (HTML) doivent être séparés.
Si vous souhaitez que tous les liens textuels d'un site soient supprimés, ajoutez ces informations de style à chaque lien sur une base individuelle signifierait qu'une bonne quantité de balisage supplémentaire serait ajoutée à votre site code. Ce gonflement des pages peut ralentir le temps de chargement d'un site et rendre la gestion globale des pages beaucoup plus difficile. Pour ces raisons, il est préférable de toujours se tourner vers une feuille de style externe pour tous les besoins de style de page.
En clôture
Aussi simple qu'il soit de supprimer le soulignement des liens de texte d'une page Web, vous devez également être conscient des conséquences de cette opération. Bien qu'il puisse effectivement nettoyer l'apparence d'une page, il peut le faire au détriment de la convivialité globale. Tenez-en compte la prochaine fois que vous envisagerez de modifier les propriétés de « décoration de texte » d'une page.