HTML

HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav

Après avoir maîtrisé la structure globale d'un document HTML5, il faut se pencher sur les nouvelles balises de section.

Article par (Art Director & Creative Designer, Paris)
Créé le , mis à jour le (182657 lectures)
Tags : xhtml, html5, article, section, aside, footer, header, nav

Les éléments de section HTML5, une nouvelle façon de penser

Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l'application web, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu'à regrouper d'autres éléments HTML pour leur affecter un style CSS commun, voire pour interagir avec eux via le DOM... Il ne s'agit donc pas de nouveaux éléments avec des noms génériques : c'est bien plus que ça !

HTML5 inclut la majorité des éléments HTML4 pour assurer une rétro-compatibilité avec les navigateurs. Au-delà de ce critère, les groupes de travail qui ont élaboré HTML5 ont su analyser les usages courants et s'adapter aux tendances du web avec (entre autres) les nouvelles façons de trier l'information sur une page web. Des statistiques ont été élaborées sur les attributs id les plus fréquemment attribués aux grands découpages de pages HTML.

Par exemple, une majorité des sites contiennent des informations supplémentaires relatives ou non au contenu principal (que l'on nomme sidebar ou barre latérale). Cette information est alors placée dans un élément <div class="aside"> dédié - qui permet d'affecter des propriétés de styles CSS - mais n'a aucune signification particulière pour un navigateur ou un moteur d'indexation. C'est le cas de tous les autres <div>. Le même principe peut être appliqué pour baliser les différents articles d'un site d'information : pourquoi ne pas prévoir un élément <article> plutôt que de segmenter tout le contenu avec des <div class="article"> ? Ceci en facilitera autant l'extraction d'information, la syndication de contenu, et la structuration du code source.

Liste récapitulative des éléments de section HTML5

Le tableau suivant récapitule les nouveaux éléments de section et leur usage le plus commun, tel que décrit par la spécification.

Nom Détails
<section> Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web
<article> Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension
<nav> Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages)
<aside> Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
<header> Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
<footer> Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).

Un cas particulier : Internet Explorer <9

Avertissement Pour les versions antérieures à Internet Explorer 9, ces nouveaux éléments ne sont pas reconnus par l'analyseur syntaxique. C'est-à-dire qu'ils ne sont non seulement pas stylés en bloc par défaut, mais également qu'on ne peut leur appliquer aucun style de quelque manière que ce soit.

Une technique alternative consiste à déclarer ces éléments au préalable en JavaScript. Un script (nommé html5shim ou html5shiv) est prévu à cet effet et mis à disposition à cette adresse :

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Étant muni d'un commentaire conditionel, il ne sera chargé que pour ces versions spécifiques (Internet Explorer 6 à 8 inclus).

Pour tous les autres moteurs de navigateurs récents, il ne sera pas nécessaire d'appliquer une telle astuce : même si ces éléments n'auront pas de signification particulière pour le moteur de rendu, il sera possible de leur appliquer des styles CSS s'ils ne sont pas affichés en bloc par défaut.

Si vous utilisez déjà une bibliothèque telle que Modernizr, il ne sera pas nécessaire d'appliquer un autre script (tel que html5shim) car celle-ci embarque déjà une déclaration équivalente.

Exemples de documents

Exemple minimal

Voici un schéma basique d'un découpage d'une page HTML5. Précisons bien qu'il ne s'agit pas d'une règle fixe à appliquer à tout document mais juste d'un exemple.

L'en-tête <header>

Plutôt que de se cantonner à un simple <div id="header"> le nouvel élément <header> convient parfaitement à l'introduction d'un document. Tout comme l'élément <nav> qui remplace avantageusement <div id="menu">.

Le contenu principal et annexe

L'élément aside revêt le rôle de barre latérale, et l'élément section est appelé pour regrouper le contenu principal.

Le <footer>

Sans suprise l'élément footer est destiné au pied-de-page. Il peut accueillir des mentions spécifiques, un rappel du titre et du logo, des liens de navigation, etc.

Remarque

Finalement, il suffit de considérer qu'il s'agit d'un remplacement pragmatique de certains éléments, ayant eu un identifiant proche (id="header", id="navigation", id="content"...). Mais ce n'est qu'une impression. Se limiter à ce constat serait incomplet. L'usage de ces nouveaux éléments doit se faire à bon escient.

Exemple détaillé

Le schéma suivant est plus précis et se concentre sur chaque <article>. Il démontre que éléments de section ne se limitent pas à un simple découpage et à une application de styles graphiques mais bien à une meilleure classification sémantique de l'information.

Démonstration

