Sunfox


Class ou id ?

Pour définir le style CSS d’un élément d’ XHTML, que choisir entre une classe (.robert) et un id (#robert) quand cela donne apparement le même résultat ?
que choisir entre un <div class="robert"> et un <div id="robert"> ?

Simplement :

  • il ne peut y avoir qu’un seul id dans un document
  • un élément ne peut avoir qu’un seul id

L’on peut donc avoir

<div class="robert"></div>
<div class="robert"></div>
<div class="robert pouet"></div>

Mais PAS :

<div id="robert"></div>
<div id="robert"></div>
<div id="robert pouet"></div>

Quel est alors l’avantage d’utiliser l’id s’il est si restrictif ?

  1. Utiliser du Javascript.

    En javascript on utilise l’id pour désigner tel ou tel élément par getElementById (prendre élément par son id). C’est une méthode très rapide pour pointer sur un élément.

  2. Ancres.

    Grâce à l’id on peut faire un lien sur une partie de la page en utilisant un lien de type :

    <a href="#robert">lien</a>

    Lien qui pointera sur l’élément de la page ayant un id tel que :

    <strong id="robert">contenu</strong>

    Autre exemple :

    <body id="top">
    <a href="#top">haut de la page</a>
  3. L’aspect sémantique de la chose.

    L’id a une valeur d’unicité et de chose à laquelle on peut se réferrer ou vers laquelle on peut faire un lien, on ne doit donc utiliser l’id que pour les éléments stables d’une page comme pour les grandes sections d’une page. Donner un id à un élément lui donne une autre dimension : il en devient plus important et unique.

👨🏻‍🦰 Sunny Ripert

est un développeur web vivant à ParisContactArchives

Textes et contenus sous licence Creative Commons.