Liens HTML : créer une navigation claire et efficace

Quand on découvre le HTML, on apprend vite à afficher du texte, des titres ou des images. Pourtant, sans liens HTML, une page web reste figée, presque muette. Impossible de guider le visiteur, de l’emmener ailleurs ou simplement de lui proposer la suite logique de sa lecture.

• Comprendre comment créer des liens HTML fiables, capables de guider naturellement un visiteur sans le perdre ni le frustrer.
• Construire une navigation logique et accessible, adaptée aussi bien aux visiteurs qu’aux moteurs de recherche.
• Acquérir les bons réflexes pour éviter les erreurs courantes et poser des bases solides pour des sites évolutifs et professionnels.

Les liens HTML sont le cœur de la navigation sur le web. Ce sont eux qui transforment une simple page en véritable site, connecté, fluide et vivant. Comprendre comment ils fonctionnent, c’est comprendre comment l’utilisateur se déplace, réfléchit et interagit avec votre contenu.

Dans ce chapitre, vous allez apprendre à créer, comprendre et maîtriser les liens HTML pas à pas. L’objectif est simple : à la fin, vous saurez créer une navigation propre, logique et professionnelle, même si vous débutez complètement.

Comprendre le rôle des liens sur le web

Avant de toucher au code, prenons une seconde pour comprendre ce qu’est réellement un lien HTML. Un lien, c’est un pont. Il relie une page à une autre, un endroit à un autre, parfois même une information à une action. Sans lien, Internet ne serait qu’une immense pile de documents isolés.

Sur un site web, un lien HTML peut servir à plusieurs choses. Il peut permettre de changer de page, de naviguer vers une section précise, de télécharger un fichier ou même d’ouvrir le logiciel de messagerie de l’utilisateur. Derrière ce geste banal du clic se cache une mécanique simple mais puissante.

D’un point de vue utilisateur, un lien bien pensé rassure. Il montre où aller, quoi faire, et comment avancer. D’un point de vue développeur, il structure le site, améliore l’expérience et joue un rôle clé dans le référencement.

La balise <a> : la base de tout lien HTML

En HTML, tous les liens reposent sur une seule balise : la balise <a>. Le « a » vient du mot anglais anchor, que l’on peut traduire par « ancre ». L’idée est simple : on pose un point d’ancrage cliquable dans la page.

Voici la forme la plus simple d’un lien HTML :

<a href="https://www.example.com">Visiter le site</a>

Le texte entre les balises est ce que l’utilisateur voit et clique. L’attribut href, lui, indique la destination du lien. Sans href, le lien n’emmène nulle part. Il existe visuellement, mais il est inutile.

C’est souvent l’une des premières erreurs quand on débute : oublier l’attribut href. Le lien apparaît, le curseur change, mais rien ne se passe au clic. Toujours vérifier ce point.

Comprendre l’attribut href

L’attribut href est le cœur du lien HTML. Il indique vers où le navigateur doit aller quand l’utilisateur clique. Cette destination peut prendre plusieurs formes, et c’est là que les choses deviennent intéressantes.

Si vous écrivez une adresse complète, on parle de lien absolu :

<a href="https://www.google.com">Aller sur Google</a>

Ce type de lien est souvent utilisé pour diriger vers un site externe. Peu importe où se trouve votre page, le navigateur saura exactement où aller.

À l’inverse, un lien relatif pointe vers une ressource située dans votre propre site :

<a href="contact.html">Page contact</a>

Ici, le navigateur cherche le fichier contact.html dans le même dossier que la page actuelle. C’est ce type de lien HTML que l’on utilise le plus pour la navigation interne d’un site.

Liens relatifs et organisation des dossiers

Pour bien comprendre les liens HTML, il faut comprendre comment le navigateur se repère dans vos dossiers. Imaginez votre site comme une armoire avec des tiroirs. Chaque dossier est un tiroir, chaque fichier une feuille.

Si votre structure ressemble à ceci :

site/
│── index.html
│── pages/
│   └── contact.html

Depuis index.html, le lien HTML vers la page contact s’écrit ainsi :

<a href="pages/contact.html">Contact</a>

Mais depuis contact.html, si vous voulez revenir à l’accueil, vous devez remonter d’un niveau :

<a href="../index.html">Accueil</a>

Le .. signifie « dossier parent ». C’est une notion fondamentale, car une mauvaise arborescence entraîne souvent des liens cassés, et donc une navigation frustrante.

Le texte du lien : bien plus qu’un simple mot

