Éléments HTML5 de structure

section, article, header, footer, etc.

15 juillet 2009,
par Romy Têtue

Mots-clefs associés à cet article :

Moins évident qu’il y paraît de prime abord, mais très intéressant, HTML5 va swinguer dans nos petites habitudes de composition !

D’un site à l’autre, nous retrouvons des éléments structurels identiques, répondant aux mêmes besoins : une navigation principale, un en-tête, un pied de page et des contenus organisés en différentes sections… Et pourtant, le langage qui sert à structurer le Web reste rudimentaire, ne fournissant pas de véritables éléments d’interface.

La prochaine version du HTML devrait se rapprocher du XML en permettant d’écrire des blocs aux intitulés signifiants. En effet, le HTML 5 définit un nouveau modèle d’organisation des contenus et fourni des éléments de structure : au lieu de monter la page à force de div dotées de class et d’ID distinctifs, comme les sempiternels <div id="header">, <div id="content"> et <div id="footer">, on utilise des balises dédiées, plus explicites : <header>, <article>, <nav> ou encore <footer>.

Sachez qu’il est d’ores et déjà possible d’utiliser ces éléments de structure : si les navigateurs actuels ne les comprennent pas, ils n’en font pas une maladie, et les traitent comme s’il s’agissait de <span> [1]. Fonçons !

Exemple de structure HTML 5

Cet affreux petit schéma vous plongera directement au cœur du sujet :

Exemple de structure HTML 5

Le plus déroutant est certainement la façon dont ces éléments peuvent être imbriqués les uns dans les autres. Il ne s’agit plus tant de définir les blocs principaux de la page, du moins pas seulement... C’est chaque bloc de la page qu’il convient de structurer, avec ces nouvelles balises.

Découvrons ces nouveaux éléments de structure

Attention, les définitions ci-dessous sont tirées d’un brouillon de spécification [2] et sont donc susceptibles d’évoluer. Mais elles donnent déjà une idée, très intéressante, de la façon dont seront structurées les pages web à l’avenir.

body
Comme toujours, l’élément body, unique, délimite le corps du document.
section
Comme son nom l’indique, l’élément section permet de définir les différentes sections thématiques du document, permettant d’en établir le plan, un peu comme les chapitres d’un livre. Une section distingue un bloc logique de contenu (pour les autres blocs, on utilisera des div). Elle peut elle-même se subdiviser en plusieurs sections et être constituée d’un en-tête, d’un pied, et d’une navigation.
nav
L’élément nav signale la navigation principale du site, qu’elle soit en barre de navigation horizontale ou en menu latéral. C’est donc une liste de liens qui conduisent aux autres contenus du site (ou de la page).
article
L’élément article délimite une portion du document. Ce peut être un message de forum, un article de presse, un billet de blog ou toute autre portion de contenu indépendant. Un article imbriqué dans un autre désignera une citation [3].
aside
L’élément aside contient les contenus contextuels, c’est-à-dire en relation thématique avec ce qui l’entoure, mais qu’il est possible d’appréhender séparément du reste de la page, comme par exemple une série de liens « sur le même thème » ou un encadré dans l’article.
h1, h2, h3, etc.
Déjà bien connus, les éléments h1, h2, h3, h4, h5 et h6 sont des titres de différents niveaux, hiérarchiques, permettant de structurer le document.
header
L’élément header est une entrée en matière qui contient la titraille (au moins un hn) et ce qui permet d’identifier la section qu’il amorce (logo). Il peut également contenir quelques liens de navigation interne, un sommaire, un formulaire de recherche, etc. Mais ce n’est pas un résumé ni un chapo descriptif.
footer
L’élément footer contient les informations traditionnelles de pied de page : auteur, droits de reproduction, etc. de la section à laquelle il est appliqué. Cet élément peut être présent plusieurs fois dans la page : dans chaque section, article, etc. Contrairement à ce que son nom laisse entendre, il ne se place pas nécessairement à la fin. Voici un exemple d’application avec explications détaillées : The footer element, by HTML5 Doctor.
address
L’élément address signale les coordonnées de contact de l’article ou de la section parente.

Accrochez-vous bien, car HTML 5 va swinguer dans nos petites habitudes !

