Module 1Les bases du HTML
Chapitre 5 sur 13
Les liens
Liens absolus et relatifs, nouvel onglet, ancres, mailto, tel et téléchargement.
- ≈ 150 min
- 6 leçons
- 4 vidéos
- 3 exercices
Module 1Les bases du HTML
Chapitre 5 sur 13
Liens absolus et relatifs, nouvel onglet, ancres, mailto, tel et téléchargement.
Objectifs
Avec ce chapitre, tu sauras…
<a> et l'attribut href ;./, ../, /) ;mailto:, tel: et de téléchargement ;Le « H » de HTML signifie HyperText : du texte qui contient des liens vers d'autres textes. Les liens sont donc l'idée centrale du web. Ce chapitre t'apprend à relier tes pages entre elles, à d'autres sites, à des endroits précis d'une page, et même à une adresse e-mail ou à un numéro de téléphone.
Leçon 1
<p>Toute la documentation est sur <a href="https://developer.mozilla.org/fr/">MDN Web Docs</a>.</p><p>Toute la documentation est sur <a href="https://developer.mozilla.org/fr/">MDN Web Docs</a>.</p>Vidéo · À regarder
FRApprendre le HTML - Tutoriel Pour Débutant (2h)
MaxCode · YouTube
Les liens. C'est le segment principal du chapitre : regarde-le en entier en tapant les exemples.
Vidéo · À regarder
FRHTML en 1 HEURE - Formation HTML complète en 2025
Melvynx · YouTube
Leçon 2
| Type | Forme | Quand l'utiliser |
|---|---|---|
| absolu | adresse complète : https://www.site.com/page.html | vers un autre site |
| relatif | chemin depuis la page actuelle : contact.html, ../index.html | vers une page de ton site |
| Je suis dans… | Je veux aller vers… | href |
|---|
Leçon 3
Leçon 4
href | Destination |
|---|---|
#projets | l'élément id="projets" de la même page |
cv.html#projets | l'élément id="projets" de la page cv.html |
# ou #top | le haut de la page |
Leçon 5
| Lien | Effet | Exemple |
|---|---|---|
mailto: | ouvre le logiciel de messagerie | <a href="mailto:contact@site.ma">Écrire</a> |
mailto: + sujet | pré-remplit l'objet | href="mailto:contact@site.ma?subject=Devis" |
tel: | lance un appel (sur mobile) | <a href="tel:+212600000000">Appeler</a> |
download |
Leçon 6
Vidéo · À regarder
ENHTML Full Course for Beginners | Complete All-in-One Tutorial | 4 Hours
Dave Gray · YouTube
1Quel attribut contient la destination d'un lien ?
2../index.html signifie…
3Pour aller à l'élément id="faq" de la même page :
4Avec target="_blank", on ajoute…
5Pour proposer un appel téléphonique :
6Le meilleur texte de lien est…
L'essentiel du chapitre
<a href="destination">texte cliquable</a>.https://...) vers un autre site ; relatif (contact.html, blog/x.html, ../x.html) vers tes pages.target="_blank" + rel="noopener noreferrer" pour un nouvel onglet, avec modération.id="cible" sur l'élément, puis href="#cible". Un id est unique et sans espace.mailto:, tel:, download. Le texte du lien doit décrire la destination.index.html | contact.html (même dossier) | contact.html ou ./contact.html |
index.html | article-1.html (sous-dossier) | blog/article-1.html |
blog/article-1.html | blog/index.html (même dossier) | index.html |
blog/article-1.html | contact.html (dossier parent) | ../contact.html |
blog/article-1.html | images/logo.png (dossier voisin) | ../images/logo.png |
Vidéo · À regarder
FR[TUTO] Les BASES du HTML
Bertrand . Tech · YouTube
| télécharge le fichier au lieu de l'ouvrir |
<a href="cv.pdf" download>Mon CV</a> |
La même notion en version courte, si tu veux une deuxième explication.
Tableau: Les deux types de liens
Prends ce site d'exemple :
mon-site/
├── index.html
├── contact.html
├── blog/
│ ├── index.html
│ └── article-1.html
└── images/
└── logo.pngTableau: Les chemins relatifs, cas par cas
<a href="https://github.com" target="_blank" rel="noopener noreferrer">Mon profil GitHub</a>target="_blank" ouvre le lien dans un nouvel onglet. Ajoute toujours rel="noopener noreferrer" : sans noopener, la page ouverte peut accéder à ta page d'origine par JavaScript et la rediriger vers un site malveillant (attaque appelée tabnabbing). Les navigateurs récents le font par défaut, mais l'écrire reste une bonne pratique attendue.
Avec modération. Ouvrir un onglet sans prévenir gêne les utilisateurs (et les personnes qui utilisent un lecteur d'écran). On le réserve en général aux liens externes quand l'utilisateur est au milieu d'une tâche (un formulaire, une lecture), ou aux documents PDF.
Une ancre permet de sauter à un endroit précis d'une page. Deux étapes : donner un id à l'élément cible, puis faire un lien vers #cet-id.
<nav>
<ul>
<li><a href="#competences">Mes compétences</a></li>
<li><a href="#projets">Mes projets</a></li>
<li><a href="#contact">Me contacter</a></li>
</ul>
</nav>
<h2 id="competences">Mes compétences</h2>
<p>...</p>
<h2 id="projets">Mes projets</h2>
<p>...</p>
<h2 id="contact">Me contacter</h2>
<p>...</p>
<a href="#">Retour en haut de la page</a>Tableau: Les formes d'ancres
id="mes projets" est invalide : un id ne contient pas d'espaces. Utilise des tirets : id="mes-projets". Et n'oublie pas : un même id ne doit apparaître qu'une seule fois par page, sinon l'ancre ne sait pas où aller.
Tableau: mailto, tel et download
alt de l'image devient le texte du lien.<button>.<!-- Mauvais : hors contexte, "ici" ne veut rien dire -->
<p>Pour le programme de la formation, cliquez <a href="programme.pdf">ici</a>.</p>
<!-- Bon : le texte du lien se comprend seul -->
<p><a href="programme.pdf">Télécharger le programme de la formation (PDF, 2 Mo)</a></p>
<!-- Une image cliquable -->
<a href="index.html"><img src="images/logo.png" alt="Accueil — Atelier Web Casa"></a>Les utilisateurs de lecteurs d'écran affichent souvent la liste de tous les liens de la page pour naviguer. Une liste de dix « cliquez ici » est inutilisable. Google aussi lit le texte des liens pour comprendre la page de destination.
En complément (anglais) : un chapitre complet d'une demi-heure consacré aux liens, pour revoir toutes les notions de ce chapitre avec d'autres exemples. Code en même temps que lui.
Crée une page « FAQ » avec cinq questions en <h2>, chacune suivie d'un paragraphe. En haut, un sommaire en liste permet d'aller directement à chaque question. Après chaque réponse, un lien « Retour au sommaire » remonte au sommaire.
Avec l'arborescence de la section 2, écris le href pour aller : (a) de blog/index.html vers index.html ; (b) de contact.html vers blog/article-1.html ; (c) de blog/article-1.html vers images/logo.png ; (d) de index.html vers la section id="formulaire" de contact.html.
Crée trois pages index.html, projets.html et contact.html. Chaque page a le même menu de navigation (une liste de trois liens) et un titre différent. La page contact contient un lien mailto: avec un objet pré-rempli et un lien tel:. Ajoute sur la page projets un lien externe vers github.com qui s'ouvre dans un nouvel onglet.
dossier/fichier : « descends dans ce dossier » ;../ : « remonte d'un dossier » (on peut l'enchaîner : ../../) ;/fichier (barre au début) : « pars de la racine du site » — attention, cela ne fonctionne qu'avec un serveur (Live Server), pas en double-cliquant sur le fichier.href="C:\Users\Anas\Bureau\mon-site\contact.html" fonctionne sur ton ordinateur… et nulle part ailleurs. Une fois le site en ligne, ce chemin n'existe pas. Utilise toujours des chemins relatifs vers tes propres fichiers, et des barres obliques /, jamais des antislashs \.
Les liens, par un autre auteur. Après le segment, refais le tableau des chemins relatifs de mémoire.
<address>
<a href="mailto:anas@exemple.ma?subject=Demande%20de%20stage">anas@exemple.ma</a><br>
<a href="tel:+212612345678">+212 6 12 34 56 78</a><br>
<a href="docs/cv-anas.pdf" download>Télécharger mon CV (PDF, 120 Ko)</a>
</address>Dans un href, un espace s'écrit %20 (c'est l'encodage URL). D'où l'intérêt de nommer ses fichiers sans espace (chapitre 1).