Introduction

Dans l'article sur les conteneurs en HTML, nous avons vu que nous pouvons utiliser des conteneurs génériques en plus des autres conteneurs comme celui du paragraphe `<p>` ou des titres `<h1>`. C'est bien, mais tout seuls, ils ne servent pas à grand chose. Nous allons ajouter des attributs universels à tous ces conteneurs. Universels, car ce sont des attributs communs aux éléments HTML. Ces attributs sont « class » et « id » et ils vont permettre  d'accrocher du CSS ou du JavaScript à nos fameux conteneurs.

L'attribut class

Cet attribut permet d'avoir une ou plusieurs classes associées à un élément du HTML via un nom. Les classes permettent de manipuler ces éléments grâce au CSS ou au JavaScript. Plusieurs éléments peuvent avoir la même classe.

<div class="nom-de-la-class"></div>
<span class="nom-de-la-class">Lorem ipsum</span>

Comme vous pouvez le constater, nous pouvons mettre des attributs à des conteneurs de type « block » ou de type « inline ».
Il est tout à fait possible de mettre plusieurs classes sur le même élément en les ajoutant à la suite les uns des autres avec un espace au milieu :

<span class="class1 class2 class3">Un texte avec plusieurs classes.</span>

Ensuite, en CSS, nous pourrons donner des propriétés à des sélecteurs, mais nous verrons tout cela dans les articles sur le CSS.

 L'attribut id

Cet attribut permet de donner un identifiant à un élément du HTML. Il va permettre d'identifier cet élément de manière unique, oui, je précise bien, de manière unique. Il ne doit pas y avoir un même identifiant pour deux éléments dans un même document.

Voici comment il se compose : 
<div id="identifiant"></div>

Le code suivant sera incorrect, car il y a un même identifiant pour deux éléments : 

<div id="identifiant"></div>
<span id="identifiant"></span>

Tout cela c'est très bien, mais pourquoi utiliser un « id » alors que nous avons déjà les « class » ?

En fait, « l'id » est plus important que la class et passe avant dans la hiérarchie. De plus, et si vous vous rappelez de  l'article sur les liens hypertextes, « l'id » permet de marquer une zone pour des liens hypertextes.

Au fur et à mesure de mes lectures sur le HTML, je me suis rendu compte que de plus en plus de développeurs recommandent de ne plus utiliser « l'îd » pour le CSS et de le laisser pour les liens hypertextes ainsi que pour le JavaScript. Cela permet de rendre les choses plus claires lors du développement. (StackOverFlow et Brad Traversy par exemple). D'ailleurs, les frameworks comme Bootstrap ou Tailwind n'utilisent pas « d'id ». Bien sûr, ce n'est que des conventions, cela sera à vous de voir par rapport à votre expérience de codeur.

À savoir, une class et un id peuvent avoir le même identifiant.

Bon, c'est bien beau tout cela, mais je n'ai toujours pas du CSS... Patience, vous y êtes presque...