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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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 !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



14 commentaires pour “HTML5 — Et si on évitait la balise «section» dans une balise «article» ?”

  1. piouPiouM dit :

    Tu as mal interprété la recommandation. La reprise du marquage des niveaux de titres par h1 à l’intérieur des sections n’est qu’un exemple pour souligner la possibilité de le faire, sans pour autant rendre le schéma du document incorrect.

    Prends par exemple l’outline de ma page jQuery Color test page. Tu peux constater que mes sections et leurs en-têtes sont correctement reconnues bien que j’utilise des niveaux d’en-tête h2. Tu noteras également que j’emploie les sections pour découper logiquement mon contenu. 1 section = 1 exemple.

    Le découpage en section me permet, en plus de structurer logiquement mon document, d’enrichir mes parties de meta-données telles que des notes que j’ajouterai dans un footer enfant de la section.

    Alors non, ne te passes pas de la balise section qui a une grande importance dans le schéma de ton document ;-)

    Mon seul regret et incompréhension dans le découpage d’HTML5 est le fait qu’il faille ajouter un en-tête aux éléments nav. En effet, en te reportant à mon exemple cité précédemment, tu peux lire un Untitled Section. Il s’agit de ma navigation, considérée comme une section non identifié. En ajoutant une en-tête et un titre (et qu’importe son niveau, de 1 à 6) l’analyse du document est correcte. Mais bon, j’avoue qu’ajouter un titre à une navigation est discutable.

  2. Bruno Bichet dit :

    @piouPiouM — arf, tu as mal interprêté mon billet ;) : en fait, je dis juste que je ne trouve pas judicieux d’utiliser l’élément section à l’intérieur d’une balise article lorsqu’elle contient déjà un header contenant lui-même des niveau de titre. A part ça, je suis déjà un grand fan de la balise section (reste à l’utiliser à bon escient, mais je m’accroche;) )

    En fait, j’ai l’impression que si la section n’est pas directement suivie d’un h1, le outliner indique Untitled Section

  3. piouPiouM dit :

    @bruno ça m’apprendra à lire en biais :D

    Concernant ta dernière phrase, non justement. Si tu te réfères à mon exemple, l’analyse du schéma s’effectue avec succès alors même que j’utilise des h2 dans mes header de section.

    L’important étant de préciser pour chaque section une en-tête, ce qui est logique, la section introduisant une nouvelle partie de l’article, il faut bien l’identifier (autrement, pourquoi créer une séparation ?).

  4. Bruno Bichet dit :

    @piouPiouM — oui, c’est ce que je viens de voir avec l’outliner ; en lisant les specs concernent l’élément section je pensais que les niveaux de titres présents dans d’autres éléments (article, par exemple) servirait implicitement de premier niveau de titre pour la section en cours.

    Du coup, dans un projet j’ai changé des section en div (faut les placer, les 5 légumes par jour…) parce que je ne voulais pas afficher de titres (et le display: none « juste » pour passer l’outliner, j’ai bien essayé, ça marche, mais ce n’est pas très satisfaisant ;)

  5. Neovov dit :

    @piouPiouM : A la place des <section> ça aurait été mieux de mettre des <figure> dans ton exemple :)

    @Bruno : Ton billet prête à confusion. Mettre un <h1> dans une <section> qui est dans un <article> ne va pas enlever la relation entre la <section> et ton <article>. Une section peut être prise indépendamment de ce qui l’entoure. Ton article est une section, donc on peut l’extraire du document. Si tu as besoin d’un découpage de ton article, il faut utiliser <section>. Ca revient à dire qu’on peut prendre une partie de ton article, qu’on peut la comprendre sans lire le reste. Le titre de ta <section> sera à la fois en relation avec ton article, et à la fois indépendant. Ce qui, je trouve, est relativement intelligent.

    En fait j’ai l’impression que tu raisonnes encore en niveaux de titres, alors qu’en HTML5 il faut plutôt raisonner en imbrications de sections.

  6. Bruno Bichet dit :

    @Neovov — « En fait j’ai l’impression que tu raisonnes encore en niveaux de titres, alors qu’en HTML5 il faut plutôt raisonner en imbrications de sections. »

    Oui, c’est un peu ça. Disons que dans le cadre d’un document (littéraire, scientifique, etc.), je vois bien comment utiliser l’élément section. Là où j’ai plus de mal, c’est pour structurer la home d’un site avec des contenus plus ou moins en relation et plus ou moins hétéroclites.

  7. Nicolas F. dit :

    Bon, tout d’abord, MERCI, de défricher la spécification XHTML5 que je n’aurai probablement jamais le temps de lire vu que je suis pris la tête la première dans la prod.

    Par contre, je ne te remercie pas de révéler à ma conscience que XHTML5 est complètement sujet à interprétation. Plus ça avance, plus je me dis que l’intelligence collective qui est censée être réunie dans cette nouvelle version de XHTML5 a été regroupée par une poignée de bureaucrates qui n’ont peut-être jamais été confrontés à la création d’une page web dans un contexte professionnel.

    Bref, autant et sont bien pensés (et simple), autant le modèle de document laisse, selon moi, à désirer. Je crois que je vais attendre que ce soit plus clair pour changer ma façon de coder car là, c’est vraiment flou…

    En même temps, je pense qu’on a le temps avant que XHTML5 s’impose.

  8. Bruno Bichet dit :

    @Nicolas F. — Je te comprends, je pense que les role ou les microformats auraient été bien plus souple pour s’adapter à tous les types de travaux. Comme j’ai déjà eu l’occasion de le dire, j’ai vraiment la conviction que html5 est plus littéraire que web… Et je précise que j’ai une formation bien plus littéraire que technique ;)

    Dans un premier temps, je teste la bon imbrication différenes « sections » avec le outliner http://gsnedders.html5.org/outliner/

    En gros, quand j’ai une section sans titre et que je ne peux ni ne veux en mettre un, je transforme la section en div.

    Là où ça m’ennuie le plus pour le moment c’est que la balise nav crée une section, ce que je trouve un peu farfelu parce que ça limite fortement son utilisation à des grandes sections de navigation structurée… M’enfin.

  9. piouPiouM dit :

    @Neovov pas vraiment à mon avis.

    Mes sections délimitent des parties qui, certes ici, sont nommés exemple mais dont l’intégralité (titre, description, code, démo fonctionnelle) ne peut être considéré comme une illustration de contenu.

    En revanche, effectivement, je devrais peut-être placer les listings dans des figure qui pourrait être, comme le précise la recommandation, être écarté du contenu principal.

  10. ubuntu dit :

    pour moi le html5 sera un langage révolutionnaire,mieux que le XHTML. certains me trouveront bizarre,mais c’est mon avis.Vive le HTML5…

  11. Adrien dit :

    Il est vrai que le language HTML5 est une petite révolution en soit mais de la à dire qu’il est mieux que le XHTML :s ! Après chacun pense comme il l’entend! A bon entendeur …

  12. Merci pour cet article et pour avoir lu ces spécifs. Pour conclure alors ? Le h1 va avec un article ? et une section peut-être parente ou enfant d’un article ? Je ne sais pas si j’ai bien compris tout cela…

  13. Bruno Bichet dit :

    Jean-Luc — J’ai refais une lecture attentive des spec. et ce que j’en ai retirer se trouve dans le billet http://css4design.com/conception-dans-le-navigateur-avec-html5-css3 ;)

  14. […] Ce billet fait partie d'une série de notes rapides prises lors de ma lecture des spécifications HTML5.  […]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site