On retrouve ici header, aside, footer alors qu'ils sont déjà utilisés dans d'autres parties du document. C'est un critère important : l'utilisation de ces éléments n'est pas limitée à une occurence par page. Ils peuvent très bien s'appliquer à des contenus locaux, par exemple dans <article> qui représente déjà une portion de contenu. Il peut donc possèder (entre autres) : un en-tête header (avec des titres, des informations sur la date de publication et l'auteur), un pied d'article footer, des infos complémentaires dans un ou plusieurs aside etc.

Les balises en détail

<section>

C'est la plus générique : elle est utilisée lorsqu'aucun autre élément de section n'a pu lui être préféré. Il ne faut cependant pas la confondre avec l'élément div qui n'a aucune valeur sémantique. Les deux ne sont pas interchangeables. La section regroupe un ensemble de contenu d'une même thématique, ou bien un ensemble d'éléments offrant une fonctionnalité spécifique dans une application web.

Pour résumer, on utilise l'élément <section> généralement quand :

  • Ce n'est pas une balise employée uniquement pour styler un élément voire plusieurs éléments
  • D'autres éléments de section ne sont pas appropriées (article, aside ou nav)
  • Il contient naturellement un titre d'introduction
<section>
  <h1>Articles</h1>
    
  <article>
       ...
  </article>
</section>

Documentation sur l'élément <section>

<article>

L'élément <article> est une spécialisation de section autosuffisante, possédant une plus forte valeure sémantique. Il vise à baliser des blocs de contenu utiles que l'on pourrait extraire du document tout en conservant leur sens et leurs informations. Pour déterminer si son usage est approprié, il faut se demander si son contenu pourrait être réutilisable tel quel pour de la syndication (par exemple en le reprenant dans un flux RSS ou en le copiant-collant dans un e-mail). Il est fréquent qu'il soit présent au côté d'autres frères dans un même document.

Des éléments <article> dans un parent <article> sont censés représenter des blocs de commentaires relatifs à cet élément parent.

Dans le cadre d'un site axé sur le cinéma, on pourra se servir d'<article> pour les fiches d'identité de chaque film, pour les biographies des acteurs, pour les produits à acheter, pour chaque actualité ou encore pour chaque contribution d'un utilisateur.

<article>
  <h1>Titre de l'article</h1>
  <p>Contenu de l'article</p>
</article>

Documentation sur l'élément <article>

<aside>

L'élément aside est destiné au contenu indirectement lié à l'article lui-même : il représente ce qui l'entoure, de façon annexe. Par exemple, on pourra s'en servir pour proposer la définition d'un terme, une biographie de l'auteur de l'article, un glossaire, préciser des sources, une liste d'articles en relation... aside n'est donc pas forcément dédié au seul usage d'une barre de contenu latérale.

<aside>
  <h4>Sources de l'article</h4>
  <ul>
    <li><a href="#">Lien 1</a></li>
    <li><a href="#">Lien 2</a></li>
    <li><a href="#">Lien 3</a></li>
  </ul>
</aside>  

Documentation sur l'élément <aside>

<header>

L'élément <header> représente l'en-tête d'une section (section, article...) ou d'une page entière. Il peut contenir un logo, un ou plusieurs titres, d'autres informations d'introduction, une navigation, un formulaire de recherche général.

<article>
  <header>
    <h1>Titre de l'article</h1>
    <p>Auteur : bidule</p>
  </header>
    
  <p>Contenu de l'article</p>
</article>

Documentation sur l'élément <header>

<footer>

L'élément footer représente le pied de page, ou bien la conclusion d'une section. On y place des informations concernant l'auteur, des mentions légales, une navigation ou une pagination (en combinaison avec <nav>), un logo de rappel, des coordonnées, des dates de publication.

<article>
  ...
  <footer>
    <p>Posté par Simon, le 
      <time datetime="2012-02-02">2 février 2012</time>
    </p>
  </footer>
</article>

Documentation sur l'élément <footer>

<nav>

L'élément <nav> est une section de liens de navigation. On peut l'utiliser pour la navigation principale, mais également pour d'autres parties du document devant lister des liens de navigation interne.

<nav>
  <ul>
    <li><a href="index.html">Page d'accueil</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Documentation sur l'élément <nav>

Conclusion

HTML5 dispose d'éléments bien pensés pour un meilleur balisage sémantique de l'information. Le plus difficile n'est pas d'écrire ces nouvelles balises, mais bien de comprendre leur usage. Les confusions qui peuvent survenir (section dans article ou vice-versa par exemple) risquent de créer de longs débats quant à leur emploi : il faudra être vigilant.

Commentaires

Skoua a dit le

Quelle est la différence concrète entre figure et aside ?

Super article sinon.

Olivier C a dit le

@ Skoua : l'avant dernier tutoriel posté répond à votre question : "HTML5 : Éléments <figure> et <figcaption>".

the2ne a dit le

A chaque fois que je vois une telle proposition je me pose la même question, alors quitte à passer pour un couillon, autant que je sois fixé : )

