Cours de Developpement Web

HTML5 — Module 4 : Liens et navigation

5
par IARO

Hyperliens, ancres, protocoles et accessibilite des liens • Niveau debutant

Module 4
Liens et navigation
Hyperliens, ancres, protocoles, cibles et accessibilite des liens

Objectifs du module

Maitriser la balise <a> et tous ses attributs (href, target, rel, download...)

Comprendre les differents types d URL (absolue, relative, ancre, protocole)

Utiliser les protocoles speciaux : mailto, tel, sms, javascript

Controler la cible d ouverture avec target (_blank, _self, _parent, _top)

Securiser les liens externes avec rel=noopener noreferrer

Creer des liens accessibles et comprendre les attributs aria sur les liens

Construire une navigation complete et semantique

Niveau Duree Prerequis Module

Debutant 3 a 4h Modules 1, 2 et 3 4 / 16

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 1 / 16

HTML5 Module 4 — Liens et navigation par IARO

1 Introduction — Qu est-ce qu un hyperlien ?

L hyperlien est le fondement du World Wide Web. C est la balise HTML qui permet de naviguer d une page a une
autre, d une section a une autre, ou de declencher des actions (envoi d email, appel telephone). En HTML5, le lien
est cree avec la balise <a> (anchor = ancre). Sans les liens, il n y aurait pas de navigation sur le Web.

2 Anatomie complete de la balise &lt;a&gt;

La balise <a> est l element central de la navigation HTML. Elle accepte plusieurs attributs dont href est le seul
obligatoire pour creer un lien fonctionnel.

<a href="[Link] target="_blank" rel="noopener">Visiter IARO</a>

Balise Attribut href Cible Securite Texte

ouvrante (destination) d'ouverture (rel) du lien

Attribut Valeur(s) possible(s) Description

href URL, ancre, protocole Destination du lien (obligatoire pour un lien fonctionnel)

target _blank _self _parent _top Ou s ouvre le lien (onglet, fenetre, cadre)

rel noopener noreferrer nofollow... Relation entre la page courante et la destination

download nom-fichier (optionnel) Telecharge la ressource au lieu de la naviguer

hreflang fr en es ar ... Langue de la page de destination (SEO)

type text/html application/pdf... Type MIME de la ressource liee

ping URL (liste) URLs notifiees au clic (suivi analytique)

referrerpolicy no-referrer strict-origin... Controle les informations de referent envoyees

aria-label texte descriptif Etiquette accessible pour les lecteurs d ecran

aria-current page location step ... Indique le lien actif dans une navigation

tabindex nombre entier Ordre de navigation au clavier

id identifiant unique Permet de cibler le lien comme ancre de destination

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 2 / 16

HTML5 Module 4 — Liens et navigation par IARO

3 Anatomie d une URL complete

Une URL (Uniform Resource Locator) est l adresse complete d une ressource sur le Web. Chaque partie a un role
precis et il est essentiel de les comprendre pour creer des liens corrects.
+ domaine (TLD) (path) ressource (query) (fragment)
Protocole Sous-domaine
ExtensionChemin Page / Parametres Ancre

[Link]

4 URL absolues, relatives et ancres

Il existe trois grandes categories d URL selon le contexte dans lequel on les utilise. Le choix du bon type d URL est
crucial pour la portabilite et la maintenance du site.

Type Format Quand l utiliser

URL absolue [Link] Liens vers d autres sites, reseaux sociaux, ressources externes

URL relative /cours/html5/[Link] Liens internes au meme site (chemin depuis la racine)

URL relative ../images/[Link] Liens relatifs au fichier courant (parent, sibling)

Ancre interne #section-titre Navigation dans la meme page vers un id specifique

Ancre externe [Link]#section Navigation vers une section specifique d une autre page

Protocole mailto: tel: sms: Actions : envoyer un email, appeler, envoyer un SMS

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 3 / 16

HTML5 Module 4 — Liens et navigation par IARO

[Link]
<!-- URL absolue : chemin complet depuis le protocole -->
<a href="[Link] HTML5 W3C</a>

<!-- URL relative depuis la racine du site (commence par /) -->

<a href="/cours/html5/[Link]">Module 4</a>

