Classes HTML : comment fonctionne l’attribut class ?
Un élément HTML peut être ajouté à une classe HTML à l’aide de l’attribut class. Celle-ci peut ensuite être utilisée en CSS ou en JavaScript afin de manipuler les éléments associés de manière identique.
- Modifiez, partagez et stockez vos fichiers
- Data centers européens certifiés ISO
- Sécurité élevée des données, conforme au RGPD
Que sont les classes HTML ?
Les classes HTML sont utilisées en HTML pour identifier et regrouper des éléments dans une page Web. class est l’un des attributs HTML les plus importants que vous devriez connaître si vous apprenez à utiliser HTML. Les classes permettent aux développeurs de styliser ou de manipuler plusieurs éléments sans avoir à les aborder individuellement.
L’attribut class peut être appliqué à n’importe quel élément HTML.
À quoi servent les classes HTML ?
Les classes HTML sont un outil standard pour les développeurs Web. Elles sont notamment indispensables dans deux domaines d’application :
- Styling d’éléments avec CSS : lorsque vous intégrez CSS dans votre HTML, les classes permettent de définir des styles qui peuvent être appliqués à plusieurs éléments à la fois. Cela permet de maintenir la cohérence du design d’un site Web tout en rendant le code CSS modulaire.
- Manipulation d’éléments avec JavaScript : en utilisant les classes HTML, les programmeurs peuvent facilement sélectionner des groupes spécifiques d’éléments et les manipuler avec du code JavaScript. Ceci est particulièrement utile pour les interactions dynamiques et les interfaces utilisateur qui doivent réagir au comportement de l’utilisateur.
Syntaxe des classes HTML
La syntaxe de définition d’une classe en HTML est très simple : ajoutez l’attribut class à l’élément que vous souhaitez attribuer à une classe et spécifiez le nom de classe correspondant. Dans le code, cela se présente comme suit :
<p class="Classe test">Ce texte appartient à la classe appelée « Classe test ».</p>Dans l’exemple ci-dessus, le paragraphe HTML a été attribué à la classe « Classe test ».
Les noms de classe des classes HTML sont sensibles à la casse. Cela signifie que les majuscules et les minuscules jouent ici un rôle. Dans l’exemple, « classe test » et « Classe test » seraient deux classes HTML différentes.
Cet exemple plus détaillé montre l’utilité des classes :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple d’utilisation de classes HTML</title>
<style>
.highlight {
background-color: blue;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">Voici un exemple d’utilisation de la classe HTML</h1>
<p class="highlight">Ce texte est mis en évidence car il appartient à la classe nommée « highlight ».</p>
<p class="highlight center">Ce texte est mis en évidence et centré, car il appartient aux classes « highlight » et « center ».</p>
</body>
</html>Dans l’exemple de code ci-dessus, la position ainsi que le style des paragraphes et des titres sont influencés à l’aide des classes HTML utilisées, en référençant les classes dans le code CSS. Notez que vous accédez à une classe HTML dans CSS en plaçant un point (.) devant le nom de la classe.
Un seul élément HTML peut appartenir à plusieurs classes. Celles-ci sont simplement listées l’une après l’autre, sans séparateur.
Quelle est la différence entre les classes HTML et les identifiants HTML ?
Outre l’attribut class, HTML connaît également l’attribut HTML id. Bien que les deux attributs aient des objectifs similaires, il ne faut pas les confondre, car il y a quelques différences centrales entre eux :
- Unicité : un identifiant doit être unique dans un document HTML, de sorte que deux éléments ne peuvent jamais avoir le même identifiant. En revanche, les classes peuvent être partagées par plusieurs éléments dans le même document.
- Référencement en CSS : pour appliquer des styles aux classes en CSS, on utilise le point (
.) devant le nom de la classe, tandis que pour les ID, on utilise le dièse (#). - Spécificité : les ID ont une spécificité plus élevée que les classes. Cela signifie que si une ID et une classe sont toutes deux appliquées au même élément HTML et définissent des styles contradictoires, les styles de l’ID ont la priorité. De ce point de vue, la classe peut donc être écrasée.
- 1 certificat SSL Wildcard par contrat
- Fonction incluse Domain Connect pour une configuration DNS simplifiée