Docs HTML exécutables : Lien HTML (a href)

Q: Comment faire un lien en HTML ?

Utilisez l'élément d'ancre : Example . href est la destination et le texte entre les balises est ce sur quoi le lecteur clique.

Q: Comment faire un lien vers une partie précise d'une page ?

Donnez un id à l'élément cible, puis faites un lien vers lui avec un dièse : FAQ et FAQ . Depuis une autre page, ajoutez le dièse à l'URL : .

Q: Pourquoi mon lien mène à la mauvaise page quand j'écris www ?

Sans https://, le navigateur traite www.example.com comme un chemin relatif sur votre propre site, donc le lien mène à quelque chose comme yoursite.com/www.example.com. Écrivez toujours le schéma pour les liens externes : href="https://www.example.com".

Q: Une balise a peut-elle contenir une div ?

Oui. En HTML5, un peut entourer du contenu bloc comme une , un titre et un paragraphe : c'est ainsi qu'on rend une carte entière cliquable. Il ne peut pas contenir un autre lien, un bouton ni aucun autre élément interactif.

Comment faire un lien en HTML

Un lien est un élément d'ancre, <a>, avec un attribut href. href indique où va le lien ; le contenu entre les balises est ce sur quoi le lecteur clique.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

Les navigateurs affichent les liens en bleu souligné et changent le curseur en main. La dernière ligne montre pourquoi href compte : sans lui, <a> est du texte simple. Il n'est ni focalisable, ni cliquable, ni stylisé comme un lien.

URL absolues et relatives

La valeur de href décide où va le lien. Les formes principales :

`href`	Mène à
`https://example.com/page`	Une URL absolue : exactement cette adresse
`/about`	`about` à la racine du site actuel
`about.html`	`about.html` dans le même dossier que la page actuelle
`../index.html`	`index.html` un dossier plus haut
`#pricing`	L'élément avec `id="pricing"` sur cette page
`/help#faq`	La section `faq` d'une autre page de ce site
`mailto:hi@example.com`	Un nouvel e-mail dans l'application de messagerie du lecteur
`tel:+15551234567`	Un appel téléphonique, sur les appareils qui le permettent

Utilisez des URL absolues pour les autres sites et des chemins relatifs à la racine (/about) sur le vôtre : ils continuent de marcher quand la page qui les contient change de dossier.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

La dernière ligne est le bug de lien le plus courant. Sans https://, le navigateur lit www.wikipedia.org comme un nom de fichier dans le dossier actuel.

Les liens e-mail et téléphone ont leur propre page : lien mailto en HTML.

Faire un lien vers une section de la page

Tout élément avec un id est une cible. Faites un lien vers lui avec # suivi de l'id, et le navigateur défile jusqu'à lui. Cliquez sur les liens dans l'aperçu :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

Quelques détails :

L'id doit correspondre exactement, casse comprise. href="#FAQ" ne trouve pas id="faq".
href="#top" et href="#" font défiler jusqu'en haut de la page même si aucun élément n'a l'id top.
Le sélecteur :target stylise la section vers laquelle pointe l'URL actuelle. Sur une vraie page, elle est mise en évidence ; l'aperçu défile sans changer son adresse, donc la mise en évidence n'y apparaît pas.
Pour faire un lien vers la section d'une autre page, ajoutez le dièse à l'URL de cette page : <a href="/docs/html/table#caption">.

Liens d'ancre sous un en-tête fixe

Un en-tête sticky ou fixe cache le haut de la section où vous arrivez. scroll-margin-top sur les cibles lui laisse de la place, et scroll-behavior: smooth anime le saut :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

Supprimez la ligne scroll-margin-top et cliquez à nouveau sur Two : le titre finit caché derrière l'en-tête sombre.

Liens de téléchargement

