Sunfox

Le journal de Sunny Ripert


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.

Articles probablement reliés

Commenter


Vous pouvez avoir une jolie icône vous aussi en créant un gravatar.

Vous pouvez y saupoudrer de l'HTML5 avec les balises et suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>.


:D Sunny Ripert

est un développeur web vivant à Paris.

CV, me contacter


Textes et contenus sous licence Creative Commons.
Site crée par mes soins et propulsé par WordPress.