<!-- URL relative depuis le fichier courant -->

<a href="../[Link]">Retour accueil</a>
<a href="images/[Link]">Voir le logo</a>

<!-- Ancre interne : navigation dans la meme page -->

<a href="#introduction">Aller a l introduction</a>
<a href="#resume">Aller au resume</a>

<!-- Ancre vers une section d une autre page -->

<a href="/cours/[Link]#module4">Module 4 du cours HTML5</a>

<!-- Lien vide : placeholder (aucune navigation) -->

<a href="#">Lien placeholder (eviter en prod)</a>
<a href="javascript:void(0)">Lien sans navigation</a>

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 4 / 16

HTML5 Module 4 — Liens et navigation par IARO

5 L attribut target — Controler l ouverture du lien

L attribut target definit dans quel contexte de navigation (onglet, fenetre, frame) s ouvre la page de destination. Sa
valeur la plus utilisee est _blank pour ouvrir dans un nouvel onglet.

Valeur Comportement Usage recommande

_self Meme onglet / meme fenetre (comportement par defaut) Liens internes du site

_blank Nouvel onglet ou nouvelle fenetre Liens externes, PDF, ressources tierces

_parent Cadre parent (si iframes imbriquees) Navigation dans des iframes imbriquees

_top Fenetre principale (sort de tous les cadres) Sortir d un iframe

nom-frame Frame ou iframe portant ce nom (attribut name) Navigation ciblant un iframe nomme

[Link]
<!-- Ouvrir dans le meme onglet (defaut, pas besoin de le specifier) -->
<a href="/cours" target="_self">Nos cours</a>

<!-- Ouvrir dans un nouvel onglet -->

<a href="[Link] target="_blank"
rel="noopener noreferrer">Google</a>

<!-- Ouvrir dans un iframe nomme -->

<iframe name="mon-cadre" src=""></iframe>
<a href="[Link]" target="mon-cadre">Charger dans l iframe</a>

<!-- Sortir d un iframe et ouvrir dans la fenetre principale -->

<a href="[Link] target="_top">Site IARO (hors iframe)</a>

Toujours associer target='_blank' avec rel='noopener noreferrer'. Sans cela, la page ouverte peut acceder a
[Link] et manipuler la page d origine, ce qui constitue une faille de securite (reverse tabnapping). Les
navigateurs modernes ajoutent noopener implicitement, mais la bonne pratique reste de l inclure explicitement
! dans le code.

6 L attribut rel — Relations et securite

L attribut rel definit la relation entre la page courante et la ressource liee. Il est essentiel pour la securite des liens
externes et pour le SEO.

Valeur rel Role Contexte

noopener Empeche la page liee d acceder a [Link] Securite, target=_blank

noreferrer N envoie pas l URL d origine a la destination Confidentialite + noopener

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 5 / 16

HTML5 Module 4 — Liens et navigation par IARO

nofollow Demande aux moteurs de ne pas suivre ce lien SEO : liens sponsorises, UGC

sponsored Marque un lien comme sponsorise ou publicitaire SEO : publicites, partenariats

ugc User Generated Content (commentaires, forums) SEO : contenu utilisateur

canonical Indique l URL principale d un contenu duplique SEO : eviter le contenu duplique

alternate Version alternative (langue, format, media) SEO : versions internationales

prev / next Lien vers la page precedente / suivante Pagination, series d articles

author Lien vers la page de l auteur du document Blogs, articles

license Lien vers la licence applicable au contenu Contenus sous licence

help Lien vers une page d aide contextuelle Formulaires, documentation

search Lien vers la page de recherche du site Navigation, OpenSearch

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 6 / 16

HTML5 Module 4 — Liens et navigation par IARO

7 Protocoles speciaux dans href

La valeur de l attribut href n est pas limitee aux URLs web (http/https). HTML5 supporte plusieurs protocoles
speciaux qui declenchent des actions natives sur l appareil de l utilisateur.

Protocole Syntaxe Action declenchee

mailto: [Link] Ouvre le client email avec l adresse pre-remplie

mailto: complet [Link] Email avec sujet et corps pre-remplis

tel: [Link] Lance un appel telephone (mobile, VoIP)

