Structurer le contenu de ses pages Web avec HTML5 : partie 2

Structurer le contenu de ses pages Web avec HTML5 Partie 2

Nous avons déjà vu comment créer la structure globale d’une page Web avec les nouvelles balises d’HTML5.

Voyons cette fois comment structurer le contenu lui-même.

La balise article

La balise <article> contient une partie indépendante d’une page, pouvant être un post dans un forum, un article de blog ou de magazine, un commentaire d’utilisateur, un évènement, …

Elle peut contenir un <header> et un <footer>, mais aussi d’autres articles.

Un exemple de page d’accueil de blog :

<body>
  <header role="banner">
    <h1>Mon blog</h1>
  </header>
  <div role="main">
    <article>
      <header>
        <h1>Mon premier article</h1>
      </header>
      <p>Résumé de mon premier article</p>
      <footer>
        <a href="/mon-article-1/">Lire la suite...</a>
      </footer>
    </article>
 
    <article>
      <header>
        <h1>Mon deuxième article</h1>
      </header>
      <p>Résumé de mon deuxième article</p>
      <footer>
        <a href="/mon-article-2/">Lire la suite...</a>
      </footer>
    </article>
  </div>
  <footer role="contentinfo">
    Copyright Monblog
  </footer>
</body>

Vous pouvez remarquer que chaque article est contenu dans une balise <article>, qui, pour le coup, porte bien son nom.

Le contenu de l’article (ici les résumés) peuvent être insérés dans des paragraphes <p> ou dans des <div>, au choix.

Enfin, vous avez certainement noté que les titres dans les balises <header> des articles sont des en-têtes <h1>, alors que l’une des règles fondamentales est justement d’éviter d’avoir plus d’un <h1> par page.

Avec HTML5, les titres sont pondérés par les robots des moteurs de recherche selon leur position dans la page. Ainsi, le titre <h1> dans la balise <header> de rôle banner a un plus grand poids qu’un titre <h1> dans un <header> d’article par exemple.

Les menus

Vous pouvez intégrer les menus dans des balises <nav>.

Le menu principal a le rôle navigation. Il peuvent être intégrés où bon vous semble.

<nav role="navigation">
  <ul>
    <li><a href="index.html">Accueil</a></li>
    <li><a href="about.html">A propos</a></li>
    <li><a href="contact.html">Contactez-nous</a></li>
  </ul>
</nav>

Le plus souvent il est composé d’une liste <ul> avec des entrées de liste (<li>). Il peut aussi contenir directement une série de liens.

Le menu peut aussi contenir des éléments permettant d’ajouter des fonctionnalités, comme un champ de recherche.

La balise section

Une section ressemble beaucoup à un article, ce qui peut être source d’ambiguïté.

Dans les faits :

  • la balise <article> est une forme de section destinée à recevoir du contenu rédactionnel
  • par prolongement, seule la balise <article> peut contenir (directement) les balises <header> et <footer>

Elle regroupe des contenus de même type et/ou de la même thématique, comme par exemple : un article de blog contenant une section commentaires.

<article>
  contenu de l'article
  <section>
    <h3>Commentaires</h3>
    <article>Premier commentaire</article>
    <article>Deuxième commentaire</article>
  </section>
</article>

Pour simplifier l’exemple, je n’ai pas rappelé les balises <header> et <footer> dans les articles.

Notez ici une autre utilisation de la balise <article>: elle peut contenir des commentaires.

La balise aside

La balise <aside> décrit un contenu non principal et qui n’est pas directement nécessaire à la compréhension.

Elle peut se trouver dans les autres balises que nous avons déjà vues. Par exemple, dans une balise article, elle peut contenir un glossaire ou une citation.

Elle peut aussi contenir des encarts informatifs dans les barres latérales de la page, comme les articles récents d’un blog, ou la partie permettant aux visiteurs l’inscription à la newsletter.

D’ailleurs, dans WordPress, chaque widget est contenu dans une balise <aside>.

Les balises <aside> sont souvent incluses dans un <div> avec le rôle complementary.

Par exemple :

<div role="complementary">
  <aside>
    <h3>Les derniers articles</h3>
    <ul>
      <li><a href="/mon-article-1/">Premier article</a></li>
      <li><a href="/mon-article-2/">Deuxième article</a></li>
    </ul>
  </aside>
</div>

Le mot de la fin

La dernière fois je vous indiquais que la balise main était tellement nouvelle que W3Schools ne la référençaient même pas. Ce n’est pas faux, mais il y a une autre raison : apparemment, ce site n’est pas une référence du W3C et n’est pas forcément à jour. En clair, c’est bien, mais pas top.
C’est pour cette raison que dans cet article, j’utilise une référence reconnue des standards du Web : WebPlatform.org. Ce site est encore en alpha mais semble prometteur. Il répond au gros défaut de W3Schools : WebPlatform.org est collaboratif, chacun peut évaluer les lacunes ou les erreurs et les corriger.

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

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

  1. C’est exactement l’article que je cherchais (à peu de choses près). Je ne savais pas que le fait de mettre un dans le ayant pour rôle « banner » avait plus de poid que dans le présent dans la balise . C’est une très bonne chose à savoir en terme de référencement naturel!
    Je vais aller jeter un coup d’œil sur WebPlatform.org, j’ai été convaincu par cet article.
    Merci à vous pour ces informations.

    1. Bonjour Benji,
      Je suis d’accord avec toi, le référencement naturel c’est cool 😉
      Je vois que tu apprécies mes articles sur HTML5. Grande nouvelle : ce n’est pas terminé !
      N’hésite pas ! 🙂
      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.