L'attribut download demande au navigateur d'enregistrer le fichier au lieu de l'ouvrir. Sa valeur, si vous en donnez une, est le nom de fichier proposé :

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download ne fonctionne que pour les fichiers de la même origine que la page (même schéma, même hôte, même port) et pour les URL data: et blob:. Pour un fichier d'une autre origine, même un sous-domaine, les navigateurs l'ignorent et ouvrent le fichier comme un lien normal. Le serveur peut forcer le téléchargement de n'importe quel fichier avec l'en-tête Content-Disposition: attachment.

Un texte de lien qui a du sens

Les utilisateurs de lecteurs d'écran parcourent souvent une page de lien en lien, en n'entendant que le texte des liens. « Cliquez ici » et « Lire la suite » ne leur apprennent rien.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

L'attribut title affiche une infobulle au survol, mais elle n'apparaît ni sur les écrans tactiles ni pour la plupart des utilisateurs au clavier, donc n'y mettez rien d'important.

Rendre toute une carte cliquable

Un <a> peut entourer du contenu bloc : un titre, une image et un paragraphe peuvent former un seul lien. C'est ainsi que l'on construit des cartes cliquables.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block rend toute la boîte cliquable, pas seulement le texte. Gardez le contenu de la carte court, car un lecteur d'écran le lit en entier comme nom du lien. Et n'y mettez jamais un autre lien ou un bouton : les éléments interactifs ne peuvent pas être imbriqués dans <a>.

Les autres attributs de la balise a

Attribut	Rôle
`href`	La destination. Sans lui, `<a>` n'est pas un lien
`target`	Où l'ouvrir ; `target="_blank"` ouvre un nouvel onglet, voir ouvrir un lien dans un nouvel onglet
`rel`	La relation avec la cible : `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	Enregistrer le fichier au lieu de l'ouvrir
`hreflang`	La langue de la page liée, à titre indicatif
`referrerpolicy`	La part de l'URL actuelle à envoyer comme référent

Erreurs fréquentes

Pas de schéma sur une URL externe. href="www.site.com" est un chemin relatif. Écrivez https://.
<a href="#"> pour une action JavaScript. Cela fait défiler jusqu'en haut et ajoute # à l'URL. Si le clic ne mène nulle part, utilisez un <button>.
Un lien dans un lien, ou un bouton dans un lien. Les deux sont du HTML invalide : un second <a> fait fermer le premier trop tôt par l'analyseur, et un clic sur un bouton placé dans un lien n'a pas de cible claire.
Des espaces dans les noms de fichiers. href="my file.html" marche généralement car le navigateur encode l'espace, mais my-file.html évite complètement la question.
« Cliquez ici » comme texte de lien. Décrivez plutôt la destination.
Une casse d'id différente. #Pricing et id="pricing" sont différents.

Questions fréquentes

Comment faire un lien en HTML ?

Utilisez l'élément d'ancre : <a href="https://example.com">Example</a>. href est la destination et le texte entre les balises est ce sur quoi le lecteur clique.

Que signifie href ?

Hypertext reference (référence hypertexte). Il contient l'URL vers laquelle pointe le lien : une adresse complète, un chemin sur le même site comme /about, une section de la page comme #pricing, ou un schéma comme mailto:.

Comment faire un lien vers une partie précise d'une page ?

Donnez un id à l'élément cible, puis faites un lien vers lui avec un dièse : <h2 id="faq">FAQ</h2> et <a href="#faq">FAQ</a>. Depuis une autre page, ajoutez le dièse à l'URL : <a href="/help#faq">.

Pourquoi mon lien mène à la mauvaise page quand j'écris www ?

Sans https://, le navigateur traite www.example.com comme un chemin relatif sur votre propre site, donc le lien mène à quelque chose comme yoursite.com/www.example.com. Écrivez toujours le schéma pour les liens externes : href="https://www.example.com".

Une balise a peut-elle contenir une div ?

Oui. En HTML5, un <a> peut entourer du contenu bloc comme une <div>, un titre et un paragraphe : c'est ainsi qu'on rend une carte entière cliquable. Il ne peut pas contenir un autre lien, un bouton ni aucun autre élément interactif.

Concepts liés