L'attribut class en HTML
L'attribut class définit un ou plusieurs noms de classe pour un élément, utilisables par CSS et JavaScript pour le cibler et le modifier.
L'attribut HTML class attribue un ou plusieurs noms de classe à un élément. Ces noms constituent le principal point d'accroche que CSS et JavaScript utilisent pour trouver l'élément, le mettre en forme ou le modifier.
Pourquoi utiliser l'attribut class
L'intérêt des classes réside dans la séparation des préoccupations. Votre HTML décrit la structure de la page, tandis que la mise en forme se trouve dans une feuille de style. L'attribut class est le lien entre les deux, et ce lien possède deux propriétés importantes :
- Réutilisable. La même classe peut être appliquée à autant d'éléments que vous le souhaitez — un
<h2>, un<p>et un<button>peuvent tous partagerclass="highlight"et hériter de la même règle. Écrivez le style une fois, appliquez-le partout. - Un sélecteur de ciblage. Une classe est une étiquette sur laquelle vous pouvez effectuer une sélection. En CSS, vous la sélectionnez avec un point (
.highlight) ; en JavaScript, vous la recherchez ou la modifiez via le DOM. Sans classes, vous devriez mettre en forme chaque élément en ligne et vous répéter constamment.
En HTML5, l'attribut class est un attribut global, ce qui signifie que vous pouvez l'utiliser sur n'importe quel élément.
class vs. id
class et l'attribut id servent tous deux à étiqueter les éléments pour les cibler, mais ils répondent à des questions différentes :
- Un
iddoit être unique dans le document — un seul élément porte un identifiant donné. Utilisez-le lorsque vous désignez cet élément précis (un point d'ancrage JavaScript, une cible d'ancre dans la page). - Une
classest réutilisable — un nombre quelconque d'éléments peut la partager, et un élément peut porter plusieurs classes. Utilisez-la chaque fois qu'un style ou un comportement s'applique à un groupe d'éléments.
Pour la mise en forme quotidienne, class est ce dont vous avez besoin la plupart du temps, car le design est construit à partir de motifs répétés et partagés.
Noms de classe valides
Le nom doit commencer par une lettre (a–z ou A–Z), un trait d'union (-) ou un trait de soulignement (_), puis peut contenir des lettres, des chiffres (0–9), des traits d'union et des traits de soulignement. Les noms de classe sont sensibles à la casse, donc card et Card sont des classes différentes. Il est préférable de nommer les classes selon la fonction de l'élément plutôt que son apparence — intro vieillit mieux que big-red.
<!-- Valid -->
<div class="my-card"></div>
<div class="_intro card2"></div>
<!-- Invalid -->
<div class="1card"></div> <!-- cannot start with a digit -->
<div class="my card"></div> <!-- a space here means TWO classes, not one -->La dernière ligne réserve souvent une surprise : un espace à l'intérieur de la valeur d'attribut ne crée pas un seul nom contenant un espace — il sépare la valeur en plusieurs noms de classe.
Syntaxe
<tag class="classname"></tag>Exemple de l'attribut class HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red {
color: red;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<h1>Example of the HTML class attribute</h1>
<p class="red">It is some red paragraph.</p>
<p>This is a some text.</p>
<p class="orange">It is some orange paragraph.</p>
</body>
</html>En CSS, pour sélectionner tous les éléments portant une classe spécifique, écrivez un point (.) suivi du nom de la classe. Consultez les sélecteurs CSS pour découvrir l'ensemble des moyens de cibler des éléments.
Exemple de l'attribut class HTML utilisé avec CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #1c87c9;
color: #ffffff;
padding: 20px;
}
</style>
</head>
<body>
<h1>Example of the class attribute</h1>
<h2 class="title">Heading</h2>
<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 class="title">Heading</h2>
<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.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>Vous pouvez également manipuler l'attribut class depuis JavaScript grâce à la propriété classList de l'élément. Ses trois méthodes les plus utilisées sont :
classList.add('name')— ajoute une classe (ne fait rien si elle est déjà présente).classList.remove('name')— supprime une classe.classList.toggle('name')— ajoute la classe si elle est absente, la supprime si elle est présente. Idéal pour les états activé/désactivé tels que « active » ou « open ».
Exemple de l'attribut class HTML utilisé avec JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="demo">Click a button to change this paragraph's class.</p>
<button onclick="document.getElementById('demo').classList.add('highlight')">Add</button>
<button onclick="document.getElementById('demo').classList.remove('highlight')">Remove</button>
<button onclick="document.getElementById('demo').classList.toggle('highlight')">Toggle</button>
</body>
</html>Les éléments HTML peuvent également avoir plusieurs noms de classe. Chacun d'eux doit être séparé par un espace.
Exemple de l'attribut class HTML avec plusieurs noms de classe
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #202131;
color: #dddddd;
padding: 15px 25px;
}
.text-right {
text-align: right;
}
</style>
</head>
<body>
<h1>Example of multiple classes</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 class="title">London</h2>
<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 class="title text-right">Paris</h2>
<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 class="title">Tokyo</h2>
</body>
</html>Des balises différentes, comme <h2> et <p>, peuvent partager le même nom de classe et le même style.
Exemple de l'attribut class HTML avec les éléments <h2> et <p>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grey-text {
color: #808080;
}
</style>
</head>
<body>
<h1>Example of the class attribute </h1>
<h2 class="grey-text">Heading</h2>
<p class="grey-text">
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>Note sur l'accessibilité
Les noms de classe n'ont aucune signification pour les lecteurs d'écran ou les autres technologies d'assistance — ils n'existent que pour la mise en forme et le scripting. Un class="button" sur une <div> ne sera pas annoncé comme un bouton. Ainsi, une classe ne remplace jamais le choix du bon élément sémantique (utilisez un vrai <button>) ni l'ajout d'ARIA là où c'est nécessaire. Utilisez les classes pour styliser ; utilisez la sémantique pour transmettre le sens.
En HTML 4.01, l'attribut class était interdit sur quelques éléments de niveau head (tels que <head>, <html>, <base>, <meta>, <script>, <style> et <title>). Cette restriction est historique : en HTML5, class est un attribut global autorisé sur tous les éléments, vous n'avez donc plus à vous en préoccuper.