OUJOOD.COM
À quoi servent les attributs de la balise <a> ?
LES BALISES HTMLLa balise <a> est l'élément qui crée des liens hypertextes en HTML — ces zones cliquables qui relient les pages entre elles. Sans attributs, elle n'est qu'un conteneur inerte. C'est la combinaison de ses attributs qui détermine où mène le lien, comment il s'ouvre, ce qu'il communique aux moteurs de recherche, et s'il expose ou non l'utilisateur à des failles de sécurité.
Ce guide couvre chaque attribut dans l'ordre alphabétique : ceux qu'on utilise au quotidien, ceux liés au SEO et à la sécurité, et ceux supprimés en HTML5 qu'il faut éviter.
charset (obsolète)
coords (obsolète)
href — l'attribut central
hreflang — langue de la page cible
media — type de support
name (obsolète)
rel — relation et sécurité
rev (supprimé)
shape (obsolète)
target — où s'ouvre le lien
type — format MIME du fichier cible
charset — pourquoi cet attribut n'a jamais fonctionné
Compatibilité : aucune — non reconnu par les navigateurs modernes.
charset était censé indiquer l'encodage du document pointé par le lien. Il n'a jamais été adopté par les navigateurs et a été supprimé en HTML5. Pour déclarer l'encodage d'une page, on place <meta charset="UTF-8"> dans son propre <head>. En 2026, cet attribut n'a aucun effet — ne l'incluez pas.
Syntaxe (obsolète, à titre informatif)
<a charset="valeur">
| Valeur | Description |
|---|---|
| character_set | Jeu de caractères du document lié : UTF-8 pour Unicode, ISO-8859-1 pour l'alphabet latin occidental. |
coords — les zones cliquables sur image, façon HTML4
Compatibilité : anciennement Firefox et Opera uniquement — obsolète en HTML5.
coords définissait des zones cliquables sur une image via des coordonnées géométriques, en combinaison avec shape. Cette technique n'est plus supportée par les navigateurs modernes. La solution actuelle est <area> dans une <map>, qui produit le même résultat de façon standardisée.
Syntaxe (obsolète)
<a coords="valeur">
| Valeur | Description |
|---|---|
| x1,y1,x2,y2 | Avec shape="rect" : coin supérieur gauche (x1,y1) et coin inférieur droit (x2,y2). |
| x,y,rayon | Avec shape="circle" : centre du cercle (x,y) et rayon en pixels. |
| x1,y1,...,xn,yn | Avec shape="poly" : coordonnées de chaque sommet du polygone. |
L'exemple ci-dessous montre l'ancienne façon de créer des zones cliquables sur une image. Cette syntaxe est remplacée aujourd'hui par <map> + <area> :
<!-- Exemple historique : zones cliquables via coords (obsolète) --> <object data="images/planetes.gif" alt="Planètes" type="image/gif" usemap="#planetes"> <map name="planetes"> <!-- Zone rectangulaire pour le Soleil --> <a href="https://fr.wikipedia.org/wiki/Soleil" shape="rect" coords="0,10,90,280">Le Soleil</a> <!-- Zone circulaire pour Mercure, rayon 10px --> <a href="https://fr.wikipedia.org/wiki/Mercure_(plan%C3%A8te)" shape="circle" coords="142,150,10">Mercure</a> <!-- Zone circulaire pour Mars, rayon 30px --> <a href="https://fr.wikipedia.org/wiki/Mars_(plan%C3%A8te)" shape="circle" coords="210,150,30">Mars</a> </map> </object> <p><strong>Note :</strong> Utilisez aujourd'hui <map> et <area> pour les images interactives.</p>
href — l'attribut qui transforme un texte en lien
Compatibilité : tous les navigateurs modernes.
href (Hypertext Reference) est l'attribut central de la balise <a>. Sans lui, <a> n'est qu'un conteneur sans comportement de navigation — le texte s'affiche mais rien ne se passe au clic. Dès qu'on ajoute href, le texte devient un lien cliquable.
Quatre façons courantes de renseigner href :
- URL absolue : lien vers un site externe avec le protocole complet (
https://...) - URL relative : lien vers une autre page du même site, sans domaine
- Ancre : lien vers une section de la page, avec
#id - Email : ouvre le client de messagerie avec
mailto:
Syntaxe
<a href="URL">
| Type | Exemple |
|---|---|
| URL absolue | href="https://www.example.com/page.html" |
| URL relative | href="contact.html" |
| Ancre interne | href="#section1" |
href="mailto:contact@example.com" |
<!-- Lien externe : toujours ajouter rel="noopener noreferrer" avec target="_blank" --> <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer"> Consulter la documentation MDN </a> <!-- Lien interne : pointe vers une autre page du même site --> <a href="contact.html">Nous contacter</a> <!-- Ancre : le navigateur défile jusqu'à l'élément dont l'id est "apropos" --> <a href="#apropos">À propos de nous</a> <!-- Email : ouvre le client de messagerie de l'utilisateur --> <a href="mailto:bonjour@monsite.com">Envoyer un email</a>
En résumé : href est le seul attribut sans lequel <a> ne fait rien. Tous les autres attributs de cette page ne sont valides que si href est présent — sauf name, désormais obsolète.
hreflang — comment indiquer la langue de la page cible
Compatibilité : tous les navigateurs modernes.
hreflang indique la langue du document vers lequel pointe le lien. Il n'est valide que si href est présent. Les navigateurs ne l'affichent pas visuellement — son intérêt est avant tout SEO : Google s'en sert pour comprendre la structure multilingue d'un site et servir la bonne version aux bons utilisateurs.
Pour un site multilingue complet, on combine hreflang dans les liens <a> et dans les balises <link rel="alternate" hreflang="..."> placées dans le <head>.
Syntaxe
<a hreflang="code_langue">
| Valeur | Langue |
|---|---|
| fr | Français |
| en | Anglais |
| es | Espagnol |
| ar | Arabe |
<!-- Lien vers la version anglaise de la page --> <a href="https://example.com/en/article" hreflang="en"> Read this article in English </a> <!-- Lien vers la version arabe --> <a href="https://example.com/ar/article" hreflang="ar"> اقرأ هذا المقال بالعربية </a>
media — pour quel support le document lié a-t-il été conçu ?
Compatibilité : tous les navigateurs modernes (HTML5).
media précise pour quel type de support le document lié a été conçu — écran, impression, projecteur. Il fonctionne comme les media queries CSS. En pratique, il est purement indicatif : les navigateurs ne l'utilisent pas pour filtrer ou conditionner le chargement. Il sert à documenter l'intention du lien pour des outils d'analyse automatique.
Syntaxe
<a media="valeur">
| Opérateur | Rôle |
|---|---|
| and | Combine deux conditions (les deux doivent être vraies) |
| not | Exclut un type de périphérique |
| , | Équivaut à "ou" (au moins une condition est vraie) |
| Valeur | Description |
|---|---|
| all | Tous les périphériques (valeur par défaut) |
| screen | Écrans d'ordinateurs et de smartphones |
| Impression ou aperçu avant impression | |
| braille | Afficheurs braille |
| tv | Téléviseurs |
| projection | Projecteurs |
| Critère | Exemple |
|---|---|
| min-width / max-width | media="screen and (min-width:768px)" |
| orientation | media="all and (orientation:landscape)" |
| resolution | media="print and (resolution:300dpi)" |
| aspect-ratio | media="screen and (aspect-ratio:16/9)" |
name — l'ancre HTML4 remplacée par id
Compatibilité : tous les navigateurs, mais obsolète depuis HTML5.
name servait à nommer un point d'ancrage dans une page pour que d'autres liens puissent y pointer via href="#nom". Depuis HTML5, on place l'attribut id directement sur la balise cible — plus propre, plus universel, et compatible avec CSS et JavaScript.
Syntaxe (obsolète)
<a name="valeur">
<!-- Ancienne méthode HTML4 : à ne plus utiliser --> <a name="section1"></a> <h2>Introduction</h2> <!-- Méthode HTML5 recommandée : id directement sur l'élément cible --> <h2 id="section1">Introduction</h2> <!-- Lien vers cette ancre depuis n'importe quelle partie de la page --> <a href="#section1">Aller à l'introduction</a>
rel — comment déclarer la relation du lien et protéger l'utilisateur
Compatibilité : tous les navigateurs modernes.
rel (relationship) décrit la nature du lien entre la page courante et la page cible. Les navigateurs ne l'affichent pas, mais il joue un rôle direct pour les moteurs de recherche et pour la sécurité. Deux combinaisons sont obligatoires en 2026 :
rel="noopener noreferrer"— à ajouter systématiquement avectarget="_blank"pour bloquer la faille de tabnapping (voir section target).rel="nofollow"ourel="sponsored"— pour les liens dont vous ne voulez pas garantir la fiabilité aux moteurs de recherche (liens payants, contenus externes non vérifiés).
Syntaxe
<a rel="valeur">
| Valeur | Description |
|---|---|
| alternate | Version alternative du document (traduction, version imprimable) |
| author | Page de l'auteur du contenu |
| bookmark | URL permanente pour les marque-pages |
| help | Page d'aide associée au document |
| license | Licence ou droits d'utilisation du contenu |
| next | Page suivante dans une série |
| prev | Page précédente dans une série |
| nofollow | Demande aux robots de recherche de ne pas suivre ce lien — liens sponsorisés ou non vérifiés |
| noopener | Empêche la page ouverte via target="_blank" d'accéder à window.opener — protection contre le tabnapping |
| noreferrer | Le navigateur n'envoie pas l'en-tête HTTP Referer au clic — protection de la vie privée |
| prefetch | Suggère au navigateur de précharger la ressource pour accélérer la navigation |
| search | Outil de recherche associé au document |
| tag | Mot-clé qui décrit le document courant |
<!-- Lien externe sécurisé : noopener noreferrer est obligatoire avec target="_blank" --> <a href="https://example.com" target="_blank" rel="noopener noreferrer"> Visiter Example.com </a> <!-- Lien sponsorisé : signaler à Google qu'il est payant --> <a href="https://partenaire.com" rel="nofollow sponsored"> Notre partenaire </a> <!-- Navigation séquentielle : article suivant d'une série --> <a href="partie-2.html" rel="next"> Partie 2 : les sélecteurs CSS → </a>
⚠ noopener et noreferrer peuvent se combiner sur le même attribut, séparés par un espace : rel="noopener noreferrer". noreferrer implique déjà noopener dans les navigateurs modernes, mais il vaut mieux écrire les deux pour la compatibilité.
rev — le miroir de rel supprimé en HTML5
Compatibilité : tous les navigateurs, mais supprimé en HTML5.
rev était le miroir de rel : il décrivait la relation inverse, de la page liée vers la page courante. Cette nuance s'est avérée trop complexe à interpréter de façon cohérente et a été retirée en HTML5. Si vous croisez cet attribut dans du code hérité, supprimez-le — il n'a aucun effet.
Syntaxe (obsolète)
<a rev="valeur">
shape — les formes cliquables sur image, même sort que coords
Compatibilité : anciennement Firefox et Opera uniquement — obsolète en HTML5.
shape définissait la forme géométrique d'une zone cliquable sur une image, en combinaison avec coords. Même verdict que pour coords : utilisez <area> dans une <map>.
Syntaxe (obsolète)
<a shape="valeur">
| Valeur | Description |
|---|---|
| default | Toute la région de l'image |
| rect | Zone rectangulaire |
| circle | Zone circulaire |
| poly | Zone polygonale |
target — où s'ouvre le lien, et la règle de sécurité à ne pas oublier
Compatibilité : tous les navigateurs modernes.
target contrôle où s'ouvre le document lié au clic. Par défaut, sans cet attribut, le lien s'ouvre dans l'onglet en cours. La valeur la plus utilisée est _blank pour ouvrir dans un nouvel onglet.
En résumé : dès qu'on utilise target="_blank", on ajoute obligatoirement rel="noopener noreferrer". Sans ça, la page ouverte peut accéder à l'onglet d'origine via JavaScript (window.opener) et le rediriger — c'est la faille dite "tabnapping". Les navigateurs modernes bloquent ce comportement par défaut depuis 2021, mais l'attribut reste une bonne pratique explicite.
Syntaxe
<a target="_blank|_self|_parent|_top|nomduframe">
| Valeur | Comportement |
|---|---|
| _blank | Nouvel onglet ou nouvelle fenêtre |
| _self | Onglet ou cadre actuel (comportement par défaut) |
| _parent | Cadre parent (iframes imbriquées) |
| _top | Remplace toute la fenêtre du navigateur, sort de tous les cadres |
| nomduframe | Ouvre dans un cadre portant ce nom précis |
<!-- Même onglet : comportement par défaut, rien à préciser --> <a href="page.html">Aller à la page suivante</a> <!-- Nouvel onglet sécurisé : rel="noopener noreferrer" est obligatoire --> <a href="https://example.com" target="_blank" rel="noopener noreferrer"> Ouvrir dans un nouvel onglet </a> <!-- Dans une iframe : remonter au cadre parent --> <a href="accueil.html" target="_parent">Retour à la page parente</a>
type — étiqueter le format du fichier cible avec un type MIME
Compatibilité : tous les navigateurs modernes (HTML5).
type indique le type MIME du fichier vers lequel pointe le lien — une étiquette standardisée qui identifie la nature du fichier (HTML, PDF, image, audio). Comme media et hreflang, il est purement indicatif : le navigateur ne l'utilise pas pour filtrer le chargement. Il n'est valide que si href est présent.
Syntaxe
<a type="type_MIME">
| Type MIME | Type de fichier |
|---|---|
| text/html | Page HTML |
| application/pdf | Document PDF |
| image/png | Image PNG |
| application/json | Données JSON |
| audio/mpeg | Fichier audio MP3 |
Pour la liste complète, consultez le registre IANA des types MIME.
<!-- Lien vers un PDF : type MIME pour informer les outils automatiques --> <a href="rapport-annuel.pdf" type="application/pdf"> Télécharger le rapport annuel (PDF) </a> <!-- Lien vers un fichier JSON --> <a href="donnees.json" type="application/json"> Accéder aux données JSON </a>
Par carabde | Mis à jour le 9 juin 2026