Les hyperliens HTML
Les hyperliens sont l'essence même d'un document HTML. Ils servent à relier les documents les uns aux autres via l'élément a et ses attributs. Il existe plusieurs types de liens.
Liens internes :
Il s'agit tout simplement d'un lien dont la cible est un document interne d'un site. On y indique en toute logique le lien, dossier ou répertoire où se trouve la cible. Notez la présence de l'attribut href, indispensable pour cibler un lien :
<a href="ma-page-cible.html">Lien menant vers une page interne</a>
Selon l'emplacement des fichiers, dossiers et autres répertoires de votre site, il faudra reculer dans l'arborescence du site de cette manière :
<a href="../ma-page-cible.html">Lien menant vers une page interne</a>
Liens externes :
Pour créer un lien externe, c'est-à-dire une cible extérieure, nous allons utiliser le même élément ainsi que le même attribut.
<a href="https://www.google.com/">Lien menant vers la page d'accueil de Google</a>
On associe souvent l'attribut target à un lien externe avec sa valeur _blank, créant un nouveau contexte de navigation. Autrement dit, lorsque l'on clique sur le lien, cela ouvre un nouvel onglet. Pour des raisons de sécurité et d'accessibilité, il est préférable d'occulter l'attribut target ou alors de l'utiliser en corrélation avec l'attribut rel et la valeur noopener.
<a href="https://www.google.com/" target="_blank" rel="noopener">Lien menant vers la page d'accueil de Google</a>
Un autre attribut que vous pourrez rencontrer dans les liens internes ou externes est title. Comme l'attribut target, il est à utiliser avec parcimonie dans le sens où dans bien des cas il est redondant (souvent il répète le texte du lien) provoquant des problèmes d'accessibilité.
Les ancres :
Les ancres permettent de créer des raccourcis. C'est souvent le cas de longues pages proposant un sommaire. On peut alors directement cliquer sur un lien qui va mener vers une partie précise de la page au moyen d'un identifiant (attribut id) possédant un nom unique (celui que vous voudrez) :
<ul>
<li><a href="#ancre1">Lien</a></li>
<li><a href="#ancre2">Lien</a></li>
<li><a href="#ancre3">Lien</a></li>
</ul>
<p id=ancre1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec felis nec dui varius dictum. Morbi in orci ac tellus molestie condimentum. Integer bibendum, libero nec accumsan pharetra, turpis quam imperdiet velit, sit amet rhoncus turpis nibh at erat.</p>
<p id=ancre2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec felis nec dui varius dictum. Morbi in orci ac tellus molestie condimentum. Integer bibendum, libero nec accumsan pharetra, turpis quam imperdiet velit, sit amet rhoncus turpis nibh at erat.</p>
<p id=ancre3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec felis nec dui varius dictum. Morbi in orci ac tellus molestie condimentum. Integer bibendum, libero nec accumsan pharetra, turpis quam imperdiet velit, sit amet rhoncus turpis nibh at erat.</p>
Lien d'envoi d'email :
Il est possible de permettre à l'utilisateur de vous contacter par message électronique en cliquant sur un lien hypertexte. Pour ce faire, il faut une fois de plus utiliser l'attribut href ainsi que la valeur mailto.
<a href="mailto:contact@guyom-design.com">Envoyer un courriel à personne</a>
Vous pouvez également fournir d'autres informations comme le sujet du message par exemple. Plus d'informations à ce sujet.
Lien de téléchargement :
Vous pouvez permettre à vos visiteurs de télécharger un document (un pdf par exemple), une image, un fichier texte... avec l'attribut HTML5 download. Cet attribut indique au navigateur de télécharger la ressource à disposition, au lieu de simplement l'afficher, comme c'est le cas si la ressource se trouve dans un simple lien interne.
Lien de contact téléphonique :
Pour créer un lien pointant vers un numéro de téléphone, il nous faudra utiliser la valeur tel: à l'intérieur de l'attribut href. Il nous faudra également déclarer un indicatif qui varie selon les pays (en France il s'agit de +33).
<a href="tel:+330110011001">Me contacter par téléphone</a>
💡 Ne négligez pas ce type de lien, il est facile à mettre en place et s'avère très pratique sur les terminaux mobiles.