DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
|<- [[het:Controlling document outlines
]]|[[het:The article element]] ->|

=====Structurer des pages=====

====Véhiculer du sens au travers d'une structure====

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.

====Éléments sectionnant (sectioning elements)====

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 :

  - [[http://www.w3.org/TR/html51/sections.html#the-aside-element|aside]]
  - [[http://www.w3.org/TR/html51/sections.html#the-article-element|article]]
  - [[http://www.w3.org/TR/html51/sections.html#the-footer-element|footer]]
  - [[http://www.w3.org/TR/html51/sections.html#the-header-element|header]]
  - [[http://www.w3.org/TR/html51/grouping-content.html#the-main-element|main]]
  - [[http://www.w3.org/TR/html51/sections.html#the-nav-element|nav]]
  - [[http://www.w3.org/TR/html51/sections.html#the-section-element|section]]

====Document outlines====

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 [[https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document|section et outlines]] dans les document HTML que je vous recommande de lire.

====Avertissement du W3C====

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. »

====attributs de rôle WAI-ARIA====

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 [[http://www.w3.org/TR/2014/WD-aria-in-html-20140626/|fantastiques ressources]] sur comment WAI-ARIA fonctionne et comment il devrait être utilisé avec HTML.