Découper une page web en sections logiques

Dans cet article, nous verrons comment structurer un document afin que son plan soit logique pour vous, vos visiteurs dont ceux qui utilisent des technologies d'aide à la navigation.

Prérequis :	Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :	Apprendre comment structurer un document web grâce aux balises sémantiques.

Les sections de base

Les sites web ont chacun leur style mais tous ont tendance à partager des composants communs :

l'en-tête (header): Il s'agit généralement d'un grande bande horizontale, située en haut du site avec un grand titre et/ou un logo. C'est à cet endroit qu'on a toujours la même information sur le site, quelle que soit la page du site sur laquelle on est.
la barre de navigation: Celle-ci permet de faire référence aux différentes sections du site via des menus ou des onglets. Comme pour l'en-tête, la barre de navigation sera généralmeent présente sur l'ensemble du site. De nombreux concepteurs web considèrent que la barre de navigation fait partie intégrale de l'en-tête mais ce n'est pas strictement nécessaire.
le contenu principal: Une zone importante, située au centre dont le contenu est spécifique selon la page visitée.
le panneau ou la barre latéral-e (sidebar): Il contient des informations périphériques, des liens, des citations, des publicités. Généralement, ce panneau dépend du contenu principal de la page mais on trouve également des panneaux latéraux qui agissent comme des menus de navigation secondaires.
le pied de page (footer): C'est ici qu'on trouvera les informations de contact, de copyright… C'est un endroit où on place des informations communes à l'ensemble du site mais qui ne sont pas primordiales pour le site en tant que tel. Le pied de page est parfois utilisé par les outils de référencement afin de fournir un accès rapide à certaines parties du site.

Lorsqu'on assemble ces éléments, on arrive à quelque chose qui ressemble grosso modo à :

[Diagram indicating the divisions with visual cues]

HTML à la rescousse

Dans le dessin précédent, des indications visuelles permettent d'identifier rapidement l'en-tête, la barre de navigation, le contenu, etc. Cela dit, un site ne se résume pas à son aspect visuel. Une personne qui serait déficiente sur le plan visuel (par exemple quelqu'un qui est daltonien, comme 8% de la population mondiale) pourra tirer partie de concepts comme « barre de navigation » et « contenu principal », en revanche, « taille de police plus grande » et « vert clair » seront inutiles.

Dans votre code HTML, vous pouvez identifier les sections en fonction de leur fonctionnalité. C'est ce que nous verrons dans la suite de cet article. Pour savoir comment ajouter des indications visuelles, vous pouvez consulter notre tutoriel CSS.

Pour structurer une page avec cette sémantique, HTML fournit des balises dédiées :

Pour l'en-tête : <header>
Pour la barre de navigation : <nav>
Pour le contenu principal : <main> ainsi qu'une association d'éléments <article>, <section> et <div> pour créer des sous-sections
Pour la barre latérale : <aside>
Pour le pied de page : <footer>

Pour la barre de navigation, on trouvera souvent une liste, non-ordonnée, de liens placée dans un élément <nav>. Chris Coyier résume les avantages et inconvénients entre les listes et les liens directs.

Quel élément utiliser

Vous pouvez être confronté-e à d'autres scénarios que celui que nous venons de voir. Dans la liste qui suit, nous verrons des descriptions plus détaillées des éléments HTML liés aux sections d'un document :

<main> est utilisé pour indiquer du contenu qui appartient exclusivement à cette page. <main> ne doit être utilisé qu'une seule fois par page et se place directement sous l'élément <body>. Dans l'idéal, il ne devrait pas être imbriqué dans d'autres éléments sous <body>.
<article> contient un bloc de contenu qui pourrait être cohérent sans le reste de la page (par exemple un billet de blog).
<section> agit comme <article> mais dépend du reste de la page, qui fournit alors un contexte. Il est possible d'utiliser des sections pour grouper ou subdiviser des articles. Généralement, pour respecter des bonnes pratiques, on commencera une section avec un élément de titre.
<aside> contient du contenu qui n'est pas directement lié au contenu principal mais qui peut fournir des informations supplémentaires, liées à ce contenu principal (par exemple une biographie de l'auteur, des liens sur le sujet, etc.).
<header> représente un groupe de contenu introductif. Si c'est un élément inclus dans <body>, il définit l'en-tête de la page web. En revanche, si c'est un élément inclus dans <article> ou <section>, il définit un en-tête propre à cette section (attention à ne pas confondre cette notion avec les niveaux de titre).
<footer> représente un groupe de contenu final. Selon sa position il aura un sens analogue à l'élément <header>.
<div> est un élément qui peut être utilisé (de préférence avec un attribut class donné) lorsqu'il n'existe pas d'élément plus spécifique. Les éléments <div> n'ajoutent pas de division sémantique au document, cela peut permettre de manipuler certaines parties d'un document (la classe ou l'identifiant du <div> permettra de le(s) retrouver facilement) via CSS ou JavaScript.

