Comment supprimer les soulignés des liens

Par défaut, le contenu de texte lié au HTML à l'aide de l'élément ou "ancre" est stylé avec un soulignement. Souvent, les concepteurs Web choisissent de supprimer ce style par défaut en supprimant 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 briser le flux de lecture d'un document. Beaucoup ont fait valoir que ces soulignements rendent en réalité les mots plus difficiles à distinguer et à lire rapidement en raison de la manière dont ils soulignent les formes de lettre naturelles.

Conserver ces soulignements dans les liens de texte présente toutefois des avantages légitimes. Par exemple, lorsque vous parcourez de grands blocs de texte, les liens soulignés, associés à un contraste de couleur 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 les liens du texte (processus simple que nous aborderons sous peu), veillez à trouver des moyens de styliser ce texte afin de différencier le lien d'un texte brut. Cela se fait le plus souvent avec le contraste de couleur susmentionné, mais la couleur seule peut poser un problème aux visiteurs malvoyants comme le daltonisme. En fonction de leur forme particulière de daltonisme, le contraste peut être totalement perdu, ce qui les empêche de voir la différence entre un texte lié et non lié. C'est pourquoi le texte souligné est toujours considéré comme le meilleur moyen d'afficher des liens.

Alors, comment désactiver un soulignement si vous voulez toujours le faire? Comme 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 le soulignement sur les liens

Dans la plupart des cas, vous ne souhaitez pas désactiver le soulignement sur un seul lien de texte. Au lieu de cela, votre style de conception nécessite probablement que vous supprimiez les soulignés de tous les liens. Pour ce faire, ajoutez des styles à votre feuille de style externe.

une { texte-décoration: aucun;}

C'est tout! Cette simple ligne de CSS désactive le soulignement (qui utilise en fait la propriété CSS pour "text-decoration") sur tous les liens.

Vous pourriez aussi être plus spécifique 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;}

Maintenant, les liens de texte sur la page obtiendraient le soulignement par défaut, mais ceux de la navigation le supprimeraient.

Une chose que beaucoup de concepteurs de sites Web choisissent de faire est de réactiver le lien lorsque quelqu'un survole le texte. Ceci serait fait en utilisant la pseudo-classe CSS: hover, comme ceci:

une { texte-décoration: aucun;}a: hover { texte-décoration: souligné;}

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 en 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 pratique recommandée. Le style (CSS) et la structure (HTML) doivent rester séparés.

Si vous souhaitez supprimer le soulignement de tous les liens de texte d'un site, l'ajout de ces informations de style à chaque lien sur une base individuelle signifierait qu'une quantité considérable de balises serait ajoutée au code de votre site. Cette surcharge de page peut ralentir le temps de chargement d'un site et rendre la gestion globale de la page bien plus ardue. Pour ces raisons, il est préférable de toujours recourir à une feuille de style externe pour tous les besoins en matière de style de page.

En clôture

Même s'il est facile de supprimer le soulignement des liens de texte d'une page Web, vous devez également être conscient des conséquences. Bien que cela puisse en effet nettoyer l'apparence d'une page, cela peut se faire au détriment de la convivialité globale. Tenez-en compte lors de la prochaine modification des propriétés "décoration du texte" d'une page.