Cours HTML / Créer des liens : chemins, ancres et adresses e-mail

Créez un lien HTML avec l'élément a et mettez sa destination dans href. La destination peut être une autre page, un fichier, un emplacement dans un document ou une adresse email. Écrivez un texte de lien qui indique aux lecteurs où ils iront.

Créez un lien de base avec a et href

Entourez le texte du lien visible avec a et placez l'URL cible dans href. Cet exemple mène au cours en français de Coding Factory sur les listes HTML. Les types de listes liées et les règles d'imbrication sont expliqués dans Listes : ul, ol, dl, et Listes Imbriquées.

<a href="https://www.codingfactory.net/fr/17944">Tutoriel sur les listes HTML</a>

« Tutoriel sur les listes HTML » est le texte visible ; l'URL est la destination. Un a sans href n'est pas un lien de navigation normal. L'utilisation de href="#" comme espace réservé peut provoquer une navigation inattendue vers le haut de la page.

Comprendre les URL absolues et relatives

Une URL absolue commençant par https:// inclut le domaine de la destination. Une URL relative peut pointer vers un fichier depuis l'emplacement du document actuel ou depuis la racine du site. Entraînez-vous à maintenir le même menu sur trois documents dans Construire un petit site web multipages.

Les chemins suivants about.html et ../contact.html sont des exemples d'exercice, pas des pages existant actuellement sur Coding Factory. Supposez que vous écrivez les liens dans lessons/index.html dans cette structure de dossiers :

site/

  contact.html

  lessons/

    index.html

    about.html

<a href="https://www.codingfactory.net/fr/17944">URL complète</a>

<a href="about.html">Page de présentation dans ce dossier</a>

<a href="../contact.html">Page de contact dans le dossier parent</a>

<a href="/fr/17944">Listes HTML sur ce site</a>

about.html est résolu par rapport au document actuel. Un chemin commençant par / est résolu à partir de la racine du site web. Les fichiers locaux file:// ont une racine différente d'un site web déployé, donc testez à nouveau les chemins relatifs après le déploiement.

Lien vers un emplacement dans un document

Donnez à l'élément de destination un id unique, puis utilisez # suivi de cette valeur dans le lien.

<a href="#contact">Aller aux coordonnées</a>



<h2 id="contact">Contact</h2>

<p>Les coordonnées se trouvent ici.</p>

Pour atteindre un emplacement dans un autre fichier, ajoutez le fragment à son URL : about.html#contact. Évitez de répéter le même id sur une seule page.

Liens vers des e-mails et nouveaux onglets

Une URL mailto: demande à l'application e-mail de l'utilisateur de créer un message. Cela peut ne pas fonctionner comme prévu si aucune application de messagerie n'est configurée.

<a href="mailto:hello@example.com">Rédiger un e-mail</a>

Pour ouvrir un site externe dans un nouvel onglet, utilisez target="_blank" et la politique rel="noopener noreferrer" du site.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"

   target="_blank" rel="noopener noreferrer">Référence de l’élément a sur MDN</a>

Choisissez un nouvel onglet lorsque cela convient à la tâche du lecteur, et clarifiez le comportement dans le texte du lien ou dans l'explication proche.

Ce que l'attribut download peut faire

L'attribut download demande au navigateur de télécharger un fichier lié. Par exemple, il peut être utilisé pour cette image hébergée sur le même site.

<a href="/wp-content/uploads/html-image-sample-lake-tree-1600-v1.webp" download>Télécharger l’image d’exemple</a>

download fonctionne avec des URL de même origine et avec des URL blob: et data:. Il ne peut pas forcer le téléchargement d'une URL régulière sur un autre site. Même pour un fichier de même origine, les paramètres du navigateur et la réponse du serveur peuvent affecter ce qui se passe.

Comportement de l'ancre et du téléchargement MDN

Tester les chemins relatifs avec trois fichiers réels

Enregistrez ces trois documents dans la structure de dossiers site/ précédente. Cet exercice vérifie la navigation entre les fichiers plutôt que l'envoi d'un vrai message de contact.

site/lessons/index.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Accueil de l’exercice sur les chemins</title>
</head>
<body>
  <h1>Accueil de l’exercice sur les chemins</h1>
  <nav aria-label="Menu de l’exercice">
    <a href="about.html">Présentation</a>
    <a href="../contact.html">Contact</a>
  </nav>
</body>
</html>

site/lessons/about.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Présentation</title>
</head>
<body>
  <h1>Présentation</h1>
  <nav aria-label="Menu de l’exercice">
    <a href="index.html">Accueil de l’exercice</a>
    <a href="../contact.html">Contact</a>
  </nav>
</body>
</html>

site/contact.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact</title>
</head>
<body>
  <h1>Contact</h1>
  <nav aria-label="Menu de l’exercice">
    <a href="lessons/index.html">Accueil de l’exercice</a>
    <a href="lessons/about.html">Présentation</a>
  </nav>
</body>
</html>

Ouvrez chaque fichier, suivez ses liens et comparez les dossiers dans la barre d'adresse. ../ remonte d'un répertoire. Si un lien échoue, résolvez-le à partir du dossier du fichier de départ au lieu de deviner un nom de fichier différent. Restaurez les valeurs dans le tableau après avoir expérimenté.

Vérifiez les liens avant de publier

• Utilisez du texte tel que « tutoriel sur les listes HTML » plutôt que « cliquez ici ».
• Testez les chemins relatifs depuis l'emplacement réel du document déployé.
• Vérifiez qu'un fragment #id correspond exactement à sa destination.
• Rappelez-vous que les liens de courrier électronique et de téléchargement dépendent du navigateur et de l'environnement utilisateur.

Voir la référence de l'élément a de MDN pour plus de détails sur les URL et les attributs.