Les éléments de structure HTML5

1. Les boîtes <div>

Avec le HTML4, le principal élément de structure des pages est la fameuse « boîte <div> ». L’élément <div> permet de créer des zones d’affichage rectangulaires. Chacune de ces zones, chacune de ces boîtes <div> peut être identifiée de manière unique avec un identifiant et être mise en forme avec des styles CSS. Cet identifiant unique est déterminé avec l’attribut id.

Exemple :

<div id="bandeauHaut"> 
... 
</div> 

Vous pouvez aussi utiliser des classes, si la mise en forme n’est pas unique mais est répétée dans la page.

Exemple :

<div class="article"> 
...
</div> 

Ensuite, une fois que la structure est déterminée, la mise en page s’effectue avec des styles CSS, avec des sélecteurs d’identification qui reprennent le nom de l’identifiant ou de la classe.

Exemple :

#bandeauHaut { 
...
} 
.article{ 
...
} 

Voici un exemple d’une structure de page de type blog avec des boîtes <div> :

2. La « divite »

Avec le HTML4 et les CSS 2.1, la structure des pages, quand elle est un peu complexe, peut nécessiter un nombre très important de boîtes...

1. Les nouveaux éléments de structure

L’avènement du HTML a apporté de nouveaux éléments de structure sémantique. Ces nouveaux éléments ont été définis et nommés suite à une longue analyse du nom des boîtes <div>.

2. L’élément <header>

Le nouvel élément <header> permet d’insérer une zone d’affichage pour les en-têtes. Cet en-tête peut être défini pour la page ou pour une autre zone d’affichage : article, barre latérale...

Il faut considérer cet élément comme utilisable à deux niveaux :

Voilà la définition du W3C pour l’élément <header> : « The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1-h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos. »

Notez bien que l’élément <header> n’est pas obligatoire dans la structure des pages.

3. L’élément <footer>

Le nouvel élément <footer> permet d’insérer une zone d’affichage pour les pieds de page. Nous retrouvons la même sémantique que pour les en-têtes. Ces pieds de page peuvent être définis pour la page ou pour...

1. Une structure simple

Si nous reprenons notre exemple de structure de page indiquée au début de ce chapitre, nous pouvons le modifier pour le mettre en HTML5.

Dans l’élément <header>, vous retrouverez les éléments d’en-tête de la page, avec le logo, le slogan par exemple.

Dans l’élément <nav> placé à gauche, vous trouverez les liens pour naviguer au sein de ce site.

Tous les articles de ce blog seront placés dans des éléments <article>, bien sûr !

Enfin, le pied de page, <footer>, pourra contenir les mentions légales, les liens de contact.

2. Une structure plus élaborée

Voici une structure d’un site un peu plus élaborée :

Nous retrouvons un élément <header>, maintenant classique.

En dessous, nous avons un premier élément <nav> pour la navigation générale dans le site, pour naviguer de page en page.

Sur la gauche, une deuxième boîte <nav> est faite pour la navigation secondaire, pour des liens liés directement au contenu de la page affichée.

Sur la droite, un élément <aside> affiche des informations liées au contenu de la page, comme des liens promotionnels, des contenus en relation...

Le contenu de la page est affiché dans deux éléments...