Le texte cliquable d’un lien HTML est souvent sous-estimé. Pourtant, il joue un rôle majeur. Pour l’utilisateur, il doit être clair et explicite. Pour les moteurs de recherche, il donne un indice sur le contenu de la page cible.

Un lien comme ceci est peu utile :

<a href="cours.html">Cliquez ici</a>

À l’inverse, celui-ci est beaucoup plus parlant :

<a href="cours.html">Apprendre les bases du HTML</a>

Le second lien donne immédiatement une information. L’utilisateur sait où il va. Le moteur de recherche aussi. C’est une habitude à prendre très tôt quand on apprend le lien HTML.

Ouvrir un lien dans un nouvel onglet

Par défaut, un lien HTML s’ouvre dans le même onglet. Dans certains cas, notamment pour des sites externes, on préfère ouvrir un nouvel onglet afin de ne pas faire quitter votre site à l’utilisateur.

Pour cela, on utilise l’attribut target :

<a href="https://www.example.com" target="_blank">Site externe</a>

L’option _blank indique au navigateur d’ouvrir la page dans un nouvel onglet ou une nouvelle fenêtre selon la configuration de l’utilisateur.

Quand j’ai créé mon tout premier site, j’ouvrais absolument tous les liens dans de nouveaux onglets. Résultat : une dizaine d’onglets ouverts après trois clics, et une navigation complètement confuse. Comme quoi, même une bonne intention peut nuire à l’expérience utilisateur si elle est mal dosée.

Sécurité et bonnes pratiques avec target="_blank"

Ouvrir un lien HTML dans un nouvel onglet n’est pas sans conséquence. Pour des raisons de sécurité, il est fortement recommandé d’ajouter l’attribut rel="noopener noreferrer" :

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Site externe
</a>

Cet attribut empêche la page ouverte d’accéder à certaines informations de votre site. Ce n’est pas visible pour l’utilisateur, mais c’est une bonne habitude professionnelle à prendre dès le départ.

Pour aller plus loin : L’attribut rel pour un lien <a>

Styliser un lien HTML avec le CSS

Par défaut, un lien HTML est bleu et souligné. C’est volontaire, car l’utilisateur reconnaît immédiatement un lien. Toutefois, vous pouvez adapter son apparence avec le CSS.

Voici un exemple simple :

<a href="contact.html" class="lien">Contact</a>

.lien {
  color: #ff6600;
  text-decoration: none;
}

.lien:hover {
  text-decoration: underline;
}

Même en personnalisant vos liens, veillez toujours à ce qu’ils restent identifiables. Un lien invisible ou confondu avec du texte normal nuit gravement à la navigation.

Les ancres HTML : naviguer à l’intérieur d’une page

Jusqu’ici, nous avons vu comment créer des liens HTML vers d’autres pages. Mais il existe un autre usage extrêmement courant et très pratique : se déplacer à l’intérieur d’une même page. C’est ce qu’on appelle les ancres.

Une ancre HTML permet d’envoyer l’utilisateur vers un endroit précis d’une page, par exemple un chapitre, une section ou un formulaire en bas de page. C’est ce que vous voyez souvent dans les sommaires cliquables ou les liens « Retour en haut ».

Créer une ancre avec un identifiant

Pour créer une ancre, il faut deux éléments. D’abord, une cible, ensuite un lien qui pointe vers cette cible.

La cible est un élément HTML qui possède un attribut id :

<h2 id="navigation-html">La navigation en HTML</h2>

Ensuite, on crée un lien HTML qui pointe vers cet identifiant grâce au symbole # :

<a href="#navigation-html">Aller à la navigation HTML</a>

Quand l’utilisateur clique sur ce lien, le navigateur fait défiler la page automatiquement jusqu’à l’élément correspondant. Il n’y a aucun JavaScript, aucun effet magique, juste du HTML pur.

Pourquoi les ancres sont essentielles

Les ancres améliorent énormément l’expérience utilisateur, surtout sur les pages longues. Elles permettent de se repérer rapidement, de revenir à un point précis et de ne pas se perdre dans un long contenu.

Côté référencement, elles sont également très utiles. Les moteurs de recherche comprennent mieux la structure de votre page et peuvent même proposer des liens directs vers certaines sections dans les résultats.

Créer un lien vers une ancre sur une autre page

Un lien HTML peut aussi pointer vers une section précise d’une autre page. Le principe est exactement le même, mais on combine l’URL de la page et l’ancre.

<a href="cours-html.html#balise-a">La balise a</a>

Dans ce cas, le navigateur ouvre la page cours-html.html puis se positionne directement sur l’élément qui possède l’identifiant balise-a.

