Aller au contenu

Les liens HTML : <a>

La balise <a> permet de créer des liens cliquables dans le page.

Les liens permettent de :

  • passer d'une page à une autre
  • visiter un autre site
  • se déplacer rapidement à l'intérieur d'une même page

💡 Chaque fois que tu cliques sur un menu, un bouton ou un logo qui t'amène ailleurs, tu utilises un lien HTML.

  • La balise de lien est une balises de type inline, ne fait donc pas de retour de ligne

  • La balise de lien pemet d'englober le contenu de la page qui doit être cliquable. Elle nécessite donc une ouverture <a> et une fermeture </a>, sans quoi tout sera cliquable sur la page.

  • L'attribut le plus important est href, qui contient la destination du lien.

Les liens internes

Un lien interne permet de naviguer entre les pages d'un même site Web.

Exemple :

Pour se rendre sur la page Contact du site : 

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

Utilise les liens internes pour construire la navigation de ton site.

<a href="index.html">Accueil</a>
<a href="produits.html">Produits</a>
<a href="apropos.html">À propos</a>

Les liens externes

Un lien externe dirige l'utilisateur vers un autre site Web.

Exemple :

Pour se rendre sur le site de Wikipédia : 

<a href="https://www.wikipedia.org">Wikipédia</a>

Utilise les liens externes pour amener l'utilisateur sur un autre site.

Astuce

Utilise l'attribut target="_blank" pour ouvrir l'autre site dans un autre onglet et conserver ton site ouvert.

<a href="https://www.youtube.com" target="_blank">YouTube</a>

Les ancrages

Un ancrage permet de se déplacer rapidement vers une section précise de la même page.

Cette technique est pratique pour les pages longues.

Étape 1 : Ajouter un identifiant

Un identifiant permet de retrouver un élément dans la page.

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

Étape 2 : Créer le lien

Appeler l'identifiant pour se rendre à son emplacement.

<a href="#contact">Aller à la section Contact</a>

Lorsque le lien <a> est cliqué, la page défile automatiquement jusqu'à l'élément dont l'identifiant est indiqué.

Exemple complet d'ancrages

<h1>Mon site Web</h1>

<a href="#services">Services</a>
<a href="#contact">Contact</a>

<h2 id="services">Services</h2>
<p>Description des services...</p>

<h2 id="contact">Contact</h2>
<p>Informations de contact...</p>

Les liens permettent de naviguer rapidement d'une section à l'autre sur la page actuelle.

Bonnes pratiques

✅ Utiliser un texte descriptif.

<a href="horaire.html">Consulter l'horaire</a>

❌ Éviter les liens vagues.

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

✅ Vérifier que la destination existe.