Le HTML5 apporte une toute nouvelle structure et hiérarchie dans le code HTML. Cela ne concerne pas que les spécialistes en développement web mais aussi les graphistes qui doivent repenser leurs maquettes, ou bien encore les chefs de projet s’ils rédigent le CCTD (cahier des clauses techniques détaillés) ou bien s’occupent du SEO.
Bien souvent le concept est assimilé partiellement : on met une nouvelle balise çà et là, on adapte un peu sur un template, mais globalement la structure reste la même. Alors qu’avec le HTML5 tout change ! Finis les simples <div> ; si un thème est structuré correctement on peut presque éviter ce genre de balise.
De nouvelles balises pour catégoriser les éléments de la page. Au lieu d’utiliser une div pour un menu on utilisera la balise <nav> ; même chose pour les articles ou les sections. De ce fait, la logique des titres a été entièrement repensée : avant, un titre était celui de la page, il ne pouvait donc y avoir qu’un titre 1 (<h1>) par page, 2 <h2>, etc.
Ce qui était logique puisque c’était le titre de l’élément qui était représenté par la page. Maintenant les robots d’indexation sont capables d’analyser le HTML5 et donc de comprendre la structure, ce qui nous permet de mettre un ensemble de titres par élément et de rendre le tout plus cohérent.
Comme je le dis en introduction, souvent la logique est incomprise et aboutit à des pages avec quelques balises de HTML5 et beaucoup de HTML4.
Ce qui pose un gros problème, car les pages sont reconnues comme utilisant le HTML5 par les robots, mais mal construites. On ne peut pas dire que cela impacte le SEO (car on ne peut pas le prouver), mais il est facile de comprendre qu’il vaut mieux une page entièrement bien construite utilisant le HTML4 qu’une très mal pensée en HTML5 par manque de temps, pour en comprendre le fonctionnement.
Elle indique que vous allez utiliser un menu, en somme un ensemble de liens pour naviguer sur le site ou bien sur la page
Le header est l’en-tête de la page, d’une section ou d’un article.
Le footer est logiquement le pied de page ; de la même manière que le header, il peut être ajouté a une section ou un article.
L’article est nécessaire quand un élément est indépendant des autres. Si cet élément est dissocié de la page cela ne gêne en rien la compréhension de celui-ci. Il peut comprendre un header et un footer mais également des sections.
Une section est l’élément principal, censé être présent un peu partout et pouvant être assimilé à une <div>. La section permet de définir l’ensemble d’un contenu qui peut être différencié d’un autre. Une section peut contenir des articles, un header et un footer.
L’aside doit contenir des informations additionnelles relatives à la section/page/article. Ces informations, si elles sont enlevées de la page, ne doivent pas gêner la compréhension de celle-ci.
La balise <main> est un peu oubliée quand on parle de HTML5, mais elle est importante car elle permet, à la manière d’une section, d’entourer du contenu. La seule différence c’est qu’elle ne s’utilise qu’une seule fois pour entourer l’ensemble du contenu de la page à l’exception du header et du footer.
Les titres sont donc relatifs a l’élément parent. Il peut y avoir un h1 par section, ou bien par article. Il ne faut plus penser par page mais par « bloc » ; à chaque partie sont ensemble de titres.
Beaucoup de sites et d’articles traitent de ce sujet, mais beaucoup restent approximatifs (dont celui-ci qui se veut une première initiation et n’énumère pas toutes les nouvelles balises). Je vous invite fortement à jeter un coup d’oeil même rapidement à la documentation sur les balises du HTML5
Non je ne mettrai pas de schémas dans cet article. Bien que cela aide à comprendre, c’est aussi le meilleurs moyen de cantonner votre esprit à un dessin qui ne représentera qu’une possibilité du HTML5, sans retenir celles présentées ici. Beaucoup de schémas, d’exemples et de sites existent (attention beaucoup d’entre eux sont faux !). Le site HTML5 doctor se propose de vous accompagner lors de votre mise à niveau au HTML5, ou bien encore le guide d’alsacréation qui est très complet. Mais le mieux reste de vous rendre sur la documentation complète (et fastidieuse) de la W3C : vous y trouverez toutes les informations nécessaires.
Certes, il en résulte une page plus « complexe », un certain temps pour comprendre le fonctionnement et encore plus pour l’expliquer à votre équipe. Mais cela contribue à un web plus intelligent et prépare le terrain pour de futurs langages qui auront besoin de ces éléments pour fonctionner ! Les robots d’indexation sont plus à même de mettre en avant votre contenu, car il savent ou il se trouve et donc il y aura moins de temps passé sur le SEO, les open-graphes, et bien d’autres choses.
Si cet article vous a plu, nous vous invitons à découvrir notre agence developpement web et à télécharger notre livre blanc « Les 11 commandements d’un site internet qui convertit vos visiteurs en clients »
Voir les commentaires
Ça ne coute rien de rappeler les bases. La preuve, je viens d'apprendre l’existence de la balise "main", alors que ça faisait longtemps que je me demandais pourquoi il n'existait pas une balise prédéfinie pour remplacer le moche .
Merci bien.