J'ai un peu de mal avec cette utilisation de l’élément section qui : "est appelé pour regrouper le contenu principal."

J'ai l'impression à la vu du découpage proposé et de la brève description qu'il n'a d'autre rôle que celui d'un vulgaire conteneur. Un espèce de four-tout pour ceux qui n'auraient pas droit au header, aside ou footer... un nouveau div en quelque sorte.

De ce que j'arrive à comprendre des reco du W3C, cet élément est censé introduire une valeur sémantique que j'ai du mal à concevoir dans un tel exemple.

Je me doute que vous l'avez déjà croisé, mais voici la note qui me titille le neurone à chaque fois.
"The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline."

seufer a dit le

Pensez à placer le script Html5shiv dans le <head> de votre document et non pas en fin de page comme pour la plupart des scripts JS ;)

Olivier C a dit le

@ the2ne,

De ce que j'ai compris : il semble qu'il y ait une différence entre la balise section et une simple div. Les éléments de la page sont réellement séparés au niveau sémantique (aïe, aïe, aïe, je m'exprime mal). C'est ainsi que l'on peu avoir une hiérarchie de titres pour chaque section, plutôt que pour une page entière auparavant. Donc, par exemple, plusieurs h1 sur la page, et pas que pour le titre de l'article ou du blog. En réalité, auparavant, ça ne posait pas de réel problème pour le référencencement, mais cette fois ci c'est tout à fait normalisé.

Interned a dit le

@ the2ne,

La balise <div> est cantonnée à un rôle de finition et de commodité, un peu comme lorsqu'on pose une moquette sur le sol et qu'il nous faut compléter le travail par des bouts de tissu aux endroits qui n'ont pas été bien recouverts (murs biscornus, pose trop rapide, bières trop nombreuses...).

Par exemple, si tu veux mettre une barre de séparation entre deux extraits d'articles, le <div> est la balise adéquate car elle remplira spécifiquement ce rôle de stylisation qui lui est dévolu ; <section> n'aurait ici aucun sens à être utilisé puisqu'elle ne cible ni contenu ni fonction en particulier. Au contraire, si, dans ma page, j'ai l'intention de réserver un emplacement qui regrouperait des infos pratiques de même type, j'aurais plutôt tendance à délaisser la balise <div>.

Autrement dit, toujours se poser la question : est-ce que ma balise <div> ne pourrait pas être remplacée par une balise plus appropriée ? Est-ce qu'en plus il y aurait du sens à donner un titre à cette zone ? Une réponse positive élimine d'emblée la <div>.

P.S : l'article peut prêter à confusion car on pourrait croire que la balise <article> est subordonnée à <section>. Or, il n'en est rien : on peut très bien trouver des <section> dans des <article>, et inversement. En fait, <article> est une déclinaison de <section>, créée spécifiquement pour la syndication.

julien_he a dit le

Pour ceux qui veulent aller plus loin dans le HTML5, un très bon article (anglais) sur 24 ways à propos des formulaire HTML5, à lire. http://24ways.org/2009/have-a-field-day-with-...

the2ne a dit le

@Interned : c'est bien cet usage que j'avais cru comprendre.

Mon interrogation concerne le "zoning" proposé en exemple.
Il ne me semble pas très adéquat et trompeur pour des sites n'ayant pas une thématique affirmée, nichée.

Et j'ai en tête les gars qui vont prendre un tel découpage pour argent comptant et foncer tête baissée pour proposer des thèmes pour leur CMS préféré.

Je ne vais pas prendre l'exemple d'un blog qui passe du coq à l'âne au grès des humeurs de son tenancier, mais plus appliquer cette suggestion à un site de presse quotidienne.

Quelle plus-value sémantique aurait une section regroupant des articles traitant des chats écrasés au même titre que de l'économie, sport, politique... ?!

Si la section est censé être porteuse de sens, faudrait-il la faire correspondre aux "catégories" qui peuvent être traitées ?

DirtyF a dit le

Un petit diagramme pour vous aider à structurer vos éléments HTML5 : http://html5doctor.com/downloads/h5d-sectioni...

_azerty_ a dit le

La page d'exemple est très bien construite et explicite mais serait il possible d'ajouter l'élément section autour des éléments article sur ton schéma afin de montrer son utilité ;)

Simon-K a dit le

L'élément section est bien dans le code source. Bizarre... On va voir pour l'affichage ;)

Shralldam a dit le

Pour sélectionner les éléments, on peut continuer à utiliser des ID/classes ou il est plus conseillé d'utiliser la hiérarchie ?