Les liens en HTML : la balise <a>

La balise <a> nommée ancre permet de faire d'un texte (une lettre, un mot ou un groupe de mots), d'une image ou de tout autre objet un lien vers un autre fichier HTML ou des fichiers dans d'autres formats (PDF, zip, exe, dmg, etc.).

Cette balise est obligatoirement accompagnée de l'attribut href pour indiquer le nom du fichier et le chemin d'accès à ce fichier.
Le nom du fichier et son chemin d'accès constituent une URL qui peut être de deux types, les URL absolues et les URL relatives qui seront détaillées plus bas.

Pour en savoir plus sur les URL : site MDN (URL).

L'écriture de la balise <a> est donc de cette forme : <a href="URL">Mon lien</a>.
Voici quelques exemples de liens :

• Lien pour accéder à un fichier HTML à l'aide d'une URL absolue : <a href="https://facdeshumanites.univ-lyon3.fr/master-communication-digitale">Master Communication digitale</a> (Communication digitale)
• Lien pour accéder à un fichier HTML à l'aide d'une URL relative : <a href="balise-html.html">Les balises HTML</a> (Les balises HTML)
• Lien pour accéder à un fichier HTML à l'aide d'une URL relative depuis une image : <a href="balise-html.html"><img src="img/HTML5_Logo_32.png" alt="Logo HTML5"></a> ()
• Lien pour accéder à un fichier PDF à l'aide d'une URL absolue : <a href="https://www.tutorialspoint.com/html/pdf/html_entities.pdf">Entités HTML</a> (Entités HTML)
• Etc.

1 - Les URL absolues

Les URL absolues sont des adresses qui indiquent le chemin d'accès à un fichier depuis le dossier racine.
Pour un ordinateur, le dossier racine peut être C: sur Windows et Users sur Mac.

Comme il a été dit en cours, dans le cadre d'un site Web, le dossier racine est le dossier www auquel on accède à l'aide du nom de domaine.
Par exemple, pour le site de l'université Lyon 3, le dossier racine est accessible à partir de l'adresse https://www.univ-lyon3.fr.
Ainsi, toutes les URL absolues pointant sur un des fichiers du site de l'université commencent par https://www.univ-lyon3.fr (ex. https://www.univ-lyon3.fr/campus-de-la-manufacture-des-tabacs)

À la suite du nom de domaine, on écrit la liste des dossiers en les séparant du caractère / qui signifie "à l'intérieur de", jusqu'à l'accès au fichier qui termine l'URL :
https://www.nom-de-domaine.fr/dossier-1/dossier-2/dossier-n/nom-du-fichier.html.
Notez que, pour des raisons de sécurité, l'URL peut masquer le nom des fichiers ou les remplacer par des chaines de caractères "exotiques".

2 - Les URL relatives

Les URL relatives permettent également d'accéder à un fichier en précisant la liste des dossiers pour le trouver, mais dans une autre logique.
En effet, le point de départ n'est plus le dossier racine, mais le fichier dans lequel est écrite l'URL.

Par exemple, imaginons le lien suivant écrit dans un fichier nommé les-tartes.html : <a href="recettes/chocolat/tarte-chocolat.html">Les tartes au chocolat</a>.
On constate que l'URL ne commence pas par un nom de domaine, mais par le nom d'un dossier : recettes.
Le navigateur ou tout autre programme lisant le fichier les-tartes.html dans lequel est écrit ce lien recherchera le dossier recettes qui doit être situé au même endroit que le fichier les-tartes.html.
Une fois le dossier recettes trouvé, il continuera la lecture de l'URL et ouvrira le dossier chocolat pour finalement accéder au fichier tarte-chocolat.html et l'ouvrir.

Ci-dessous, l'exemple en image :

Étudions le cas où nous devons faire un lien cette fois-ci dans le fichier tarte-chocolat.html pour retrouver le fichier les-tartes.html en utilisant le système des URL relatives.
On se retrouve dans une impasse puisqu'il va falloir utiliser une URL pour "remonter" les dossiers jusqu'à se situer au même endroit que le fichier les-tartes.html. Pour cela, on va faire appel à une notation particulière pour indiquer au navigateur de parcourir le dossier parent : "../".
Appliqué à notre exemple, voici ce que l'on pourrait écrire comme lien dans le fichier tarte-chocolat.html pour retrouver le fichier les-tartes.html :
<a href="../../les-tartes.html">Les tartes</a>

Explication :
En partant du fichier tarte-chocolat.html la notation "../" permet d'accéder au dossier recettes qui contient uniquement le dossier chocolat. Il faut donc rajouter une deuxième notation "../" pour se retrouver dans le dossier parent qui contient le dossier recettes et notre fichier ciblé les-tartes.html.

Ci-dessous, l'exemple en image :

3 - Les liens de navigation dans une même page : anchor

Dans des situations très particulières, notamment quand la page contient beaucoup de contenu (ce qui n'est pas conseillé pour le référencement de la page), on peut ajouter des liens pour que le navigateur fasse défiler la page jusqu'à l'endroit que l'on veut atteindre.
Pour cela, l'URL doit contenir le chemin et le nom du fichier de la page et doit être suivie du signe "#"et d'un nom sans espace.
Ce nom devra être réécrit dans une balise qui correspond à l'endroit que le navigateur doit atteindre, dans une balise à l'aide de l'attribut "id".

Exemple :
Imaginons que nous voulons faire un lien qui permet d'accéder directement au titre (balise <h1>) de cette page : Les liens en HTML : la balise <a>.
il faudrait écrire :

1. Le lien : <a href="lien.html#chapitre-liens-en-html">Les liens en HTML</a>
2. Dans la balise ouvrante <h1> : <h1 id="chapitre-liens-en-html">

Vous pouvez tester cet exemple en cliquant sur ce lien : Les liens en HTML