C’est très pratique pour créer des liens contextuels entre plusieurs pages de contenu pédagogique.

Les liens email : contacter l’utilisateur en un clic

Un lien HTML ne sert pas uniquement à naviguer. Il peut aussi déclencher une action. Le cas le plus simple est le lien email.

Pour cela, on utilise le protocole mailto :

<a href="mailto:contact@monsite.fr">Nous contacter</a>

Quand l’utilisateur clique, son logiciel de messagerie s’ouvre automatiquement avec l’adresse déjà renseignée. Attention toutefois : ce comportement dépend de la configuration de l’utilisateur. Si aucun logiciel n’est configuré, rien ne se passera.

Ajouter un sujet ou un message prérempli

Il est possible d’aller plus loin en préremplissant le sujet ou le corps du message :

<a href="mailto:contact@monsite.fr?subject=Demande%20d'information">
  Écrire un email
</a>

Les espaces doivent être remplacés par %20. Ce détail peut sembler technique, mais il est important pour éviter les erreurs.

Les liens téléphone : utiles sur mobile

Avec la navigation mobile, les liens HTML peuvent aussi lancer un appel téléphonique. Là encore, on utilise un protocole spécifique, tel :

<a href="tel:+33123456789">01 23 45 67 89</a>

Sur un smartphone, cliquer sur ce lien ouvre directement l’application téléphone. Sur ordinateur, cela peut ouvrir un logiciel de communication ou ne rien faire selon le système.

C’est un petit détail, mais il améliore énormément l’accessibilité et le confort de navigation sur mobile.

Les liens de téléchargement

Un lien HTML peut servir à télécharger un fichier, comme un PDF, une image ou un document.

Par défaut, le navigateur tente d’ouvrir le fichier. Pour forcer le téléchargement, on utilise l’attribut download :

<a href="guide-html.pdf" download>Télécharger le guide HTML</a>

Le fichier sera alors téléchargé directement, sans être affiché dans le navigateur. C’est particulièrement utile pour proposer des ressources pédagogiques.

La navigation HTML : structurer un site

Créer des liens, c’est bien. Créer une navigation claire, c’est mieux. En HTML, la navigation repose sur des balises sémantiques qui donnent du sens à votre structure.

La balise principale pour la navigation est <nav> :

<nav>
  <a href="index.html">Accueil</a>
  <a href="cours.html">Cours</a>
  <a href="contact.html">Contact</a>
</nav>

Cette balise indique clairement au navigateur, aux moteurs de recherche et aux technologies d’assistance que le contenu qu’elle contient sert à naviguer dans le site.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Pourquoi utiliser les balises sémantiques

Utiliser <nav> plutôt qu’un simple <div> n’est pas un détail. Cela améliore l’accessibilité, le référencement et la compréhension globale de votre page.

Les lecteurs d’écran, par exemple, peuvent annoncer directement à l’utilisateur qu’il se trouve dans une zone de navigation. Cela rend votre site plus inclusif, sans aucun effort supplémentaire.

Liens HTML et accessibilité

Un bon lien HTML doit être accessible à tous. Cela passe par plusieurs bonnes pratiques simples.

Le texte du lien doit être explicite. Un lecteur d’écran peut lire les liens hors contexte. Si tous vos liens s’appellent « cliquer ici », l’utilisateur ne comprendra rien.

Il faut également éviter de cacher les liens derrière des éléments non cliquables ou de supprimer complètement les styles visuels sans alternative claire.

Enfin, un lien doit toujours être atteignable au clavier. Heureusement, le HTML gère cela automatiquement si vous respectez les règles de base.

Les erreurs fréquentes quand on débute

Quand on apprend les liens HTML, certaines erreurs reviennent souvent. Oublier le href, mal écrire le chemin du fichier, casser une ancre en changeant un identifiant, ou encore ouvrir tous les liens dans de nouveaux onglets sans raison.

Ces erreurs font partie de l’apprentissage. L’important est de comprendre pourquoi elles se produisent et comment les éviter. Tester régulièrement ses liens est une excellente habitude à prendre.

Créer un menu de navigation clair et logique

Un menu de navigation n’est rien d’autre qu’un ensemble de liens HTML organisés intelligemment. Pourtant, c’est l’un des éléments les plus sensibles d’un site web. Un bon menu rassure. Un mauvais menu fait fuir.

En HTML, un menu simple repose sur trois éléments : la balise <nav>, une liste <ul> et des liens <a>. Ce trio fonctionne très bien ensemble, car il est à la fois lisible, accessible et compréhensible par les moteurs de recherche.

Voici un exemple de base :

