Structure d’un document HTML5
Salut tout le monde! Dans la série guide complet HTML5 nous avons débuté avec une présentation, puis nous avons parlé de la sémantique dans un 2ème article de cette série, après on a traité les modèles de contenu dans un 3éme article.
Dans cet article, nous allons discuter de la manière appropriée de structurer un document HTML5. La compréhension de la façon de structurer correctement vos documents est essentielle pour que vos pages soient interprétées et présentées correctement à l’utilisateur.
La meilleure façon de décrire la structure des documents HTML5 est de les représenter comme une série de sections et de sous-sections. Ces sections peuvent à leur tour être visualisées sous la forme d’un schéma de document. Tout comme une table des matières, si vous voulez. Ce plan est incroyablement important pour vous assurer que votre contenu est lue et affiché correctement. Alors, considérez le document suivant.
Vous pouvez rapidement analyser tout cela et déterminer qu’il s’agit d’arbres, mais ce qui n’est pas vraiment évident ici, c’est la façon dont les informations se rapportent ou même leur importance relative.
Si nous donnons au document un aperçu, vous pouvez voir à quel point les informations sont plus faciles à analyser et à traiter.
HTML5 fonctionne de la même manière. Une structure de document solide non seulement rend votre contenu plus facile à lire, mais il est plus facile pour les moteurs de recherche de le référencer, les lecteurs d’écran et autres agents utilisateurs de naviguer et de trouver des informations pertinentes. Les sections en HTML5 sont générées principalement par l’utilisation de rubriques. Prenez notre point de vue ici.
En utilisant les rubriques, nous pouvons décrire plus ou moins précisément cette structure comme nous voulons.
En HTML5, chaque titre crée une section implicite. Les sous-sections sont créées lorsque l’on utilise un titre inférieur. Donc, dans cet exemple, nous avons un titre de niveau supérieur, représenté ici par h1. Ensuite, nous avons des sous-sections imbriquées, représentées par les niveaux h2 à h4.
Étant donné que beaucoup de votre structure dépend des en-têtes (headings), il est essentiel que vous ayez une stratégie pour utiliser les en-têtes (headings) qui créent la structure de page souhaitée.
Maintenant, l’utilisation de rubriques pour créer des sections est la façon dont nous l’avons fait depuis HTML4. Cela fonctionne, mais il se sent toujours un peu inadéquat pour la plupart des auteurs. Les rubriques aident à définir les contours, mais ils ne regroupent pas le contenu. Maintenant, avant le HTML5, les auteurs regroupent le contenu avec les tags DIV, puis utilisent les attributs de classe ou d’ID pour donner à ces sections un sens plus sémantique comme vous le voyez ici.
Heureusement, HTML5 a introduit de nouveaux éléments de section qui aident les auteurs à ajouter une définition aux documents.
Maintenant, ces éléments de séparation font partie d’un groupe d’éléments nouveaux conçus pour rendre le HTML plus sémantique.Ce sont les éléments article, aside, nav et section. Chaque fois qu’ils sont utilisés, une nouvelle section devrait être créée dans le document. En plus de ces éléments de séparation, il existe également un groupe d’éléments de groupement sémantique qui sont conçus pour regrouper le contenu de façon significative. Ce sont le pied de page (footer) , l’en-tête (header) et les éléments principaux (main éléments). Nous utiliserons chacun de ces éléments un peu plus tard, mais pour l’instant, revenons à notre plan et voyons comment ils peuvent nous aider.
Tout d’abord, remplacez les deux DIV principaux de l’article par des éléments d’article réels. C’est beaucoup plus sémantique et vous pouvez voir que vous pouvez toujours utiliser les attributs de classe ou d’ID pour ajouter d’autres significations si vous en avez besoin.
Ensuite, nous améliorerons leur structure avec un élément de section pour regrouper chacune des sections de contenu d’articles. 
Ensuite, remplaçons les ressources DIV par aside. Sémantiquement, cela indique aux agents utilisateurs que le contenu est lié au contenu principal, mais n’en fait pas nécessairement partie.
En attirant notre attention sur notre contenu de premier niveau, nous pouvons enfin aborder la navigation de la page en utilisant le nouvel élément de sectionnement nav.
Nous allons terminer la structure en ajoutant un élément d’en-tête (header) pour identifier l’en-tête des pages et remplacer notre dernier DIV par un élément de bas de page (footer) pour identifier le contenu du pied de page. 
Alors, qu’est-ce que tous ces changements apportent au plan de notre document? Eh bien, pour la plupart, absolument rien. Vous voyez, HTML5 a introduit un nouvel algorithme décisif qui était censé rendre plus facile pour les autres de créer des contours de documents complexes.
Pour diverses raisons, il n’a encore été implémenté dans aucun agent utilisateur. Donc, pour l’instant, nous dépendons de l’ancienne méthode d’utilisation des en-têtes (headings) pour transmettre les sections et les sous-sections. Ce que l’ajout des nouveaux éléments HTML5 nous permet, c’est améliorer la sémantique de notre contenu, surtout lorsque nous le regroupons et que nos pages sont un peu en avance dans les résultats de recherche d’un agent utilisateur qui pourrait effectivement commencer à implémenter des parties du nouvel algorithme.
