Maîtrisez la création de liens hypertextes avec la balise <a> : navigation, emails, téléphones et bien plus pour connecter vos pages.
La balise <a> (anchor) crée des liens hypertextes, l'essence même du World Wide Web inventé par Tim Berners-Lee.
<a href="..."> - Définit la destination
Texte, images ou éléments cliquables
</a> - Termine le lien
Voici différents types de liens :
Les liens peuvent contenir du texte formaté ou même des images cliquables.
Découvrez tous les types de liens possibles : externes, internes, emails, téléphones, fichiers et bien d'autres protocoles.
Explorez tous les attributs disponibles pour contrôler le comportement, l'accessibilité et la sécurité de vos liens.
Destination du lien. Sans cet attribut, <a> n'est qu'un élément inline.
Où ouvrir le lien. Contrôle l'onglet ou la fenêtre de destination.
Relation entre la page courante et la destination. Important pour la sécurité.
⚠️ target="_blank" sans rel="noopener"
est une vulnérabilité de sécurité !
Force le téléchargement au lieu de l'affichage
Info-bulle descriptive au survol
Langue de la page de destination
Type MIME du fichier lié
Sélecteurs pour CSS et JavaScript
Données personnalisées pour JavaScript
<!-- Lien externe sécurisé -->
<a
href="https://github.com/microsoft/vscode"
target="_blank"
rel="noopener noreferrer external"
title="Dépôt GitHub de VSCode (nouvel onglet)"
class="external-link"
>
Voir sur GitHub
</a>
<!-- Email avec sujet et contenu pré-remplis -->
<a
href="mailto:support@devweb-academy.com?subject=Question%20HTML&body=Bonjour,%0A%0AJ'ai%20une%20question%20concernant..."
title="Envoyer un email à notre support"
class="email-link"
>
📧 Contacter le support
</a>
<!-- Téléchargement de fichier -->
<a
href="documents/guide-html-2025.pdf"
download="Guide-HTML-DevWeb-Academy.pdf"
type="application/pdf"
title="Télécharger le guide complet (PDF, 2.5 MB)"
class="download-link"
data-track="download"
data-file="html-guide"
>
📥 Télécharger le guide (PDF)
</a>
<!-- Lien vers section avec navigation fluide -->
<a
href="#section-pratique"
title="Aller à la section Pratique"
class="anchor-link smooth-scroll"
role="button"
>
⚓ Exercices pratiques
</a>
<!-- Lien téléphone avec formatage -->
<a
href="tel:+33-1-42-34-56-78"
title="Appeler notre service client"
class="phone-link"
>
📞 01 42 34 56 78
</a>
<!-- Lien image cliquable -->
<a
href="gallery/photo-full-size.jpg"
title="Voir l'image en taille réelle"
class="lightbox-trigger"
data-lightbox="gallery"
>
<img
src="gallery/photo-thumbnail.jpg"
alt="Aperçu de la photo - cliquer pour agrandir"
width="200"
height="150"
/>
</a>Découvrez les règles essentielles pour créer des liens accessibles, performants et sécurisés qui améliorent l'expérience utilisateur.
"Cliquez ici",
"En savoir plus"
"Télécharger le rapport annuel 2024"
Empêche l'accès à window.opener
et cache le referrer HTTP.
Configurez une Content Security Policy pour contrôler les domaines autorisés dans vos liens.
Mettez en pratique vos connaissances sur les liens HTML avec ces exercices progressifs couvrant tous les types de liens.
Créez un système de navigation complet avec menu principal, fil d'Ariane et liens de bas de page.
Créez une page de contact complète avec tous les moyens de communication et téléchargements utiles.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercices - Liens HTML</title>
<style>
/* Styles pour les exercices */
body { font-family: Arial, sans-serif; line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.nav-main { background: #f8f9fa; padding: 15px; margin-bottom: 20px; }
.nav-main ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.breadcrumb { background: #e9ecef; padding: 10px; margin-bottom: 20px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.contact-card { border: 1px solid #ddd; padding: 20px; border-radius: 8px; }
.external-link::after { content: " 🔗"; }
.download-link::before { content: "📥 "; }
footer { background: #343a40; color: white; padding: 30px 0; margin-top: 40px; }
</style>
</head>
<body>
<!-- EXERCICE 1 : NAVIGATION -->
<header>
<nav class="nav-main">
<!-- TODO: Menu principal avec 5 liens -->
<ul>
<li><a href="index.html">Accueil</a></li>
<!-- TODO: Ajoutez 4 autres liens -->
</ul>
</nav>
<!-- TODO: Fil d'Ariane -->
<div class="breadcrumb">
<!-- Exemple: Accueil > Section > Page actuelle -->
</div>
</header>
<div class="container">
<h1 id="top">Exercices sur les Liens HTML</h1>
<!-- Navigation rapide -->
<nav>
<h2>Navigation rapide :</h2>
<ul>
<!-- TODO: Liens vers sections de la page -->
<li><a href="#navigation">Navigation</a></li>
</ul>
</nav>
<section id="navigation">
<h2>Exercice 1 : Système de Navigation</h2>
<!-- Contenu de la section -->
</section>
<!-- EXERCICE 2 : CONTACT MULTIMODAL -->
<section id="contact">
<h2>Exercice 2 : Centre de Contact</h2>
<div class="contact-grid">
<!-- Carte Service Client -->
<div class="contact-card">
<h3>📞 Service Client</h3>
<ul>
<!-- TODO: Email support avec sujet pré-rempli -->
<li>Email : <a href="mailto:support@monsite.com?subject=Demande%20de%20support">support@monsite.com</a></li>
<!-- TODO: Téléphone avec format international -->
<li>Téléphone : <a href="tel:+33123456789">01 23 45 67 89</a></li>
</ul>
</div>
<!-- TODO: Carte Commercial -->
<!-- TODO: Carte RH -->
<!-- Carte Réseaux Sociaux -->
<div class="contact-card">
<h3>🌐 Réseaux Sociaux</h3>
<ul>
<!-- TODO: Liens externes sécurisés -->
<li><a
href="https://facebook.com/monentreprise"
target="_blank"
rel="noopener noreferrer"
class="external-link"
>Facebook</a></li>
<!-- TODO: Ajoutez Twitter, LinkedIn -->
</ul>
</div>
<!-- Carte Documents -->
<div class="contact-card">
<h3>📁 Documents à télécharger</h3>
<ul>
<!-- TODO: PDF avec download et type -->
<li><a
href="documents/brochure.pdf"
download="Brochure-Entreprise-2025.pdf"
type="application/pdf"
class="download-link"
>Brochure PDF (2.5 MB)</a></li>
<!-- TODO: Ajoutez ZIP et DOC -->
</ul>
</div>
</div>
</section>
</div>
<!-- Footer avec liens utiles -->
<footer>
<div class="container">
<!-- TODO: Liens footer et retour en haut -->
<p><a href="#top">⬆️ Retour en haut</a></p>
</div>
</footer>
</body>
</html>Vous maîtrisez maintenant les liens HTML sous toutes leurs formes. Explorez les autres aspects du HTML pour créer des sites web complets et interactifs.