Structurer le contenu de ses pages Web avec HTML5

Structurer le contenu de ses pages Web avec HTML5

HTML5 propose de nombreuses nouvelles fonctionnalités, comme les canvas, la géolocalisation, un meilleur support des fichiers multimédias, les Web sockets, …

Nous n’allons rien voir de tout ceci (non restez !), mais revenir aux bases d’une page Web et étudier les nouvelles possibilités pour structurer le contenu, les menus de navigation, …

Les avantages d’HTML5

Structurer le contenu de ses pages Web avec HTML5 : le logo
Le logo d’HTML5

Utiliser HTML5 pour structurer vos pages Web présente aux moins les avantages suivants :

  • Les robots des moteurs de recherche sont certainement taillés pour être capable d’extraire le contenu, d’un article par exemple, et le répertorier comme contenu intéressant. HTML5 donne la possibilité de faire cette différenciation. En clair : HTML5 est bon pour le SEO.
  • Vous utilisez une technologie à jour
  • HTML5 pour faciliter l’utilisation des données structurées, affichées directement dans les SERP (fils d’Ariane, date d’évènement, adresses, avis d’utilisateurs, …)
  • HTML5 pour créer des sites Web accessibles, grâce à ARIA, qui décrit les parties intéressantes pour les lecteurs spéciaux des visiteurs souffrants d’un handicap

Prérequis

Avant d’entrer dans le vif du sujet, posons les bases.

Les balises <html>, <head> et <body> ne changent pas par rapport à HTML4.

La nouveauté ici est la définition du doctype, simplifiée à l’extrême :

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

L’en-tête

HTML5 permet de définir des parties qui seront considérées comme des en-têtes du contenu avec la balise <header> utilisable dans le <body> (à ne pas confondre avec la balise <head> qui se trouve à côté du <body>).

Plusieurs <header> peuvent être définis dans la même page, avec des rôles différents.

Par exemple un en-tête pour la page contenant le logo et le nom du site et un en-tête pour insérer le titre d’un menu ou du contenu.

  <header role="banner">
    ...
  </header>

Par convention, le rôle, défini dans l’attribut role de la balise, pour un en-tête de page est banner.

Notez toutefois que l’en-tête avec un rôle banner doit être unique. Il ne faudrait pas le contrarier, ou il va prendre une grosse police toute verte. Euh… vite la suite.

Le contenu principal

Ce qui n’est pas l’en-tête ni le pied de page se trouve dans le contenu principal : les colonnes latérales, les commentaires, et bien sûr le contenu propre à la page.

Naturellement, et nous le verrons plus tard, ce contenu propre à la page sera lui-même délimité par une balise article pour permettre aux robots des moteurs de recherche de bien faire la différence entre le contenu utile et l’interface.

Une nouvelle balise <main> a été créée très récemment. Peut-être trop récemment d’ailleurs. Elle est tellement nouvelle qu’elle n’est même pas référencée sur W3Schools.

Ainsi, pour le moment, je vous conseille de ne pas l’utiliser, et de préférer un <div>.

En clair, préférez :

<div role="main">...</div>

à :

<main role="main">...</main>

Notez que pour le moment, la balise <main> est simplement interprétée comme un div par les navigateurs qui la comprennent.

Notez également que par convention, et contrairement aux en-têtes et aux pieds de page, un seul <main> (ou <div> du même rôle) doit être présent sur une même page Web.

Enfin, comme l’en-tête principal, le contenu principal possède un attribut role. Vous l’avez déjà remarqué, il s’agit du rôle main.

Le pied de page

La dernière balise que nous allons voir cette fois est la balise <footer>, c’est-à-dire le pied de page. Comme la balise <header>, elle peut être présente plusieurs fois sur la même page, en tant que pied de chaque sous partie (extrait d’article, menu, …).

Toutefois, une seule peut être définie avec le rôle contentinfo et être utilisée comme pied de toute la page.

<footer role="contentinfo">
  ...
</footer>

Vous pouvez y ajouter les liens vers les réseaux sociaux, les conditions générales d’utilisation du site, le flux RSS et toutes les informations nécessaires à cet endroit.

Récapitulons

Le code HTML comportant ce que nous avons vu dans cet article, et un spoiler :

<body>
  <header role="banner">
    ...
  </header>
  <div role="main">
    <article>
      <header> ... </header>
      ...
      <footer> ... </footer>
    </article>
  </div>
  <footer role="contentinfo">
    ...
  </footer>
</body>

La balise article comporte un en-tête et un pied, illustrant le fait que d’autres balises <header> et <footer> peuvent être utilisées dans la même page, mais avec des rôles différents.

Nous approfondirons ce sujet la prochaine fois.

Le mot de la fin

Pour apprendre HTML5, consultez le docteur. Ce site est très détaillé et permet de bien comprendre les subtilités entre les balises qui semblent avoir la même utilité, leur historique et bien sûr comment les utiliser.

Aussi, une excellente application d’HTML5 est le thème Twenty Thirteen de WordPress. Si vous en avez un sous la main, dès vous avez un doute, consultez son code HTML généré et voyez comment les balises sont utilisées.

Cet article vous a été utile ? Partage it !

2 réflexions au sujet de « Structurer le contenu de ses pages Web avec HTML5 »

  1. Ton article est très intéressant, j’ai obtenu mon DUT l’année dernière et on a eu des cours de HTML/CSS, à vrai dire j’ai appris l’ancienne version et le HTML5 je n’ai jamais eu le temps de m’y mettre sérieusement étant donné que l’intégration n’est pas mon domaine. Je compte monter mon blog et ton article est assez intéressant je trouve. Je me suis envoyé l’URL de ton article pour le mettre dans ma bibliothèque des références lorsque je me lancerai!
    Merci à toi!

    1. Bonjour Benji,
      Tout d’abord, félicitations pour ton DUT 🙂
      Si tu choisis d’utiliser WordPress pour ton blog avec un thème récent, HTML5 est déjà en place pour en tirer tous les avantages.
      Merci de m’avoir bookmarké. Tu peux inscrire ton mail pour être notifié des nouveaux articles ou suivre le flux RSS : de nouveaux articles sur le sujet devraient arriver dans les semaines qui viennent.
      David

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.