Attribut id HTML
L'attribut id définit un identifiant unique pour un élément HTML, utilisé pour cibler des styles, des liens d'ancrage et des scripts.
L'attribut HTML id attribue un identifiant unique à un élément. Ce nom, unique dans toute la page, vous permet de cibler l'élément depuis CSS, d'y accéder directement via une URL, de le récupérer depuis JavaScript et de le connecter pour l'accessibilité. L'attribut id étant un attribut global, vous pouvez le placer sur n'importe quel élément HTML.
Cette page aborde la règle qu'il ne faut jamais enfreindre (l'unicité), la syntaxe valide d'un id, et les quatre rôles qu'un id joue dans de vraies pages : les liens de fragment, le style CSS, la sélection JavaScript et les associations formulaires/accessibilité. L'attribut id fait partie des attributs globaux acceptés par chaque élément.
La règle fondamentale : un id doit être unique
Une valeur id doit être unique dans l'ensemble du document — deux éléments ne peuvent pas partager le même id. C'est la différence essentielle avec l'attribut class, où un même nom de classe peut être réutilisé sur de nombreux éléments :
id— une valeur, un élément. Utilisez-le pour un seul élément sur la page (une section précise, un champ de formulaire particulier, le titre principal).class— réutilisable, plusieurs éléments. Utilisez-la pour un groupe qui doit avoir le même aspect ou le même comportement.
Si vous dupliquez un id, la page s'affiche quand même, mais les outils se comportent de façon inattendue : getElementById ne retourne que le premier résultat, un lien #fragment saute au premier résultat, et les règles CSS #id s'appliquent de manière imprévisible. Les validateurs signalent les ids dupliqués comme des erreurs.
Syntaxe valide d'un id
Quelques règles permettent de s'assurer qu'un id fonctionne partout :
- Il doit comporter au moins un caractère.
- Il ne doit contenir aucun espace (espaces, tabulations, sauts de ligne).
- Il est sensible à la casse —
mainetMainsont deux ids différents. - Pour une compatibilité maximale, commencez la valeur par une lettre (
a–z,A–Z) et n'utilisez que des lettres, des chiffres, des tirets (-) et des tirets bas (_). Les ids commençant par un chiffre fonctionnent en HTML5 mais nécessitent un échappement en CSS, donc un nom commençant par une lettre est le choix le plus sûr.
<!-- Good -->
<div id="main-content"></div>
<section id="pricing"></section>
<!-- Avoid -->
<div id="main content"></div> <!-- space is invalid -->
<div id="2col"></div> <!-- digit-first: awkward in CSS -->Syntaxe
<tag id="id">...</tag>Exemple de l'attribut id HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#grey {
color: grey;
}
#purple {
color: purple;
}
</style>
</head>
<body>
<h1>Example of the HTML id attribute</h1>
<p id="grey">
It is a grey paragraph.
</p>
<p>This is some text.</p>
<p id="purple">
It is a purple paragraph.
</p>
</body>
</html>Dans l'exemple ci-dessus, CSS cible chaque paragraphe avec le sélecteur #id — un dièse (#) suivi de la valeur de l'id. Comme chaque id n'appartient qu'à un seul élément, seul ce paragraphe est mis en forme.
id et class ensemble
id et class apparaissent souvent sur le même élément. Un schéma courant consiste à utiliser une class pour le style partagé et un id pour l'unique élément que vous devez également lier ou scripter. Dans l'exemple suivant, le titre porte un id unique tandis que plusieurs paragraphes partagent une classe réutilisable :
Exemple des attributs id et class HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#green-bg {
background-color: green;
color: white;
padding: 20px;
text-align: center;
}
.text-grey {
color: grey;
padding: 5px 15px;
}
</style>
</head>
<body>
<h1>Example of the HTML "id" and "class" attributes:</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 id="green-bg">HTML ID attribute</h2>
<p class="text-grey">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
</p>
<p class="text-grey">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book
</p>
<p class="text-grey">
The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Liens vers un id (liens de fragment et signets)
Un lien dont l'href commence par # est un lien de fragment (aussi appelé ancre ou signet). Il pointe vers l'élément de la même page dont l'id correspond au texte après le #. Un clic dessus fait défiler la page jusqu'à cet élément — utile pour les longues pages, les tables des matières et les liens « retour en haut ».
<a href="#pricing">Jump to pricing</a>
...
<section id="pricing">...</section>Vous pouvez également lier un fragment d'une autre page en combinant une URL avec le dièse : <a href="/learn-html/global-attributes#id">…</a>. L'ouverture d'une page avec un fragment dans la barre d'adresse fait défiler directement jusqu'à cet élément.
Exemple d'ajout d'un signet
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
line-height: 1.5;
color: #777777;
}
a {
color: #20c7c1;
display: inline-block;
padding: 5px 15px;
}
strong {
display: block;
color: #1129dc;
}
</style>
</head>
<body>
<h1>Example of the HTML "id" and "class" attributes:</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<a href="#text2">Jump to the text-2</a>
<a href="#text3">Jump to the text-3</a>
<p id="text-1">
<strong>Text number 1</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
</p>
<p id="text2">
<strong>Text number 2</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book
</p>
<p id="text3">
<strong>Text number 3</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
<strong>Text number 4</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
<strong>Text number 5</strong> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Sélectionner un id avec JavaScript
Comme chaque id est unique, c'est le moyen le plus direct d'atteindre un élément précis dans un script. Deux approches courantes :
<button id="save-btn">Save</button>
<script>
// Fastest, dedicated method for ids:
const btn = document.getElementById("save-btn");
// querySelector uses the CSS #id selector (note the hash):
const sameBtn = document.querySelector("#save-btn");
btn.addEventListener("click", () => {
console.log("Saved!");
});
</script>getElementById prend la valeur de l'id sans le #, tandis que querySelector utilise le sélecteur CSS complet #id. Les deux ne retournent que le premier élément correspondant, ce qui est une raison supplémentaire de garder les ids uniques.
Formulaires et accessibilité
Les ids sont la façon dont les éléments se référencent mutuellement, ce qui les rend essentiels pour les formulaires accessibles et la prise en charge des lecteurs d'écran :
<label for="…">connecte une étiquette à un contrôle de formulaire dont l'idcorrespond. Cliquer sur l'étiquette met alors le focus sur le champ, et les technologies d'assistance annoncent l'étiquette lorsque le champ est ciblé.aria-labelledby="…"nomme un élément en utilisant le texte d'un autre élément référencé par sonid.aria-describedby="…"pointe vers un élément (par sonid) qui fournit une aide supplémentaire ou un texte d'erreur.- Liens de saut — un lien « Aller au contenu » (
href="#main") cible l'idde la région principale afin que les utilisateurs au clavier puissent contourner la navigation.
<label for="email">Email address</label>
<input type="email" id="email" aria-describedby="email-help">
<p id="email-help">We'll never share your email.</p>Ici, for et aria-describedby référencent tous deux des ids, de sorte que le navigateur sait que l'étiquette, le champ et le texte d'aide sont liés.
Note sur la spécificité CSS
Le sélecteur CSS #id est très spécifique — bien plus puissant qu'un sélecteur de classe ou d'élément. Cette puissance est aussi un piège : les règles écrites avec des ids sont difficiles à surcharger et conduisent à des « guerres de spécificité » où l'on empile davantage de sélecteurs (ou !important) pour l'emporter. Pour un style réutilisable, préférez les classes ; réservez les sélecteurs #id aux cas véritablement uniques. Pour approfondir le choix entre les deux dans les feuilles de style, consultez CSS id and class.