sms: [Link] Ouvre l application SMS avec numero/message

ftp: [Link] Connexion FTP (rare, client FTP requis)

file: [Link] Ouvre un fichier local (uniquement hors ligne)

data: data:text/plain;base64,... Donnee encodee en base64 directement dans l URL

javascript: javascript:void(0) Execute du JS (deconseille, utiliser addEventListener)

# href='#' Lien vide, reste sur la page (eviter)

[Link]
<!-- Email simple -->
<a href="[Link] contacter</a>

<!-- Email avec sujet et corps pre-remplis -->

<a href="[Link]
&body=Bonjour%2C%20je%20souhaite...">
Envoyer un email
</a>

<!-- Lien telephone (international avec + ) -->

<a href="[Link] le +261 34 00 000 00</a>

<!-- SMS avec message pre-rempli -->

<a href="[Link]
Envoyer un SMS
</a>

<!-- Lien WhatsApp (protocole externe) -->

<a href="[Link]
target="_blank" rel="noopener">WhatsApp</a>

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 7 / 16

HTML5 Module 4 — Liens et navigation par IARO

8 Ancres internes — Navigation dans la page

Les ancres permettent de naviguer vers une section specifique d une page. Elles sont particulierement utiles pour
les longues pages (documentation, FAQ, pages de cours) et pour les sommaires cliquables.

[Link]
<!-- ETAPE 1 : Definir la cible avec un attribut id -->
<h2 id="introduction">Introduction</h2>
<section id="module-1">...</section>
<div id="contact">...</div>

<!-- ETAPE 2 : Creer le lien vers cette cible -->

<a href="#introduction">Aller a l introduction</a>
<a href="#module-1">Voir le module 1</a>
<a href="#contact">Formulaire de contact</a>

<!-- Sommaire cliquable complet -->

<nav>
<ul>
<li><a href="#intro">1. Introduction</a></li>
<li><a href="#bases">2. Les bases</a></li>
<li><a href="#avance">3. Avance</a></li>
<li><a href="#resume">4. Resume</a></li>
</ul>
</nav>

<!-- Lien retour en haut de page -->

<a href="#top">Retour en haut</a>
<!-- ou bien : -->
<a href="#">Retour en haut</a>

Pour un comportement de defilement fluide (smooth scroll) vers les ancres, il suffit d ajouter cette regle CSS :
scroll-behavior: smooth; sur l element html. Pas besoin de JavaScript pour cela en HTML5/CSS3 moderne. La
balise <a name='ancre'> est obsolete en HTML5 : utiliser id sur n importe quelle balise.
i

9 L attribut download — Telecharger un fichier

L attribut download force le navigateur a telecharger la ressource liee au lieu de la naviguer. On peut
optionnellement specifier le nom du fichier tel qu il sera enregistre par l utilisateur.

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 8 / 16

HTML5 Module 4 — Liens et navigation par IARO

[Link]
<!-- Telecharger un fichier (nom original conserve) -->
<a href="/fichiers/[Link]" download>Telecharger le guide PDF</a>

<!-- Telecharger avec un nom personnalise -->

<a href="/fichiers/[Link]"
download="[Link]">
Telecharger le rapport 2025
</a>

<!-- Telecharger differents formats -->

<a href="/export/[Link]" download="[Link]">
Export CSV
</a>
<a href="/images/[Link]" download="[Link]">
Telecharger le logo SVG
</a>

<!-- Restriction : download ne fonctionne qu en same-origin -->

<!-- Pour des fichiers externes, utiliser fetch() en JavaScript -->

Valeur download Effet Exemple

download (sans val.) Telecharge avec le nom original du fichier download

download='[Link]' Telecharge avec le nom specifie download="[Link]"

Sans download Ouvre dans le navigateur (comportement defaut) (attribut absent)

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 9 / 16

HTML5 Module 4 — Liens et navigation par IARO

10 hreflang, type et ping — Attributs avances

[Link]
<!-- hreflang : indique la langue de la page de destination (SEO) -->
<a href="/en/courses" hreflang="en">English version</a>
<a href="/fr/cours" hreflang="fr">Version francaise</a>
<a href="/ar/■■■■■" hreflang="ar">■■■■■■ ■■■■■■■</a>

