Les liens
Les liens font partie des éléments incontournables au sein d’une page web. Particulièrement utiles dans le maillage interne pour optimiser le référencement d’un site, il est important de savoir manier cette balise le mieux possible.
Les attributs
href
L’attribut href spécifie vers quelle URL rediriger l’utilisateur au clic.
Plusieurs formats sont possibles pour cette URL.
target
L’attribut target indique au navigateur s’il doit ouvrir ce lien soit dans le même onglet _self, soit dans un nouveau _blank (appelé lien sortant).
AccessibilitéPour être accessible, un lien sortant doit indiquer visuellement que l’utilisateur va être sorti de son contexte de navigation, comme vous pouvez le voir sur ce site avec les liens vers les sources.
rel
L’attribut rel permet de spécifier un ensemble de propriétés relatives aux deux documents (ou pages web) liés par un lien.
Il en existe une multitude mais une poignée sont très importantes :
noopener
La propriété noopener indique au navigateur d’ouvrir le lien sans que le nouveau contexte de navigation créé ait accès au document qui contenait le lien.
On évite ainsi une faille de sécurité méconnue mais pourtant importante.
noreferrer
La propriété noreferrer indique au navigateur de ne pas fournir d’informations quant à la page actuelle vers la destination du lien.
Si cette option est désactivée, les propriétaires du site que vous liez peuvent savoir de quels sites proviennent leurs utilisateurs.
nofollow
La propriété nofollow indique aux moteurs de recherche de ne pas suivre ces liens.
C’est en général utilisé pour les liens sortants, l’idée étant qu’une fois le robot sur votre site, il ait le plus de mal à en sortir (ce qui est une bonne chose !).
first, last, prev et next
Les propriétés first, last, prev et next sont particulièrement utiles dans le cadre d’une pagination.
Elles indiquent au navigateur qu’il s’agit de ressources liées et paginées.
download
L’attribut download force le navigateur à télécharger cette ressource au clic sur le lien.
Particulièrement utile pour des fichiers PDF par exemple.
Cette fonctionnalité désactive néanmoins l’affichage de ce PDF dans un nouvel onglet, comme le font certainss navigateurs nativement.
ping
L’attribut ping indique au navigateur d’appeler l’URL spécifiée dans la valeur de l’attribut à chaque clic sur le lien.
Cet attribut est méconnu mais pourtant très pratique dans des contextes d’analytics.
hreflang
L’attribut hreflang indique au navigateur dans quelle langue est écrit le contenu lié, dans un format spécifique.
Formats d'url
Une URL peut se décliner en différents formats, en fonction du protocole que vous souhaitez utiliser :
- Vers une page en HTTPS :
href="https://example.com" - Vers une page en HTTP :
href="http://example.com" - Vers une page, en laissant le navigateur décider entre HTTP et HTTPS :
href="//example.com"(non recommandé) - Vers un fichier relatif à la page courante :
href="../pages/contact.html"(non recommandé) - Vers un email :
href="mailto:contact@@example.com" - Vers un téléphone (appel) :
href="tel:0123456789" - Vers un téléphone (SMS) :
href="sms:0123456789" - Vers une ancre dans la page :
href="#mon-ancre"
Le cas particulier du skip link
Dans une optique d’accessibilité et de facilité de navigation, il est préférable de mettre en place un système de skip link. Concrètement, cela permet en arrivant sur une page de directement donner le focus au contenu principal, et non pas au premier élément focusable. Le lien est caché visuellement mais accessible au clavier afin d’optimiser la navigation des gens qui utilisent uniquement leur clavier pour naviguer.
Contraintes d'accessibilité
Si vous avez l’intention d’utiliser une balise <a> sous une forme de bouton, il est nécessaire qu’elle possède une taille minimale de 44*44px.
Avec ces valeurs, vous êtes garantis à 99.99% que votre lien est accessible à l’ensemble de vos utilisateurs.