Le Web n’existerait pas sans les liens. C’est grâce à eux que l’on passe d’une page à une autre, d’un site à un autre, d’une section à une autre.
Un bon système de navigation rend un site :
- facile à comprendre
- agréable à utiliser
- efficace pour le référencement (SEO)
Dans cette partie, vous allez apprendre à créer des liens HTML propres, comprendre comment fonctionnent les URLs, utiliser des ancres internes et construire des menus simples comme sur des sites réels.
👉 Un bon site guide l’utilisateur sans qu’il ait à réfléchir.
1) La balise <a> : créer un lien HTML
En HTML, les liens sont créés avec la balise <a>
(anchor = ancre).
Structure de base :
<a href="https://example.com">Visiter le site</a>
Ici :
href= destination du lien- Le texte entre les balises est cliquable
Sans href, le lien n’a aucun sens.
2) Comprendre les URLs : absolues et relatives
Une URL indique au navigateur où aller. Il existe deux grands types d’URLs.
URL absolue
Elle contient l’adresse complète :
<a href="https://www.google.com">Google</a>
Utilisée pour :
- liens vers d’autres sites
- ressources externes
URL relative
Elle pointe vers un fichier de votre projet :
<a href="contact.html">Contact</a>
Exemple avec structure :
/site ├── index.html ├── pages/ │ └── about.html
<a href="pages/about.html">À propos</a>
3) Les ancres : naviguer dans une même page
Les ancres permettent de naviguer vers une section précise d’une page.
Étape 1 : donner un identifiant
<h2 id="services">Nos services</h2>
Étape 2 : créer le lien
<a href="#services">Voir les services</a>
Cas d’usage réels :
- tables des matières
- pages longues
- pages de documentation
4) Liens spéciaux : email et téléphone
Lien email
<a href="mailto:contact@monsite.com">Nous contacter</a>
Lien téléphone
<a href="tel:+212600000000">Appeler</a>
Très utilisés sur les sites mobiles.
5) Créer un menu de navigation simple (exemple réel)
Un menu est généralement une liste de liens. HTML est parfait pour cela.
HTML du menu
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="about.html">À propos</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Sans CSS, ce menu fonctionne déjà. Il est lisible et accessible.
CSS simple pour le menu
nav ul {
list-style: none;
padding: 0;
display: flex;
gap: 16px;
}
nav a {
text-decoration: none;
color: #0f172a;
font-weight: bold;
}
✅ Menu simple, propre et professionnel.
6) Exemple réel : navigation complète de page
<header>
<nav>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#features">Fonctionnalités</a></li>
<li><a href="#pricing">Tarifs</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
Ce type de navigation est utilisé sur la majorité des landing pages.
7) Erreurs fréquentes à éviter
- Utiliser des liens sans
href - Mettre des URLs incorrectes
- Créer un menu avec des
<div> - Oublier l’accessibilité (texte clair)
👉 Les menus doivent être simples avant d’être beaux.
Vous savez maintenant créer des liens HTML, comprendre les URLs, utiliser des ancres et construire une navigation simple et efficace.
Dans la Partie 6, nous verrons comment intégrer des images et des médias : chemins, formats, bonnes pratiques et responsive images.
✅ Un bon lien mène l’utilisateur au bon endroit, au bon moment.