Vos commentaires

  • Le 15 juillet 2009 à 21:12, par Valéry En réponse à : Éléments HTML 5 de structure

    Quel serait le doctype à utiliser à ton avis si l’on souhaite insérer des éléments html 5 dans une page web ? J’imagine que les outils de validation automatique s’en scandaliseraient aussi ?

  • Le 15 juillet 2009 à 21:39, par Valéry En réponse à : Éléments HTML 5 de structure

    En fait ce qui est compliqué est que les éléments en question sont utilisés en fonction du sens et ne correspondent pas seulement, comme dans ton exemple, à des notions de mise en page. Ainsi, <header> ne correspond pas seulement à <div id="entete"> mais aussi à <div class="cartouche"> et que l’on peut le trouver au sein d’une section ou d’un article.

    La distinction entre <section> et <article> est subtile. C’est pourquoi le schémas me plonge dans la perplexité : <div id="content"> ne peut-il pas être remplacé également par une <section> ?

  • Le 15 juillet 2009 à 22:37, par Romy Têtue En réponse à : Éléments HTML 5 de structure

    Non car <div id="content"> reste un bloc de composition formel, qui peut contenir l’élément sémantique <section>. Si j’ai bien compris, les sections sont les grandes parties constituant le plan du document, comme un plan de dissertation, comme des chapitres, comme…

    Mais j’ai encore du mal à bien distinguer <article> et <section>. Dans lequel est-il le plus pertinent d’inclure l’autre ?

    Le <header> contient typiquement la titraille, c’est-à-dire l’ensemble des éléments entrant dans la composition d’un titre (surtitre, titre, sous-titre, et sommaire), mais ce n’est pas nécessairement un en-tête, puisque ce n’est pas toujours en haut de page, ni un cartouche, ni un chapô, ni…

    Quand au doctype… le code source du site HTML5 Doctor utilise <!DOCTYPE html>, tout simplement, mais le validateur râle un peu.

  • Le 17 juillet 2009 à 10:11, par Adrien Leygues En réponse à : Éléments HTML 5 de structure

    Hello,

    deux petites infos :

    La page fait 4,12Mo...

  • Le 18 juillet 2009 à 12:40, par Felipe En réponse à : Éléments HTML 5 de structure

    Ce validateur-là râle moins : http://validator.nu/ (à moins que ce ne soit http://html5.validator.nu/ spécifiquement ?)

  • Le 18 juillet 2009 à 16:53, par Nicolas Krebs En réponse à : Éléments HTML 5 de structure

    « La prochaine version du HTML devrait se rapprocher du XML en permettant d’écrire des blocs aux intitulés signifiants. » (Romy Duhem-Verdière)

    Non.

    « HTML 5 définit [...] nouve[eaux éléments] <header>, <article>, <nav> ou encore <footer> »

    Oui. Voir mon commentaire d’il y a deux ans, le dernier brouillon officiel et la dernière version stables des squelettes SPIP.

    « Sachez qu’il est d’ores et déjà possible d’utiliser ces éléments de structure : si les navigateurs actuels ne les comprennent pas, ils n’en font pas une maladie, et les traitent comme s’il s’agissait de  »

    Ça reste à prouver. Voir par exemple les commentaires de Damien Bonvillain.

    « Mais j’ai moi aussi du mal à bien distinguer <article> et <section>. »

    Moi aussi.

  • Le 22 juillet 2009 à 22:31, par Olivier En réponse à : Éléments HTML 5 de structure

    XHTML2 était très prometteur, mais Google et Apple l’ont tué définitivement au profit de cet HTML5, c’est déplorable...
    D’abord, pourquoi pleins de balises qui ne servent à rien ?

    Parce que oui, XHTML2 était du XML et que le clown « Hixie » ne veut pas en entendre parler pour HTML5, ce qui est complètement idiot. XML permet de tout faciliter : code propre, facile à réutiliser, modifier,...

  • Le 9 octobre 2009 à 18:05, par Joe En réponse à : Éléments HTML 5 de structure

    Je rejoins Nicolas Krebs « La prochaine version du HTML devrait se rapprocher du XML » : non point du tout.
    C’est d’ailleurs tout l’intérêt. n’en déplaise à Olivier. Le HTML est un langage de structuration sémantique, nécessairement simple d’usage et souple dans son interprétation. XML — et XHTML 2 tel qu’il s’annonçait — et ses erreurs de parsing n’est pas un langage assez « humain ». HTML doit être « humain ».
    Et rien n’empêche HTML5 d’être écrit proprement ; voire même sous une forme XHTML5…

    Pour moi, <article> est le corps( core, aussi) du document. <section> est une subdivision de ce corps. Dans le cas d’une page constituée de groupes de contenus, <section> permet de diviser et organiser ces contenus, sans être enfant d’<article>.

  • Le 30 juin 2010 à 09:59, par Yoann En réponse à : Éléments HTML 5 de structure

    Quelle drôle d’idée de mettre plusieurs balise header ou footer.
    Je sens qu’on va se mélanger les pinceaux avec cette histoire.
    Un header et un footer faisait amplement l’affaire, pourquoi ne pas avoir choisi d’autres noms pour ces sous-header et sous-footer ?

  • Le 28 juillet 2011 à 11:25, par Labonnerue En réponse à : Éléments HTML 5 de structure

    Les validateurs ne sont pas très fiables parfois...

  • Le 22 février 2013 à 18:08, par Renaud M.G. En réponse à : Éléments HTML5 de structure

    Personnellement je déconseille l’utilisation de plusieurs header et footer, par contre j’inclue la section nav dans le header. Je propose une structure de page sur ce billet : [http://www.responsive-mind.fr/xhtml-5-des-balises-lourdes-de-sens/]

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom