Les balises de layout

Une page HTML est segmentée en plusieurs blocs, en fonction des volontés de la personne en charge de l’UI (User Interface). C’est le rôle de l’intégrateur de savoir découper une maquette et d’utiliser les bons éléments sémantiques en fonction du contexte.

Voici une liste exhaustive des balises de layout, visant à découper le contenu d’une page.

Nom	Cas d’usage
`<section>`	Séparer les différentes parties d’une page
`<article>`	Spécifie un élément qui peut exister de lui-même
`<nav>`	Représente un menu de navigation
`<aside>`	Élément qui n’a pas un rapport direct avec le sujet de la page
`<header>`	Contient des informations relatives au sujet (titre, date, auteur…)
`<footer>`	Contient des informations secondaires relatives au sujet (copyright, commentaires…)
`<main>`	Contient le contenu principal du sujet de la page
`<address>`	Représente les informations de contact relatives au contenu (par rapport au plus proche `<article>` ou au `<body>`)
`<div>`	Tout autre cas d’utilisation

`<header>`

source ↗

La balise <header> peut uniquement être utilisée en enfant du <body> ou d’un <article>. Elle contient généralement les informations de navigation de la page ou, dans le cas d’un article, les informations essentielles telles que le titre ou la date de publication par exemple.

index.html

<body>
  <header>
    <!-- votre code ici... -->
  </header>
</body>

`<footer>`

source ↗

La balise <footer> peut uniquement être utilisée en enfant du <body> ou d’un <article>. Elle contient généralement les informations secondaires relatives au contenu (mentions légales…).

index.html

<body>
  <footer>
    <!-- votre code ici... -->
  </footer>
</body>

`<main>`

source ↗

La balise <main> peut uniquement être utilisée en enfant du <body>. C’est cette balise qui va venir englober l’intégralité du contenu principal relatif à la page.

Vous ne devez avoir qu’une seule balise <main> dans votre document, sauf si les autres balises <main> possèdent un attribut hidden qui est géré dynamiquement via le JS.

index.html

<!-- CORRECT -->
<body>
  <header></header>
  <main>
    <!-- votre code ici... -->
  </main>
  <footer></footer>
</body>
<!-- CORRECT -->
<body>
  <header></header>
  <main>
    <!-- votre code ici... -->
  </main>
  <main hidden></main>
  <main hidden></main>
  <footer></footer>
</body>
<!-- INVALIDE -->
<body>
  <header></header>
  <main>
    <!-- votre code ici... -->
  </main>
  <main></main>
  <main></main>
  <footer></footer>
</body>

`<aside>`

source ↗

La balise <aside> sert à intégrer un contenu au sein d’une page qui n’est pas relatif au sujet principal. Généralement on utilise la balise <aside> pour intégrer des sidebars (comme à la WordPress), mais il peut aussi être utilisé dans le cadre d’encarts publicitaires par exemple.

index.html

<body>
  <header></header>
  <main></main>
  <aside></aside>
  <footer></footer>
</body>
<!-- OU -->
<body>
  <header></header>
  <main>
    <aside></aside>
  </main>
  <footer></footer>
</body>

`<section>`

source ↗

La balise <section> est utilisée pour découper la page en une multitude de zones. Souvent représentée par un hero au top de la page, elle permet de séparer les contenus tout au long du scroll.

index.html

<body>
  <header></header>
  <main>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
  </main>
  <footer></footer>
</body>

`<nav>`

source ↗

La balise <nav> représente un menu de navigation. Généralement utilisée au sein du <header>, elle contient un ensemble de liens de navigation.

index.html

<body>
  <header>
    <nav></nav>
  </header>
  <main></main>
  <footer></footer>
</body>

Organisation des liens
La balise <nav> ne requiert pas d’utiliser une liste à puces pour intégrer les liens qui la composent. Vous pouvez parfaitement insérer les balises <a> directement en enfants de la <nav>.

Navigation principale et secondaire
Il n’est pas toujours utile d’utiliser la balise <nav> dans certains contextes. Par exemple, lorsque l’on intègre des liens de navigation dans le <footer> de la page

`<article>`

source ↗

La balise <article> est utilisée pour représenter un contenu qui n’est pas dépendant de la page, donc qui pourrait dans l’idéal être redistribué sur n’importe quelle autre page. Généralement utilisée pour intégrer des articles de blog, elle peut pourtant être utilisée dans bien d’autres cas.

index.html

<body>
  <header></header>
  <main>
    <article>
      <header></header>
      <!-- contenu de l'article -->
      <footer></footer>
    </article>
  </main>
  <footer></footer>
</body>

`<address>`

source ↗

La balise <address> sert à représenter des informations de contact relatives au contenu adjacent. Elle est notamment utile pour spécifier l’auteur d’un article, la personne référente à contacter… généralement au sein d’un <footer>.

index.html

<body>
  <header></header>
  <main></main>
  <footer>
    <address>
      Pour plus de détails, contacter
      <a href="mailto:js@example.com">John Smith</a>.
    </address>
    <p><small>© copyright 2038 Example Corp.</small></p>
  </footer>
</body>

`<div>`

source ↗

La balise <div> est le dernier élément de layout à utiliser, voire même le dernier élément toutes catégories confondues. Elle est utile dans l’unique cas où aucune autre balise sémantique ne fait sens.

index.html

<body>
  <header></header>
  <main>
    <div>
      <!-- votre code ici -->
    </div>
  </main>
  <footer></footer>
</body>