Guide 2022 complet des liens (links)

2 Mar 2022 | Tutoriel, Web

Il y a beaucoup à apprendre sur les liens en HTML.
De l’implémentation du balisage et les attributs associés, les meilleures pratiques de style aux choses à éviter, et aux parents encore plus sophistiqués du lien : les boutons (consulter l’article dédié ici) et ce qui tout ce qui y ressemble.

Regardons de plus prêt le monde des liens et des boutons, ainsi que toutes les interactions relatives au HTML, CSS, à la conception et à l’accessibilité qui les accompagnent. Il existe de nombreux pièges et mauvaises pratiques à éviter en cours de route. En les parcourant, nous aurons une bonne mise en œuvre UX complète des deux éléments.

Les liens (Links)

Les liens (ou hyperliens) sont l’un des éléments de base les plus communs, mais aussi les plus fondamentaux et essentiels du Web. En cliquant sur un lien, vous passez à une autre page ou vous êtes déplacé à un autre endroit de la même page.

Implémentation HTML

<a href="https://www.openmydiv.fr">
  OpenMyDiv
</a>

Rendu : OpenMyDiv

C’est un lien vers une URL « pleinement qualifiée » ou « absolue ».

<a href="/maintenance-informatique-site-internet/maintenance-preventive/">
  Maintenance préventive
</a>

Rendu : Maintenance préventive

Cela peut être utile, dans le cadre d’un développement par exemple, où le nom de domaine n’est pas le même qu’en production. Les URL relatives sont très utiles pour des choses comme la navigation, mais faites attention à ne pas les utiliser dans du contenu – comme des articles de blog – lorsque ce contenu peut être lu hors site, comme dans une application ou un flux RSS.

<a href="#rel-attribut">
  Section rel
</a>

Rendu : Section rel

Lien appelé aussi bien « ancre » que « lien d’évitement » ou « liens de navigation interne » comme « Aller au menu », « Accéder à la section », « Retour en haut de page ». Permettant d’accéder au premier élément dont l’ID correspond.

Commence toujours par un #. Fonctionne uniquement si l’ID correspondante existe sur la page.

Il est assez courant, d’un point de vue UI/UX, de voir un lien « Retour au début » sur les sites, en particulier lorsque les boutons de navigation et menu sont en haut de la page, mais qu’il y a beaucoup de contenu à faire défiler (ou à parcourir).
Pour créer l’ancre, créez un lien vers l’ID d’un élément en haut de votre page vers lequel il est logique de renvoyer l’attention.

<a href="">
  Commandez ici
</a>
a:not([href]) {
  /* stylisez un lien "désactivé" */
}

Rendu : Commandez ici

Un lien sans attribut href est le seul moyen pratique de désactiver un lien. Vous avez peut-être besoin que votre lien ne devient actif qu’après la connexion ou l’inscription de l’utilisateur.
Le lien a alors aucun rôle, ne peut pas être focus et ne peut réagir avec le clavier. Il représente un emplacement où un lien aurait pu être placé, s’il avait été pertinent.

C’est une bonne pratique, pouvant éviter l’usage d’un <span> inutile.

<a href="https://www.openmydiv.fr" target="_blank" rel="noopener noreferrer">
  OpenMyDiv
</a>

Rendu : OpenMyDiv

Vous pouvez utiliser l’attribut target=“_blank“ tout seul, mais c’est vivement déconseillé. L’ajout de l’attribut rel permet de rendre plus sûr et plus rapide la navigation.
D’un point de vue accessibilité et UX, l’ouverture dans un autre onglet provoque sur mobile, une navigation contraignante et un comportement auquel l’utilisateur n’est pas prévenu.

<a href="/files/file.pdf" download>
  Download PDF
</a>

L’attribut « download » d’un lien indique au navigateur de télécharger le fichier lié plutôt que de l’ouvrir dans la page ou l’onglet en cours. C’est une bonne pratique UX.

L’attribut rel

Cet attribut sert à indiquer la relation entre le lien et la cible.

<a href="/page/3" rel="next">Next</a>
<a href="/page/1" rel="prev">Previous</a>

<a href="/topics/" rel="directory">All Topics</a>

