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.
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.
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> 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
<nav> Choisissez votre destination : <a href="">La Comté</a> | <a href="">Isengard</a> | <a href="">Ithilien</a> | <a href="">Mordor</a> </nav>
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é.
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 :
<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>
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.
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.
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
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
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>