Utilisation des class et ID en HTML

4 janvier 2017

Comme vous le savez, j’aime le travail bien fait et j’essaye de toujours avoir un code propre et une méthode irréprochable et identique pour chaque site internet. Sachant que je code sur notepad++, j’écris à la main tous les liens vers les images, le css, le js etc. Ainsi cette méthode qui est toujours la même me permet de toujours savoir le nom de mes fichiers et le chemin. La structure de base est simple

  • La racine contient les pages du site éventuellement réparties dans des dossiers « article », « produit » etc.
  • Ensuite vient le dossier » img », qui contient toutes les images insérées dans le code source.
  • Un dossier « css » qui contient les feuilles de style et un autre dossier « img » où se trouvent toutes les images de background.
  • Un dossier « js » avec mon javascript
  • Un dossier « include » qui va contenir mon header.php, footer.php, éventuellement menu.php et sidebar.php.


J’ai deux dossiers images oui, comme cela je sais que le chemin source de l’image est toujours ./img/nomdelimage.jpg

Mais quel est le rapport avec les ID et les Class ?

Ne t’énerve pas, j’y viens mon ami.

Depuis quelques jours j’explique les bases du HTML/CSS à des débutants (quelques cours seulement). Et voilà ce qu’on leur apprend : On utilise des class lorsqu’on en a besoin plusieurs fois dans la page, et des ID si l’on en a besoin qu’une seule fois. Du coup je vois des choses qui me choque :

Un <p class=vert> qui comme vous l’imaginez met le texte en vert.

Un <p id=orange> qui met le texte aussi en orange mais cette fois c’est un ID car la personne n’en a besoin qu’une seule fois dans la page.

Je me suis donc posé cette question : Quelle est la bonne méthode ? Car j’ai ma propre méthode, comme chacun je pense. J’utilise les ID pour la structure de mon code HTML avec un div header, ou footer pour exemple. Les class sont elles réservées à la mise en forme du texte. Cette méthode me convient pour le moment mais je suis aussi peut-être complètement dans l’erreur et dans ce cas, je dois vite rectifier le tire.

Et vous, avez vous une méthode différente ?