Voici quelques exemple de son utilisation

  • rel=“alternate“ : Version alternative du document.
  • rel=“author“ : Auteur du document.
  • rel=“help“ : Une ressource pour aider le document.
  • rel=“licence“ : Licence et informations légales.
  • rel=“manifest“ : Document Web App Manifeste.
  • rel=“next“ : Document suivant dans la série.
  • rel=“prev“ : Document précédent dans la série.
  • rel=“search“ : Un document destiné à effectuer une recherche dans le document actuel.

Il existe également certains attributs rel destinés à informer les moteurs de recherche :

  • rel=“sponsored“ : Marquer les liens qui sont des publicités ou des placements payants (communément appelés liens payants) comme étant sponsorisés.
  • rel=“ugc“ : Pour le contenu généré par l’utilisateur qui n’est pas particulièrement fiable, comme les commentaires et les messages de forum.
  • rel=“nofollow“ : Indique au moteur de recherche d’ignorer ce lien et de ne pas associer ce site à l’emplacement vers lequel il pointe.

Et aussi quelques attributs rel qui sont plus orientés vers la sécurité :

  • rel=“noopener“ : Empêche un nouvel onglet d’utiliser la fonction JavaScript window.opener, qui pourrait potentiellement accéder à la page contenant le lien (votre site) pour effectuer des actions malveillantes, comme le vol d’informations ou le partage de code infecté. L’utilisation de cette option avec target=“_blank“ est souvent une bonne idée.
  • rel=“noreferrer“ : Empêche d’autres sites ou services de suivi (par exemple, Google Analytics) d’identifier votre page comme la source du lien cliqué.

Vous pouvez utiliser plusieurs valeurs séparées par des espaces si nécessaire (par exemple, rel=“noopener noreferrer“). Enfin, certains attributs rel proviennent de la norme microformats ou de l’indieweb, par exemple :

  • rel=“directory“ : Indique que la destination de l’hyperlien est une liste de répertoire contenant une entrée pour la page actuelle.
  • rel=“tag“ : Indique que la destination de cet hyperlien est un “tag“ (ou mot-clé/sujet) désigné par l’auteur pour la page actuelle.
  • rel=“paiement“ : Indique que la destination de cet hyperlien est de montrer ou de soutenir la page actuelle.
  • rel=“help“ : Indique que la ressource à laquelle renvoie le lien est un fichier d’aide ou une FAQ pour le document en cours.
  • rel=“me“ : Indique que sa destination représente la même personne ou entité que la page actuelle.

Les rôles ARIA

Le rôle par défaut d’un lien est le lien, donc vous n’avez pas besoin de faire :

<a role="link" href="/">  Lien </a>

Rendu : Lien

Devriez-vous utiliser l’attribut title ?

Pas vraiment, cela pose de gros problèmes d’accessibilité, difficilement personnalisable car lié au terminal et OS utilisé. Même pas affiché sur mobile.

Si un lien a uniquement une icône à l’intérieur, il peut se présenter de cette manière :

<a href="/">😃</a>

<a href="/">
  <svg> ... </svg>
</a>

rendu : 😃
Cela ne constitue pas une information contextuelle suffisante sur le lien, en particulier pour des raisons d’accessibilité, mais potentiellement pour tout le monde.

<a href="/">
  <!-- cache l'icon des logiciels de reconnaissance visuel -->
  <svg aria-hidden="true" focusable="false"> ... </svg>
  <!-- Agis comme un label caché de la vue -->
  <span class="visu-cache">Texte utile du lien</span>
</a>

visu-cache est une classe qui permet de cacher le texte avec du CSS :