<nav>
  <ul>
    <li><a href="index.html">Accueil</a></li>
    <li><a href="cours-html.html">Cours HTML</a></li>
    <li><a href="a-propos.html">À propos</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Même si ce code paraît simple, il est déjà très solide. Il respecte la sémantique HTML, il est accessible au clavier, et il est facile à styliser avec du CSS.

Pourquoi utiliser une liste pour un menu

Quand on débute, on se demande souvent pourquoi on utilise une liste pour un menu. Après tout, visuellement, un menu n’a rien d’une liste classique.

La raison est simple : un menu est une liste de destinations. D’un point de vue logique, cela fait parfaitement sens. Les technologies d’assistance comprennent immédiatement qu’il s’agit d’un ensemble cohérent de liens. Les moteurs de recherche aussi.

Utiliser une liste, ce n’est donc pas une contrainte, c’est une aide invisible mais précieuse.

Les liens HTML dans une image

Un lien HTML ne se limite pas au texte. Il peut aussi englober une image. C’est très courant pour un logo cliquable ou une carte de contenu.

Voici un exemple simple :

<a href="index.html">
  <img src="logo.png" alt="Retour à l'accueil">
</a>

Dans ce cas, toute l’image devient cliquable. L’attribut alt est essentiel. Il décrit l’image pour les personnes qui ne peuvent pas la voir et donne du sens au lien.

Sans texte alternatif, le lien devient beaucoup moins accessible. C’est un détail que beaucoup de débutants oublient, mais qui fait toute la différence.

Lier des blocs entiers avec HTML5

Avec HTML5, il est possible de rendre cliquable un bloc entier, comme une carte d’article ou une section.

Par exemple :

<a href="article.html" class="carte">
  <h2>Apprendre le HTML</h2>
  <p>Les bases pour bien démarrer sur le web.</p>
</a>

Ce type de lien HTML est très utilisé dans les blogs modernes. Il améliore le confort de navigation, car l’utilisateur peut cliquer n’importe où sur la carte.

Attention toutefois à ne pas imbriquer des liens à l’intérieur d’un autre lien. Le HTML ne l’autorise pas et cela provoque des comportements imprévisibles.

Lien actif : indiquer où l’on se trouve

Un bon menu de navigation indique toujours à l’utilisateur où il se trouve. C’est ce qu’on appelle un lien actif.

En HTML pur, il n’existe pas de mécanisme automatique pour cela. C’est souvent géré côté CSS ou via un peu de logique côté serveur. Mais le principe reste simple : on ajoute une classe spéciale au lien correspondant à la page courante.

<a href="cours-html.html" class="active">Cours HTML</a>

Ensuite, en CSS :

.active {
  font-weight: bold;
  text-decoration: underline;
}

Ce petit détail améliore énormément la lisibilité de la navigation.

Les liens HTML et le référencement naturel

Le lien HTML joue un rôle majeur en SEO. Chaque lien est une indication donnée aux moteurs de recherche sur la structure de votre site.

Un bon lien doit être descriptif, cohérent et utile. Un lien mal nommé est une occasion manquée. Par exemple, un lien intitulé « lien html vers cours débutant » est beaucoup plus parlant qu’un simple « voir plus ».

Le maillage interne, c’est-à-dire les liens entre vos propres pages, aide les moteurs à explorer votre site et à comprendre quelles pages sont importantes.

Attribut title : utile ou pas ?

L’attribut title permet d’afficher une infobulle au survol du lien :

<a href="cours-html.html" title="Cours complet pour débutants">
  Cours HTML
</a>

Cet attribut peut apporter une aide ponctuelle, mais il ne doit jamais remplacer un texte de lien clair. De plus, il n’est pas toujours accessible sur mobile ou pour les lecteurs d’écran.

Il faut donc l’utiliser avec parcimonie, comme un complément, jamais comme une béquille.

Éviter les pièges classiques de navigation

Quand on conçoit une navigation, certaines erreurs reviennent très souvent. Trop de liens tue le lien. Un menu surchargé perd l’utilisateur. À l’inverse, un menu trop pauvre frustre.

Il faut également éviter les liens cassés. Un lien HTML qui mène vers une page inexistante brise la confiance. Tester régulièrement son site est indispensable, surtout après des modifications.

Enfin, attention aux liens trompeurs. Si un lien promet une chose et en affiche une autre, l’utilisateur se sentira piégé. La clarté est toujours la meilleure option.

Penser mobile dès le départ

Aujourd’hui, une grande partie de la navigation se fait sur mobile. Les liens HTML doivent donc être pensés pour le toucher.