Attention : Les éléments <div> sont parfois si pratiques qu'on en utilise trop. Ces éléments ne portent aucune sémantique, il ne font qu'encombrer le code HTML. Attention donc à ne les utiliser que lorsqu'il n'existe pas de meilleure solution sémantique. S'ils sont trop présents, cela rendra les mises à jour et la maintenance plus difficiles.

Exemple

Exprimé sous forme de code HTML, le dessin présenté ci-avant correspondrait à :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Document HTML</title>
</head>
<body>

  <!--
  Voici l'en-tête principal, utilisé sur les
  différentes pages du site web
  -->
  <header>
    header

    <!--
    Bien que ce ne soit pas obligatoire, on trouve
    généralement un menu de navigation dans l'en-tête
    principal
    -->
    <nav>
      <ul>
        <li><a href="#">Navigation</a></li>
        <li><a href="#">Qui nous sommes</a></li>
        <li><a href="#">Ce que nous faisons</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

      <!--
      Une barre de recherche est un outil de navigation
      "non-linéaire" au sein du site web.
      -->
      <form>
        <input type="search" name="q" placeholder="disabled">
        <input type="submit" value="OK">
      </form>
    </nav>
  </header>

  <!--
  Voici le contenu principal
  -->
  <main>

    <!--
    Il contient un article
    -->
    <article>
      <h1>Titre</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue
      ligula as quam viverra nec consectetur ant hendrerit. Donec et
      mollis dolor. Praesent et diam eget libero egestas mattis sit
      amet vitae augue. Nam tincidunt congue enim, ut porta lorem
      lacinia consectetur.</p>

      <h2>Sous-section</h2>
      <p>Donec ut librero sed accu vehicula ultricies a non tortor.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean
      ut gravida lorem. Ut turpis felis, pulvinar a semper sed,
      adipiscing id dolor.</p>

      <p>Pelientesque auctor nisi id magna consequat sagittis.
      Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat
      nist imperdiet. Ut convallis libero in urna ultrices accumsan.
      Donec sed odio eros.</p>

      <h2>Une autre sous-section</h2>
      <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus.
      Cum soclis natoque penatibus et manis dis parturient montes,
      nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris
      vitae nisi at sem facilisis semper ac in est.</p>

      <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
      tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
      ultricied. Curabitur ornare, ligula semper consectetur sagittis,
      nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
    </article>

    <!--
    le contenu placé sur le côté peut aussi
    être dans le contenu principal
    -->
    <aside>
      <p>N'hésitez pas à rendre visite à nos sponsors !</p>
      <ul>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
        <li><a href="#">item</a></li>
      </ul>
    </aside>
  </main>

  <!--
  Enfin, voici le pied de page principal,
  utilisé sur les différentes pages du site.
  Note : Ceci est une fausse déclaration de copyright
  Attention à celles qui sont réelles.
  -->
  <footer>
    ©Copyright 2050 par exemple.com. Tous droits réservés.
  </footer>
</body>
</html>

Les rôles ARIA, qu'est-ce que c'est ?

HTML a initialement été conçu pour définir la structure d'un document. Or, il est désormais utilisé pour créer des applications web.

ARIA est une méthode qui permet d'indiquer aux technologies d'aide à la navigation qu'un élément HTML possède des fonctionnalités web applicatives.

Certains éléments HTML5 comme <nav> permettent de contenir des informations de ce genre et rendent (dans ce cas particulier) les attributs ARIA redondants. Cela dit, si vous utilisez des technologies qui ne supportent pas encore HTML5 ou que vous souhaitez utiliser un élément qui n'a pas de sémantique particulière (par exemple <div>) , vous pouvez appliquer des rôles ARIA de cette façon:

<main role="main">
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<footer role="contentinfo">

Pour en savoir plus à propos d'ARIA, consultez notre documentation.