Attribut de classe HTML
L'attribut de classe HTML est utilisé pour spécifier un ou plusieurs noms de classe pour un élément. Généralement, l'attribut de classe fait référence à une classe dans une feuille de style. Le nom de la classe est sensible à la casse.
Cet attribut peut également être utilisé par JavaScript via le DOM HTML pour apporter certaines modifications aux éléments HTML ayant un nom de classe spécifié.
En HTML5, vous pouvez utiliser l'attribut de classe pour n'importe quel élément HTML.
En HTML 4.01, l'attribut de classe ne peut pas être utilisé avec les éléments suivants : <head>, <html>, <base>, <basefont>, <param>, <style>, <meta>, <script>, et <title>.
Bien qu'il n'y ait pas d'exigences spécifiques pour le nom des classes, il est préférable d'utiliser des noms décrivant l'objectif sémantique de l'élément, et non sa présentation. Le nom doit commencer par une lettre (a-z ou A-Z), un tiret (-) ou un trait de soulignement (_), et peut être suivi de lettres, de chiffres (0-9), de traits de soulignement et de tirets.
Syntaxe
Syntaxe de l'attribut de classe HTML
<tag class="classname"></tag>Exemple de l'attribut de classe HTML :
Exemple de l'attribut de classe 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, si vous souhaitez sélectionner des éléments avec une classe spécifique, utilisez un point (.) suivi du nom de la classe.
Exemple de l'attribut de classe HTML utilisé avec CSS :
Exemple de l'attribut de classe 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 de classe à l'aide de JavaScript. La propriété classList fournit des méthodes pour ajouter, supprimer ou basculer des classes dynamiquement.
Exemple de l'attribut de classe HTML utilisé avec JavaScript :
Exemple de l'attribut de classe HTML avec JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="demo">Click the button to add a class.</p>
<button onclick="document.getElementById('demo').classList.add('highlight')">Add Class</button>
</body>
</html>Les éléments HTML peuvent également avoir plus d'un nom de classe. Chacun d'eux doit être séparé par un espace.
Exemple de l'attribut de classe HTML avec plusieurs noms de classe :
Exemple de l'attribut de classe 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>Différentes balises, telles que <h2> et <p>, peuvent avoir le même nom de classe et le même style.
Exemple de l'attribut de classe HTML avec les éléments <h2> et <p> :
Exemple de l'attribut de classe HTML
<!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>Pratique
Quel est l'utilité de l'attribut de classe en HTML ?