.visu-cache {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Une image peut être cliquable si vous l’enveloppez autour d’un lien.

<a href="https://www.openmydiv.fr/">
  <img src="/wp-content/uploads/2022/01/LOGO-full-openmydiv-agence-web-paris.webp" alt="Logo openmydiv">
</a>

rendu : Logo openmydiv

Voici un exemple de lien brut, sans style personnalisé :

lien hypertexte dans un texte

Vous pouvez donc personnaliser entièrement vos liens, la couleur, taille, forme, effet au survol, au clic…
Voici comment transformer tous vos liens en rouge :

a {
  color: red;
}
<a href="/"> Lien </a>

rendu : Lien

Cibler certain lien :

nav a { ... }

article a { .. }

États des liens

Les liens peuvent être focus. En d’autres termes, ils peuvent être sélectionnés à l’aide de la touche Tab du clavier. Les liens sont peut-être l’élément le plus courant pour lequel vous concevrez très consciemment les différents états, y compris l’état :focus.

  • :hover : Pour le style lorsque le pointeur de la souris se trouve sur le lien.
  • :visited : Pour le style lorsque le lien a été suivi, dans la mesure où le navigateur s’en souvient. La capacité de stylisation est limitée pour des raisons de sécurité.
  • :link : Pour le style lorsqu’un lien n’a pas été visité.
  • :active : Pour le style lorsque le lien est enfoncé (par exemple, lorsque le bouton de la souris est enfoncé ou que l’élément est touché sur un écran tactile).
  • :focus : Très important ! Les liens doivent toujours avoir un style focus. Si vous choisissez de supprimer le contour bleu par défaut que la plupart des navigateurs appliquent, utilisez également ce sélecteur pour réappliquer un style de mise au point visuellement évident.

Les états sont cumulables et vous pourriez vous retrouver avec :

a:focus:hover { ... }

Exemple de style sur le hover

a {
  box-shadow: inset 0 0 0 0 #54b3d6;
  color: #54b3d6;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  box-shadow: inset 100px 0 0 0 #54b3d6;
  color: white;
}

rendu : Hover ce lien

Pour aller plus loin

Infographie sur les résultats des géants du web
Mar 11 2022

[Infographie] Chiffres clés des géants de l’internet en 2022

Les réseaux sociaux et services du web ne font qu'augmenter depuis ces 10 dernières années, retrouvez ici dans cette infographie ce qu'ils représentent : Chiffres clés...
Développements sur mesure agence web Openmydiv
Déc 06 2021

Les pour et les contre du long défilement (Long Scrolling)

Les concepteurs de sites Web adoptent la tendance des sites à long défilement pour leurs divers avantages. Mais un site Web à page unique n'est peut-être pas le bon...
Rédiger une documentation utilisateur pour site web
Oct 14 2021

Documentation utilisateur site web

Qu'est-ce qu'une documentation utilisateur ? Une documentation utilisateur, c'est un support qui décrit l'ensemble du fonctionnement d'une solution d'un point de vue...
Rédiger une documentation technique pour site web
Oct 13 2021

Documentation technique site web

À quoi sert la documentation technique d'un site web ? La documentation technique va permettre d'aborder tous les aspects techniques d'un projet web. Elle va décrire...
Audit réalisé avec Ligthouse d'un site optimisé et performant
Oct 13 2021

À quelle vitesse un site doit-il charger en 2021 ?

Voici des conseils pour booster votre site internet. Le chargement rapide est primordial pour l’expérience utilisateur, mais également pour les moteurs de recherche....
Développements sur mesure agence web OpenMyDiv
Sep 10 2021

Pourquoi avoir un site Internet est-il si important ?

Un site Internet a une importance capitale pour les entreprises (de toutes les tailles) car donne beaucoup d’avantages marketing que nous allons détailler dans cet...
Développements d'application et de site sur mesure
Juil 17 2021

Commentaire JavaScript

Un commentaire JavaScript permet aux développeurs de ne pas faire afficher une partie de code. Ainsi, cette partie ne sera pas interprétée par le navigateur. Ils sont...
Développements d'application et de site sur mesure
Juil 17 2021

Commentaire HTML

Un commentaire en HTML s'adresse aux développeurs et n'est pas affiché par les navigateurs (n'apparais donc pas sur la page internet). Ils sont mis directement dans le...
Optimisation site agence web OpenMyDiv
Juil 09 2021

6 choses à savoir sur WordPress

Voici une infographie concernant les avantages que représente la solution Wordpress (CMS le plus utilisé dans le monde) Référencement naturel (SEO), tarifs, chiffres...
Création site agence web OpenMyDiv prestataire informatique
Avr 18 2021

Comment se faire de l’argent sur internet

Étant un secteur en perpétuelle évolution, Internet nous ouvre les portes vers un nouveau mode de communication. Celui-ci nous converge vers une société de plus en plus...