🔗 Les différents types de liens en HTML

Comprendre, choisir et utiliser correctement les liens dans un site web moderne.

1️⃣ Lien vers une ancre (dans la même page)

Permet de faire défiler la page vers un repère identifié par un id.

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

<section id="contact">

Usage : landing page, FAQ, page longue.

2️⃣ Lien vers une autre page du site

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

Usage : menu principal, navigation classique.

3️⃣ Lien vers un site externe

<a href="https://www.openclassrooms.com" target="_blank" rel="noopener">
  OpenClassrooms
</a>

Pourquoi rel="noopener" ? Sécurité et bonnes pratiques modernes.

4️⃣ Lien vers un fichier (PDF, ZIP…)

<a href="documents/cours.pdf" download>Télécharger le PDF</a>

Usage : supports de cours, ressources, modèles.

5️⃣ Lien vers un email

<a href="mailto:contact@monsite.fr">Envoyer un mail</a>

6️⃣ Lien téléphone (mobile)

<a href="tel:+33612345678">Appeler</a>

Très utilisé en responsive design.

7️⃣ Image cliquable

<a href="index.html">
  <img src="logo.png" alt="Logo">
</a>

Souvent utilisé pour le logo → retour accueil.

⚠️ Erreurs fréquentes

• Oublier le https://
• Mettre des accents dans les noms de fichiers
• Mauvaise casse (Contact.html ≠ contact.html)
• Oublier le dossier (images/logo.png)
• Mettre des espaces dans les noms de fichiers