initiation à HTML5
Naviguer grâce aux liens
Les liens sont des éléments essentiels de la page web. Ils permettent de passer d'une page à l'autre ou d'aller à un endroit de la même ou d'une autre page, voire de rediriger vers un site externe ou un fichier à télécharger. Sans lien, pas de web.
Liens entre page
Les liens reposent sur l'utilisation de l'élément a combiné à l'attribut href qui détermine la cible du lien c'est-à-dire la page vers laquelle on souhaite faire aller le visiteur. Cela prend la forme suivante :
<a href="nom_de_page_ou_site.html">Texte du lien</a>
"Texte du lien" est le texte qui s'affiche par défaut en bleu et souligné sur lequel la personne pourra cliquer. Il est habituel de changer la couleur des liens grâce au CSS.
Il est aussi possible de faire des liens sur des images de la même façon. Dans ce cas, la balise d'image sera juste insérée en tant que contenu de la balise a :
<a href="nom_de_page_ou_site.html"><img src="mon_image.jpg" alt="Vers mon site" /></a>Les liens peuvent aussi être placés dans des listes déroulantes et certains sites internationaux ou de vente en ligne utilisent abondamment e système qui nécessitera l'utilisation de javascript pour rendre la liste reliable aux liens.
Lien vers des ancres nommées
En HTML5 l'attribut name de l'élément a est déclaré obsolète. L'attribut id prend maintenant sa place pour servir de référence à l'élément à rejoindre. Pour référencer cet élément comme destination du lien il faudra le noter en valeur de l'attribut href précédé d'un #. Par exemple, pour un élément :
<p id="note1">Ceci est une note importante</p>
on pourra y accéder par le lien:
<a href="#note1">Voir note</a>
Si l'emplacement à rejoindre est dans une autre page html, il suffira de l'ajouter de la même façon à la suite de l'URL :
<a href="annexes.html#note1">Voir note</a>
Autres attributs intéressants
Le lien étant un élément très important d'une page web, il nous semble important de soigner leur contenu. Pour cela, le contenu de l'attribut href par le biais d'une URL bien choisie et d'un texte de lien partant de la même racine peuvent être secondés par d'autres attributs renseignant sur le rôle du lien et la façon dont il doit être traité.
- hreflang
- renseigne sur la langue de la page de destination. Cela peut être important dans le cas d'un site multilingue et éventuellement pour un traitement en feuille de style. Ils prennent la forme langue-pays comme dans fr-FR (français de france), fr-BE (français belge), en-GB (anglais de Grande-bretagne).
- media
- plus difficile que la précédente, permet de définir pour quel type de media la page liée est conçue tel que défini dans la section media Queries.
- download
- si cet attribut est présent, alors la destination du lien est considérée comme étant un élément à télécharger.
- rel
- De ce côté, l'attribut rel permet de définir quel est le rôle du ficher lié par rapport au fichier actuel. Il peut posséder une valeur textuelle, mais quelques valeurs par défaut sont proposées pour normaliser les référents : alternate, author, bookmark, help, icon, license, next, prev, nofollow, noreferrer, prefetch, stylesheet, tag, search.
Il n'est pas rare de mettre des info-bulles qui apparaissent lorsque
la souris est statique au-dessus du lien de manière à informer le
visiteur de l'objectif de ce lien, éventuellement avec des informations
qui différent de celle du texte principal. Dans ce cas, il faudra
utiliser l'attribut global title qui n'est pas spécifique à l'élément a mais qui sera particulièrement pratique ici.
<a href="" title="Magnifique site sur les logiciels libres" hreflang="fr">Flossmanuals francophone</a>
Le résultat pourra différer selon les navigateurs mais se rapprochera de ceci :
Lien de téléchargement download
De nombreux sites web proposent des fichiers à télécharger. C'est par exemple le cas de FlossManuals. Pour 99% des cas, les intégrateurs se contentent d'un lien classique avec le nom du fichier à télécharger en valeur d'attribut href.. Mais le HTML5 met à disposition un attribut spécifique pour cela :
- Pour éviter de tenter de faire un suivi des liens, en particulier en terme de référencement
- Pour forcer le navigateur à télécharger l'élément quand bien même il pourrait l'afficher, par exemple dans le cas d'image, de fichiers son ou video, voire même PDF.
Le code obtenu pour cette action est simple, il suffit d'ajouter l'attribut download.
<a href="toto.pdf" download>Livre sur toto</a>
Dans ce cas, le lien ne sera pas suivi, et le navigateur n'essaiera pas d'afficher la page même s'il en la capacité. Il provoquera immédiatement le téléchargement du fichier.
Définir le type de relation avec l'attribut rel
Nous avons déjà vu l'attribut rel dans le cas de la balise d'entete link. Elle pourra aussi servir dans les liens de la page. Il va permettre de spécifier le rôle d'un lien par rapport au contenu de la page à l'aide mots clés prédéfinis.
alternate
Permet de fournir en argument un fichier alternatif au document actuel. Cela peut être un fichier rss ou encore une version PDF de la page.
author
Spécifie un renvoi vers la page de l'autre
help
Fournit un lien vers l'aide contextuelle
license
Indique la licence du document référencé
next
Indique que le document actuel fait parti d'une série et qu'il peut être explicitement poursuivi en suivant ce lien
noreferrer
Demande au navigateur de ne pas associer les informations de suivi après ce lien
prefetch
Spécifie que le contenu lié doit être mis en cache dès que possible
prev
Indique que le document actuel fait parti d'une série et que la partie précédente est accessible par ce lien
search
mentionne que le contenu lié contient des informations de recherches
tag
Applique un mot clé à la ressource liée