Éléments structurants

Pourquoi ?

Les éléments structurants sont des balises qui ont été ajoutées avec la venue du HTML5

Vous avez vu que pour englober certains éléments, on se créait des boîtes pour les éléments de type block ou inline.

Par exemple, la balise <div> et la balise <span> en sont des exemples.

Le problème avec ces balises, c'est qu'il devient difficile d'affecter un sens à leur contenu

Il revient au développeur de trouver un bon nom de classe CSS pour donner un sens au contenu du div ou du span en question.

De plus, lorsqu'on commence à vouloir structurer un peu plus la page Web, on se retrouve vite avec une quantité de div imbriqué les uns dans les autres.

Par exemple, si j'utilise ceci:

    <div class="header-1">
        <a href="#" >img ...</a>
        <div class="main-menu">
            <div class="...">

            </div>
        </div>
    </div>

Il devient plus difficile de s'y retrouver. Dans l'exemple ci-haut, ce qui nous aide, ce sont les noms qui ont été donné aux classes mais ce n'est pas garantit que ce sera toujours comme ça.

Avec les éléments structurants, tout ça devient plus clair:

        <header>
            <a href="#" >img ...</a>
            <nav>Barre de navigation...</nav>
        </header>

    

Regardons plus en détail ces balises.

Balises structurantes du HTML5

Voici quelques exemples de structure de page Web possibles.
element_structurant_1 element_structurant_2

Il s'agit du genre de page Web que l'ont voit le plus souvent, avec comme éléments fondamentaux :

Toutes les pages Web utilisent (ou devraient utiliser) maintenant ces éléments.


L'élément header

Cet élément représente l'en-tête d'un document, d'une section ou d'un article Il doit être utilisé comme conteneur pour tout matériel d'introduction On peut retrouver plusieurs éléments header à l'intérieur d'un même document

Il doit être utilisé comme conteneur pour tout matériel d'introduction

On peut retrouver plusieurs éléments header à l'intérieur d'un même document


L'élément nav

L'élément <nav> est une section de liens de navigation. On peut l'utiliser pour la navigation principale, mais également pour d'autres parties du document devant lister des liens de navigation interne.

Tous les hyperliens d'une page n'ont pas à se retrouver nécessairement dans l'élément nav, mais seulement les plus importants

Exemple
  <nav>
    Choisissez votre destination :
    <a href="">La Comté</a> |
    <a href="">Isengard</a> |
    <a href="">Ithilien</a> |
    <a href="">Mordor</a>
  </nav>

L'élément main

Cet élément représente le contenu principal de la page.

Il doit être utilisé comme conteneur pour toute information relative à la page en court et qui a un lien direct avec le contenu souhaité.

L'élément footer

Cet élément représente le pied de page d'un document, d'une section ou d'un article

Il doit être utilisé comme conteneur pour toute information relative qui ne figure pas dans l'en-tête

On y retrouve typiquement le nom de l'auteur, des informations de copyright, des informations de contact, des liens, etc.

On peut retrouver plusieurs éléments footer à l'intérieur d'un même document

L'exemple suivant illustre le pied de page d'un article :

Exemple
    <footer>
      <p>
        Toute ressemblance avec des personnes, sociétés, adresses électroniques ou URL
        existantes ne serait que pure coïncidence.
      </p>
      <p>
        Pour plus d'informations veuilles contacter <a href="mailto:kekun@kekpart.com">
        kekun@kekpart.com</a>.
      </p>
    </footer>

L'élément aside

Cet élément représente une barre latérale placée à gauche ou à droite

L'élément aside est généralement utilisé comme conteneur pour un menu, de la publicité, etc.

Notons que le fait d'insérer un élément aside dans le document ne le dispose pas automatiquement à gauche ou à droite du contenu principal

Pour cela il est nécessaire de le faire avec des propriétés CSS.


L'élément section

Cet élément représente une section dans un document

Une section est considérée comme un regroupement d'informations sur un sujet donné, incluant typiquement un en-tête (élément header)

Une page d'accueil peut par exemple être découpées en sections : une pour l'introduction, une pour le contenu, une pour les informations de contact, etc.


L'élément article

Cet élément représente un contenu indépendant du reste du document

Il devrait être possible de lire un article indépendamment du reste de la page ou du site Web

Exemples d'utilisation de l'élément article


Un article dans une section? Une section dans un article?

Maintenant il est légitime de se poser les questions suivantes :

La réponse aux deux questions est OUI

On retrouve même des sections dans des sections (des "sous-sections") et des articles dans des articles

L'important est de bien réfléchir avant de choisir la structure du document et d'être cohérent ensuite

Grilles et éléments structurants

Il devient donc très intéressant d'utiliser les grilles CSS pour faire en sorte de disposer les différentes balises à l'intérieur de la grille. Voici un exemple:

    <nav>
      Choisissez votre destination :
      <a href="">La Comté</a> |
      <a href="">Isengard</a> |
      <a href="">Ithilien</a> |
      <a href="">Mordor</a>
    </nav>
  


Début du document