HTML5 — Et si on évitait la balise «section» dans une balise «article» ?

Ce billet fait partie d’une série de notes rapides prises lors de ma lecture des spécifications HTML5. Aujourd’hui, c’est le commentaire de Romy qui me donne l’occasion de rebondir sur le découpage d’une page web avec HTML5 et plus particulièrement la balise `section`. Dans ce billet, je m’éloigne un peu du commentaire de Romy et je voudrais souligner qu’elle a parfaitement raison quand elle dit que le rôle des balises `header` et `footer` est clair mais que leur traduction en En-tête et Pied de page prête à confusion ; il faudrait peut-être introduire la notion de meta information.

La balise section

Dans l’article Éléments HTML 5 de structure on trouve un exemple de l’utilisation d’une balise `section` dans une balise `article`. Si j’ai bien compris la partie des spécifications consacrée à la notion de Sectioning Content et à l’élément section, ce dernier agit comme une «remise à zéro» de la hiérarchie des niveaux de titres.

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading

Mettre une balise `section` à l’intérieur d’une balise `article` n’est donc pas l’idéal : le `h1` du titre de l’article (et les éventuels éléments présents dans son `header`) n’est plus en relation avec les niveaux de titres situés dans le corps de l’article lui-même. Et ce, d’autant plus que l’élément article possède également le statut de Sectioning Content. Il vaudrait mieux faire le contraire.

Ainsi, au lieu de :

body
    header
    div#content
        article
            header
            section

Je trouve plus logique d’utiliser :

body
    header
    section#content
        article
            header
            div.hentry

`div.hentry` n’est pas une obligation : on pourrait très bien s’en passer en attaquant directement l’article sous le header mais on a généralement besoin d’élément permettant de gérer les padding et autres margin ou placer un background. Utilisation qui est dans les cordes de notre bonne vieille balise `div` désormais réservée au scripting ou à l’application de styles CSS.

La balise nav

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

L’élément `nav` possède également des propriétés de Sectioning Content. Il ne serait donc pas très judicieux de l’englober avec une balise `section`. Celà dit, il est facile de confondre la balise `nav` avec ce que l’on appelle la Sidebar. Une barre latérale contient souvent des liens qui pointent vers des pages intérieures du site (catégories, derniers billets, commentaires récents, etc.) mais on y trouve aussi toute sortes de contenus qui ne pointent nullement vers le site (textes de présentation, blogroll, publicités, listes des derniers tweets, etc.).

Pour ma part, je réserverais l’élément `nav` aux menus de navigation tels que : Breadcrumbs, listes des pages et des catégories, pages suivantes et précédentes, liens d’évitement, etc.

Ce qui m’amène à continuer la structure précédente :

body
    header
    section#content
        article
            header
            div.hentry
    section#sidebar-1
        nav#category
        section#blogroll

Ici, l’imbrication des sections n’est pas préjudiciable à la hiérarchie des titres de niveaux `hn`, puisque chaque section (y compris `nav`, donc) est indépendante et possède sa propre hiérarchie.  C’est pourquoi je n’ai pas retenu l’élément `aside` pour remplacer `nav` en raison de la diversité des contenus présent dans une sidebar. Toutefois, lorsque les éléments de la « barre latérale » se rapportent globalement au contenu principal  (les articles en l’occurrence), il vaut mieux se tourner vers `aside`.

Bref, HTML5, des fois c’est facile, des fois… pas facile. Rassurez-vous (ou pas) : j’aurais l’occasion de revenir sur HTML5 plus souvent qu’à mon tour car écrire sur ce sujet me permets de sortir un peu la tête des spécifications !