Un lien trop petit est difficile à cliquer. Des liens trop proches provoquent des erreurs. Même sans CSS avancé, il faut garder cette réalité en tête dès la conception HTML.

Un bon lien est un lien facile à atteindre, facile à comprendre et facile à utiliser.

Tester et vérifier ses liens HTML avant la mise en ligne

Créer des liens HTML est une chose. S’assurer qu’ils fonctionnent tous correctement en est une autre. C’est une étape que beaucoup de débutants négligent, souvent par enthousiasme ou par manque de méthode.

Avant de mettre un site en ligne, il est essentiel de cliquer sur chaque lien, un par un. Cela peut paraître fastidieux, mais c’est le seul moyen de repérer les erreurs simples comme un nom de fichier mal écrit, une majuscule oubliée ou un dossier mal ciblé. En HTML, la moindre différence compte.

Il est également important de tester la navigation sur plusieurs pages, pas uniquement depuis la page d’accueil. Un lien HTML peut fonctionner dans un sens et être cassé dans l’autre à cause d’un mauvais chemin relatif. C’est un piège très courant quand on débute.

La cohérence de navigation : un point souvent sous-estimé

Un bon lien HTML n’est pas seulement correct techniquement. Il s’inscrit dans une logique globale. La navigation doit être cohérente sur l’ensemble du site. Si un menu change d’une page à l’autre sans raison, l’utilisateur perd ses repères.

Les intitulés doivent rester constants. Si vous utilisez « Cours HTML » dans le menu principal, évitez d’utiliser « Apprendre le HTML » ailleurs pour la même destination. Ce sont de petits détails, mais ils jouent énormément sur la compréhension.

La cohérence concerne aussi le comportement des liens. Si certains s’ouvrent dans un nouvel onglet et d’autres non, sans logique apparente, cela crée une confusion inutile. Chaque choix doit avoir une raison claire.

Navigation et logique utilisateur

Quand on apprend le HTML, on pense souvent comme un développeur. Pourtant, un site web est avant tout utilisé par des humains. La navigation doit donc suivre une logique naturelle.

Posez-vous toujours la même question : « Si je découvrais ce site pour la première fois, saurais-je où cliquer ? ». Un bon lien HTML est intuitif. Il n’a pas besoin d’être expliqué.

Il est parfois utile de faire tester son site à quelqu’un qui ne connaît rien au code. Si cette personne se perd, ce n’est pas de sa faute. C’est un signal précieux pour améliorer votre navigation.

Les liens HTML et la performance

Un aspect rarement abordé quand on débute concerne la performance. Un lien HTML mal utilisé peut ralentir un site, notamment s’il pointe vers des ressources lourdes ou inutiles.

Multiplier les liens vers des fichiers très volumineux, sans indication claire, peut frustrer l’utilisateur. Il est toujours préférable d’annoncer ce qui va se passer. Par exemple, préciser qu’un lien télécharge un fichier PDF évite les mauvaises surprises.

De la même manière, une navigation trop complexe augmente le temps passé à chercher une information. Une structure simple est souvent plus efficace qu’un menu sophistiqué.

HTML avant tout, le reste viendra ensuite

Il est tentant, quand on découvre le web, de vouloir ajouter des animations, des menus déroulants ou des effets complexes. Pourtant, une navigation solide repose d’abord sur du HTML bien pensé.

Le CSS et le JavaScript viendront enrichir l’expérience plus tard. Mais sans une base saine, ils ne feront que masquer les problèmes. Un lien HTML clair, bien structuré et accessible reste fonctionnel dans toutes les situations, même sans style.

C’est d’ailleurs pour cette raison que les fondamentaux du lien HTML sont encore enseignés aujourd’hui, malgré l’évolution constante des technologies web.

Maîtriser les liens HTML, ce n’est pas seulement apprendre une balise ou un attribut. C’est comprendre comment les pages dialoguent entre elles, comment un utilisateur explore un site et comment une information mène naturellement à une autre. C’est une compétence discrète, mais absolument essentielle.

En prenant le temps de réfléchir à votre navigation dès le départ, vous construisez des sites plus agréables, plus lisibles et plus professionnels. Vous facilitez la vie de vos visiteurs, mais aussi la vôtre, car un site bien structuré est plus simple à faire évoluer.

Si vous deviez retenir une seule chose, ce serait celle-ci : un bon lien HTML ne se remarque presque pas. Il guide, il accompagne, il rassure. Et quand il est bien pensé, il donne envie de cliquer… puis de rester.

Chapitre suivant : Image, vidéo et audio

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr