La sémantique HTML expliquée aux débutants

14 janvier 2017

J’en parlais dans mon article précédent, j’aime le code propre, et pour avoir un code propre, il faut commencer par avoir un code qui comprend les bonnes balises html. J’ai remarqué ça la semaine dernière lorsque je voyais les étudiants développer leur premier site, mettre tout le texte dans des balises paragraphe, que ce soit de vrais paragraphes, des citations ou encore des listes (des fois même pour les liste ce n’était pas balisé et seulement des saut de ligne).

Lorsqu’ils ont vu mon étonnement, la première réponse que j’ai eu c’était :

Pourquoi mettre un blockquote alors que avec P ça fait pareil ? Pourquoi je vais m’embêter à mettre une liste puisque j’arrive à faire ce que je veux avec des BR ?

Sur le coup j’étais sur le cul j’ai simplement répondu que sémantiquement parlant ce n’était pas juste.

Du coup je me pose la question, Comment leur montrer que la sémantique est utile ? Pourquoi ne pas se servir d’un paragraphe à chaque fois ? Remarque ça peut être drôle avec des p class= »titre1″ ou des p class= »liste ».

Une sémantique HTML pour un beau site

Une idée qui m’est venue comme ça un soir, lorsqu’on doit apprendre à des personnes débutantes le HTML, pourquoi ne pas leur présenter une page simple avec un reset (complet) en css et chaque balise HTML. Cela pourra permettre de bien leur montrer que si on le souhaite, le H1 aussi ressemblera au P, qui ressemblera aussi à la liste et à la citation. Et du coup le seul moyen pour le navigateur (et Google !) de connaitre le type de chaque contenu, c’est de bien baliser son code.

De plus, le fait de bien baliser son code permet de se passer de plusieurs class ou ID pour le css (je ne dis pas qu’il n’y en a pas besoin du tout) et permet aussi une meilleure homogénéité dans ses styles css. Ainsi tous les P auront le même style mais qui ne sera pas le même que les blockquote ou que les titres. Sur ce site, il y a des guillemets améliorés qui sont rajouté automatiquement sur les citations.

Je pense qu’il existe d’autres manières de faire comprendre à des débutants que la sémantique HTML est très importante, c’est la première méthode qui m’est venue à l’esprit.

A ne pas faire
<p>
  Techniques
  <br/>
  <span class="competences">
    • Langages : HTML, CSS, jQuery
    <br/>
    • CMS : WordPress, Joomla
    <br/>
    • Logiciels Suite Adobe CS5.5 : Photoshop, Illustrator, Dreamweaver, Indesign, Première Pro, After Effects
    <br/>
    • Référencement
  </span>
</p>