<!-- type : indique le type MIME de la ressource liee -->

<a href="[Link]" type="application/pdf">Rapport PDF</a>
<a href="[Link]" type="application/zip">Archive ZIP</a>
<a href="[Link]" type="application/rss+xml">Flux RSS</a>

<!-- ping : envoie une requete POST aux URLs listees au clic du lien -->
<!-- Utilise pour le suivi analytique -->
<a href="[Link]
ping="/analytics/click /tracking/lien">
Lien avec tracking
</a>

<!-- referrerpolicy : controle les infos de referent envoyees -->

<a href="[Link]
referrerpolicy="no-referrer">
Lien sans referent
</a>

11 Accessibilite des liens

Les liens doivent etre accessibles a tous les utilisateurs, y compris ceux utilisant des lecteurs d ecran ou naviguant
au clavier. Plusieurs regles et attributs ARIA permettent d ameliorer l accessibilite.

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 10 / 16

HTML5 Module 4 — Liens et navigation par IARO

[Link]
<!-- MAUVAISE PRATIQUE : texte du lien non descriptif -->
<a href="/cours/html5">Cliquez ici</a>
<a href="/cours/html5">En savoir plus</a>

<!-- BONNE PRATIQUE : texte du lien descriptif -->

<a href="/cours/html5">Voir le cours HTML5 complet</a>

<!-- aria-label : texte accessible different du texte visible -->

<a href="/cours/html5" aria-label="Voir le cours HTML5 complet">
HTML5
</a>

<!-- aria-describedby : lien vers une description plus longue -->

<a href="/[Link]" aria-describedby="desc-rapport">
Rapport 2025
</a>
<p id="desc-rapport">Rapport annuel IARO, format PDF, 2.5 Mo</p>

<!-- aria-current : lien actif dans la navigation -->

<nav>
<a href="/accueil">Accueil</a>
<a href="/cours" aria-current="page">Cours</a>
<a href="/contact">Contact</a>
</nav>

<!-- Indicateur de lien externe (pour les lecteurs d ecran) -->

<a href="[Link] target="_blank"
aria-label="W3C (ouvre dans un nouvel onglet)">W3C</a>

Attribut Role accessibilite Exemple

aria-label Etiquette accessible remplacant le texte visible "Voir le cours HTML5"

aria-describedby Pointe vers un element de description detaillee "id-description"

aria-current Indique le lien actif (page, location, step, date) "page"

aria-haspopup Le lien ouvre un menu ou une popup "menu"

aria-expanded Etat ouvert/ferme d un menu ou sous-menu "true" / "false"

tabindex='0' Rend un element non interactif focusable au clavier tabindex='0'

tabindex='-1' Retire l element de l ordre de tabulation tabindex='-1'

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 11 / 16

HTML5 Module 4 — Liens et navigation par IARO

12 Construire une navigation complete et semantique

Une navigation web professionnelle combine les balises semantiques, les attributs d accessibilite et les bonnes
pratiques UX pour offrir la meilleure experience a tous les utilisateurs.

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 12 / 16

HTML5 Module 4 — Liens et navigation par IARO

[Link]
<!-- Navigation principale complete et accessible -->
<header>
<nav aria-label="Navigation principale" role="navigation">
<ul>
<li><a href="/" aria-current="page">Accueil</a></li>
<li>
<a href="/cours" aria-haspopup="true"
aria-expanded="false">Cours</a>
<ul>
<li><a href="/cours/html5">HTML5</a></li>
<li><a href="/cours/css3">CSS3</a></li>
<li><a href="/cours/javascript">JavaScript</a></li>
</ul>
</li>
<li><a href="/a-propos">A propos</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>

<!-- Skip link : lien d evitement pour aller au contenu principal -->
<!-- Place tout en haut, avant le header -->
<a href="#main-content" class="skip-link">
Aller au contenu principal
</a>
<main id="main-content">...

<!-- Navigation fil d ariane (breadcrumb) -->

<nav aria-label="Fil d ariane">
<ol>
<li><a href="/">Accueil</a></li>
<li><a href="/cours">Cours</a></li>
<li aria-current="page">HTML5 Module 4</li>
</ol>
</nav>

