DokuWiki

Créer des pages correctement structurées est la base de tout site internet. Un solide structure sémantique permet de véhiculer du sens et de présenter correctement différents types de contenus avec rien de plus que le balisage (markup) de la page.

Une manière d'ajouter du sens est d'organiser votre contenu dans des sections qui véhicule sens et structure. Par exemple il est très standard de contenir les informations introductives dans une section, la navigation de la page dans sa propre partie, le contenu principal dans une région et les informations relatives dans une barre latérale (sidebar). HTML contient de nombreux éléments qui sont conçus pour aider dans la structuration logique et sémantique du contenu de la page.

Dans les précédentes versions d'HTML, créer de nouvelles sections de contenu se faisait uniquement au travers des tags de heading, les balises div étant utilisé pour grouper des zones de contenu ensemble. Les classes et id permettaient aux concepteurs d'attacher davantage de sens aux groupes, bien que ce sens ne soit pas saisi par les user-agents. En HTML5, de nouveaux éléments sectionnant et sémantiques ont été introduit pour aider à représenter des sections utilisé communément et créer des structures de page plus cohérentes/constantes (consistent). Des balises telles que aside, article, footer, header, main, nav et section permettent aux auteurs d'identifier des régions récurrentes/communes et de véhiculer plus de sens sémantique.

Bien que certain de ces éléments soient très spécifiques, dans bien des cas l'élément que vous utiliserez et votre manière de les structurer décideront de leur sens (? make a judgment call). Faites cependant bien attention à ce que la structure représente bien l'outline désiré.

Plus d'info sur les nouveaux éléments sectionnant et leur sémantique :

1. aside
2. article
3. footer
4. header
5. main
6. nav
7. section

Un des concepts fondamentales d'HTML est que le document peut être représenté par un document outline qui résume le contenu de la page. Imaginez un page représentée par une table des matières et vous aurez une bonne idée d'à quoi ces outlines peuvent ressembler. Ces outlines servent d'aides pour des tâches telle que la recherche rapide au sein du document, ou permettre une navigation plus aisée pour les assistive devices.

Avant HTML5, les document outlines étaient généré entièrement à travers l'usage des headings. Un h1 en haut de la page servait à identifier le contenu de la page, et les headings suivant servaient à créer des section et subsections à l'intérieur de ce contenu. Cela signifiait qu'avoir une stratégie sur quand utiliser tel ou tel heading était critique pour maintenir une structure html consistent. En HTML5, un nouvel algorithme a été introduit, qui ajoute les nouveaux éléments sectionnants aux heading elements. Même si celui-ci n'est pas encore (sept. 2014) implémenté par les user-agents il est tout de même recommandé que les auteurs se familiarisent d'eux-même avec afin d'utiliser dès à présent les nouveaux éléments sectionnant et leur sémantique de manière correcte.

Il est toujours conseillé comme une bonne pratique d'utiliser les tags pour établir le document outline. Mozilla a un excellent article sur les section et outlines dans les document HTML que je vous recommande de lire.

Au moment d'écrire ce cours (toujours spet. 2014), le W3C a publié cet avertissement concernant l'algorithme d'outlining :

« Il n'existe actuellement aucune implémentattion de l'algorithme d'outlining au sein des user-agents de navigateur graphique ou de technologie assistive, bien que l'algorithme soit implémenté dans des logiciels tels que des tests de conformité. Par conséquent l'algorithme d'oulining ne saurait être utilisé pour communiquer la structure du document à l'utilisateur. Il est conseillé aux auteurs d'utiliser les différents headings de h1 à h6 pour communiquer la structure de leur document. »

Bien structurer une page HTML est la première étape afin de s'assurer que le contenu est accessible à tous les utilisateurs. Vous devriez aussi utiliser les attributs de rôle WAI-ARIA où cela est approprié afin d'améliorer l'accessibilité et la sémantique. WAI-ARIA est l'acronyme pour Web Accessibility Initiative's Accessible Rich Internet Application. Les attributs de rôle sont une tentative d'identifier un contenu est ses capacités en lui assigant un rôle prédéfini. Ces aides aident les dispositifs assistifs à comprendre ce qu'est un contenu, comment il se relie à d'autres, et comment l'on peut interagir avec lui. Le W3C à de fantastiques ressources sur comment WAI-ARIA fonctionne et comment il devrait être utilisé avec HTML.