La structure HTML du document
Le premier niveau de découpe HTML va intervenir au niveau de la composition du document et de son contenu. L’objectif est d’en définir les divers modules, ou composantes, tels que l’entête principal, le pied de page, les diverses sections ou articles, etc… on parle de structure générale ou layout.
Une fois encore, HTML5 nous apporte un lot d’éléments structurels qui va permettre de rendre cette opération beaucoup plus sémantique. Bien que le choix soit un peu limité, nous allons pouvoir définir, de manière standard, des zones plus explicites pour les moteurs informatiques, les applications, ou tout autre lecteur. Par exemple, là où nous segmentions le document de la façon suivante :
<div class="header"></div> <div class="footer"></div>
Nous allons pouvoir directement employer :
<header></header> <footer></footer>
La différence entre les deux approches vient du fait que la première n’était aucunement standard… et par exemple, là où un développeur espagnol pouvait utiliser 'cabeza' pour définir l’entête, un développeur hongrois lui, pouvait plutôt avoir recours à 'fej'.. c’est dire la pauvre portabilité des fragments HTML que nous avions à cette époque, et l’interprétation que l’on pouvait en faire ! Lire le sujet d’Andy Clarke – Ten years ago on Stuff and Nonsense: What’s in a name?
Aujourd’hui, avec HTML5, il est vrai que la portabilité et la compréhension de la structure est devenue plus large, bien que, comme le dit John Allsopp dans son article Semantics in HTML5, l’extensibilité aurait pu être de mise.
Aborder une découpe de premier niveau
De manière générale, voici une arborescence de base qui propose un découpage de la page en 4 zones principales, avec bien sûr toute latitudes d’affinement en fonction des contextes et des besoins.
<body> <!-- ENTÊTE --> <header role="banner"> <h1>Site en question</h1> <h2>Slogan du site</h2> <nav role="navigation"> <ul> <li>menu 1</li> <li>menu 2</li> </ul> </nav> <div class="slider"></div> </header> <!-- CONTENU PRINCIPAL --> <main role="main"> <section> <article></article> <article></article> </section> </main> <!-- INFOS COMPLÉMENTAIRES --> <aside role="complementary"> <article></article> <ul><li></li></ul> </aside> <!-- PIED DE PAGE --> <footer role="contentinfo"></footer> </body>
- Un entête <header>, qui va proposer le titre, logo, top navigation, slider et navigation. Attention de ne pas abuser de la balise
<nav>, car rien ne distingue une balise<nav>d’une autre balise<nav>, et ce, au grand dam des lecteurs d’écran, qui peuvent avoir parfois du mal à retrouver, et à distinguer, la navigation principale. Là encore l’attribut role= »navigation », et autres points de repères pourront venir renforcer la nature de chacun des éléments. Certains pourront préférer sortir la balise de navigation principale de ce bloc d’entête. - Un pied de page avec les classiques menus de derniers recours, les infos de mémoire (latests news, réseaux sociaux, les CGV et CGU) et enfin les copyrights. Il peut également être rappelé le menu principal de navigation sans oublier un go to top, si l’aspect vertical de la page est suffisamment développé. On peut également définir et mettre en place, à l’instar d’une barre de Top navigation, une Bottom navigation.
- Un bloc principal qui au travers de la balise structurelle
<main>qui permet de regrouper l’ensemble du contenu principal de la page, et ainsi, d’éviter l’ancienne découpe<div class="maincontent">, ou tout autre association de ce genre. Cependant, l’ensemble des moteurs de recherche arrivent à distinguer, et isoler, ce bloc principal par simple déduction. - En complément, il existe une balise,
<aside>, qui porte parfois à confusion, car on l’associe un peu trop rapidement à une colonne latérale, telle qu’une barre de navigation verticale, et c’est bien là l’erreur. En fait, il faut voir en cette balise un apport de contenu complémentaire, et éventuellement facultatif, à la balise parent qui la contient (aller plus loin, en savoir plus, ce qui ont aimés ont aussi aimés… etc…)
Bien que la plupart des lecteurs d’écran comprennent le sens sémantique des balises HTML5, dans l’exemple ci-contre, chacune des principales balises contiennent un attribut role adapté à leur fonction, afin de renforcer leur prise en compte par des lecteurs d’écran.
Ajouter des niveaux affinant l’ensemble de la page
Au delà de la découpe de blocs de page, nous pouvons apporter plus de granularité avec une découpe plus fine au sein du contenu principal de la page, en introduisant diverses balises de type <article> ou <section>. L’une comme l’autre peuvent s’emboîter l’une dans l’autre. En effet, un article peut être découpé en plusieurs sections (introduction, corps, conclusion…) et une section peut, elle, contenir divers articles (en les classant par rubriques, groupements, etc…).
Les balises <header> et <footer> peuvent également venir enrichir au choix les balises de premier niveau principalement <main> et <aside>, mais aussi <article> et <section> comme toutes autres balises de contenu de niveau plus profond. Attention les balises <header> et <footer> ne peuvent pas contenir de balises <header> et <footer>.
Si aucune des balises structurelles proposé par HTML5 ne satisfait nos besoins en découpe, il nous faut alors nous retourner vers les balises génériques <div> et <span> en n’hésitant surtout pas à définir leurs attributs class et role afin de préciser au mieux l’utilisation de ce bloc de contenu. N’hésitez pas à vous rapprocher du site HTML5 Doctor et de son excellent HTML5 Element Flowchart.
Utilisez directement le service en ligne HTML5 Outliner, ou tout autre plugin du genre, HTML5 Outliner pour Chrome, HTML5 Outliner pour Firefox… pour ne citer qu’eux, afin de faire ressortir l’arborescence et la hiérarchie du contenu de la page.
Aller plus loin
HTML 5 pour les web designers
Jérémy Keith
L'HTML5 est la spécification HTML la plus longue jamais écrite. C'est également la plus puissante et, en un sens, la plus déroutante. Que doivent en retenir les web designers et les développeurs ? Comment exploiter toute la puissance de l'HTML5 dans les navigateurs actuels ? Avec beaucoup de style et d'esprit, Jeremy Keith va droit à l'essentiel dans ce guide de l'utilisateur brillant et divertissant et répond à toutes ces questions, exemples clairs et concrets à l'appui....
Introduction à HTML 5
Bruce Lawson, Rémy Sharp
HTML5 permet de résoudre de nombreux problèmes auxquels sont confrontés régulièrement les développeurs web, et beaucoup d'entre eux ont déjà franchi le pas, quand bien même les spécifications du langage n'ont pas encore été toutes définies. Alors pourquoi pas vous ? Si vous êtes de ceux qui trépignent d'impatience d'employer HTML5, ce livre centré sur la pratique et la réalité du terrain est fait pour vous. Écrit par deux experts, qui l'utilisent dans le cadre de leur travail ...
