Les balises structurelles HTML5: article, header, footer, aside, nav…

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… 

HTML5 inclut la majorité des éléments HTML4 pour assurer une rétro-compatibilité avec les navigateurs.

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.

Ajoutez votre titre 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.

NomDé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

Pour les versions antérieures à Internet Explorer 9, ces nouveaux éléments ne sont pas reconnus par l’analyseur syntaxique.

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.

Ajoutez votre titre 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 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

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 
 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>

<article>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

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>

<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>

<header>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.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>

<footer>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leoL’é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.

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.

Exemples de HTML5 sémantique

Voici un exemple hyper simple de HTML5 sémantique structurelle avec les éléments les plus importants (header, footer, nav et main) :

Nous avons simplement défini les rôles des zones de la page. Lorsque vous commencez à appliquer le HTML5, ces zones sont le meilleur point de départ : header, nav, main, footer.

Une mise en œuvre simple et correcte est déjà un grand pas en avant dans votre communication avec Google et Bing. Ne soyez pas trop ambitieux. Si vous ne faites pas les choses correctement vous pouvez rendre l’interprétation de vos pages plus compliquée pour les machines !

Des exemples plus complexes

Voici un exemple plus complexe avec des sections et articles :

Note : La mise en page visuelle (les blocs oranges) n’est pas utilisée pour définir les zones sémantiques de la page.

Ici, nous définissons une hiérarchie pour notre contenu principal. Il existe un article parent qui identifie le contenu le plus important de la page. Cela donne un aperçu du sujet de cette zone de la page. Dans cet article, nous avons plusieurs sous-thèmes qui développent le sujet principal, identifiés par plusieurs sections imbriquées.

Le schéma ci-dessus peut paraître un peu bizarre, mais elle démontre bien que la mise en page HTML et le HTML5 sémantique ont des rôles distincts. Dans le monde réel, le balisage sémantique correspondra probablement d’avantage à la mise en page.

Note : Dans le schéma, j’ai ajouté une section de navigation en pied de page. Tout comme l’en-tête, le pied de page contient très souvent des éléments de navigation.

Aside associé au contenu principal

Nous avons ajouté deux éléments de contenu directement liés à l’article principal. En utilisant des <aside>, nous indiquons que le contenu associé est facultatif. Le contenu de l’article parent peut être lu et interprété sans pour autant afficher les <aside>.

Aside non associé au contenu principal

Ici, nous avons identifié un contenu indirectement lié à la page, en dehors de l’article principal du contenu. Nous indiquons que le contenu à côté n’est pas directement lié à l’article principal.

Cela suffit pour la plupart des besoins.

Note : Un <aside> n’est pas obligatoirement une colonne située à côté du contenu principal. Il peut également être utilisé pour les zones situées en dessous où au-dessus du contenu principal.

Version finale

Conseils pratiques

Section ou Article ?

Il y a beaucoup de débats à ce sujet. Il n’y a pas de règles strictes sur les sections et les articles, et leur mise en œuvre est assez flexible. Ils ont à peu près la même importance et peuvent être utilisés de façon interchangeable la plupart du temps.

En règle générale, une section fait partie d’un ensemble plus grand. Un article est son propre élément. J’ai trouvé qu’utiliser un article divisé en sections est logique à la fois pour une machine et pour un humain (le code HTML sera plus facile à lire pour le développeur).

Peu importe votre choix, assurez-vous d’être logique et cohérent.

 

Les éléments imbriqués

Chaque partie peut contenir d’autres éléments. Par exemple, un article peut avoir son propre <header>, <footer>, <h1>, et même <nav> (les ancres en sont un bon exemple). Je n’ai pas donné d’illustration de cette imbrication HTML5 avancée, car je me suis concentré sur le SEO et, d’un point de vue SEO, il n’y a aucun avantage réel à pousser la logique du HTML5 sémantique aussi loin.

Comme mentionné ci-dessus, pour améliorer votre référencement vous devriez mettre en place un balisage simple et cohérent.

Ce qu'il ne faut pas faire

Juste pour vous avertir : j’ai vu de nombreux sites utiliser le design visuel comme guide pour leur mise en œuvre HTML5. Comme on l’a vu plus haut, le HTML5 sémantique n’est pas conçu pour le design.

Cet exemple (étonnamment courant) fait doublon avec le HTML visuel. Pire qu’inutile, cela indique aux moteurs de recherche que la page contient 4 sujets différents, plutôt qu’un seul sujet et 3 sous-thèmes. Fournir des informations trompeuses aux machines aura un impact négatif sur l’interprétation de votre page.

Que faire maintenant ?

La mise en œuvre d’un balisage HTML5 sémantique structurel sur vos pages améliorera votre communication avec Google et Bing. Ils veulent, tous les deux, comprendre votre contenu. Ils veulent que vous leur communiquiez clairement dans leur langage et que vous les informiez. Faites-le !

Communication

La communication avec les machines est l’un des deux piliers d’une stratégie de référencement à long terme qui vous permettra de réussir dans le monde de “Moteurs de Réponse”. Il y a beaucoup de choses que vous pouvez faire pour améliorer la communication. Le HTML5 sémantique en est un. Le balisage structuré Schema.org en est un autre. Découvrez mon article précédent pour en savoir plus.

Crédibilité

Le deuxième pilier de la stratégie SEO à long terme est la crédibilité en ligne. Il y a aussi beaucoup de choses que vous pouvez faire pour améliorer votre crédibilité.

Communication + crédibilité = stratégie gagnante

Conclusion

Les rôles, l’importance et la hiérarchie des contenus d’une page web sont des choses que les humains comprennent de façon intuitive à partir de la mise en page. En utilisant correctement les balises HTML5 sémantiques à la place des <div>, vous simplifiez le traitement de vos pages par les machines.

Facebook-f Twitter Youtube

Articles récents

Archives
Catégories
Archives
Catégories