<!-- Pagination -->

<nav aria-label="Pagination">
<a href="/page/1" rel="prev">Page precedente</a>
<a href="/page/3" rel="next">Page suivante</a>
</nav>

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 13 / 16

HTML5 Module 4 — Liens et navigation par IARO

13 Bonnes pratiques — Liens et navigation

Pratique Recommandation

Texte descriptif Eviter 'cliquez ici', 'lire la suite' : le texte doit decrire la destination

target=_blank + rel Toujours ajouter rel='noopener noreferrer' avec target='_blank'

HTTPS obligatoire Toujours utiliser https:// pour les liens externes (securite)

URL relatives internes Utiliser des URLs relatives pour les liens internes (portabilite)

Indication lien externe Indiquer visuellement et avec aria les liens qui ouvrent un nouvel onglet

download en same-origin L attribut download ne fonctionne qu avec des ressources du meme domaine

Pas de href=javascript: Utiliser addEventListener en JS plutot que href='javascript:...'

Indicateur de lien actif Utiliser aria-current='page' sur le lien de la page active

Skip links Ajouter un lien d evitement en haut de page pour l accessibilite clavier

ID uniques pour ancres Les attributs id cibles par des ancres doivent etre uniques dans la page

Eviter href='#' en prod Utiliser href='javascript:void(0)' ou un vrai bouton a la place

mailto: encode les espaces Encoder les parametres email : %20 pour espace, %0A pour retour ligne

Ordre de tabulation logique L ordre des liens dans le DOM doit correspondre a l ordre visuel

14 Exercice pratique — Page avec navigation complete

Reproduisez cette page qui integre tous les types de liens du Module 4.

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 14 / 16

HTML5 Module 4 — Liens et navigation par IARO

[Link]
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="UTF-8"><title>IARO - Cours HTML5</title></head>
<body>
<!-- Skip link -->
<a href="#contenu" class="skip">Aller au contenu</a>
<header>
<nav aria-label="Principal">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/cours" aria-current="page">Cours</a></li>
<li><a href="[Link] target="_blank"
rel="noopener noreferrer">Site IARO</a></li>
</ul>
</nav>
</header>
<main id="contenu">
<!-- Sommaire avec ancres -->
<nav>
<a href="#intro">Introduction</a> |
<a href="#ressources">Ressources</a>
</nav>
<h1 id="intro">Module 4 — Liens HTML5</h1>
<section id="ressources">
<h2>Ressources</h2>
<a href="[Link]" download="[Link]">
Telecharger le guide
</a>
<a href="[Link]
Nous ecrire
</a>
<a href="[Link] appeler</a>
</section>
</main>
</body></html>

15 Resume complet du Module 4

Concept A retenir

Balise <a> Element fondamental de navigation, href obligatoire pour un lien fonctionnel

href absolu [Link] : lien vers un site ou ressource externe

href relatif /chemin ou ../chemin : lien interne relatif a la racine ou au fichier

href ancre #id-cible : navigation dans la meme page vers un element avec cet id

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 15 / 16

HTML5 Module 4 — Liens et navigation par IARO

mailto: Ouvre le client email : [Link]

tel: Lance un appel : [Link] (format international)

sms: Ouvre l app SMS : [Link]

target=_blank Ouvre dans un nouvel onglet, TOUJOURS avec rel='noopener noreferrer'

rel=noopener Securite : empeche la page liee de manipuler [Link]

rel=noreferrer Confidentialite : n envoie pas l URL d origine a la destination

rel=nofollow SEO : demande aux moteurs de ne pas suivre ce lien

download Force le telechargement : download='[Link]' (same-origin uniquement)

hreflang Indique la langue de destination pour le SEO international

aria-label Texte accessible pour les lecteurs d ecran (remplace texte visible)

aria-current='page' Marque le lien de la page active dans la navigation

Skip link Lien d evitement en haut de page pour la navigation clavier

Texte descriptif Le texte du lien doit decrire sa destination, pas 'cliquez ici'

Fin du Module 4 — Prochain : Module 5 : Listes

IARO | Cours de Developpement Web | HTML5 - Module 4 : Liens et navigation Page 16 / 16