Les conteneurs de structure

Les objectifs

Ce chapitre va aborder l’utilisation des conteneurs. Ces éléments HTML vont permettre de structurer les pages web afin d’obtenir un affichage logique et précis. Les conteneurs sont dits « sémantiques », cela veut dire que le contenu ne doit pas être de n’importe quel type. L’HTML propose des conteneurs « spécialisés » pour y afficher par exemple une barre de navigation, en en-tête, un pied de page...

Mais il se peut que la page web utilise des conteneurs non sémantiques, plus génériques. Dans ce cas l’HTML propose deux autres conteneurs pour ces usages.

L’élément <main>

L’élément <main> va contenir le contenu principal de la page. Ce contenu doit être unique et ne doit pas être répété dans la page. De plus, la norme HTML indique précisément son contexte d’utilisation, l’élément <main> ne doit pas être utilisé comme élément inclus dans les autres éléments de structure, il ne doit pas être imbriqué dans les éléments <article>, <aside>, <footer>, <header> ou <nav>.

L’élément <header>

L’élément <header> permet d’insérer une zone d’affichage pour les en-têtes. Ces en-têtes peuvent être utilisés à plusieurs endroits :

L’élément <header> peut contenir tout type d’éléments : des titres, des paragraphes, des liens, des images...

L’élément <footer>

L’élément <footer> permet d’insérer une zone d’affichage pour les pieds de page. La sémantique est la même que pour les en-têtes. Ces pieds de page peuvent être définis pour la page ou pour une autre zone d’affichage de celle-ci, comme un article. Il faut noter que l’usage d’un <footer> n’implique pas forcément l’usage d’un <header> et inversement.

L’élément <aside>

L’élément <aside> permet d’afficher un contenu lié à un contenu principal auquel il est associé. Cela correspond souvent aux très classiques barres latérales (sidebar en anglais), à des zones de composants d’interface (widgets en anglais), à des compléments sur des articles ou tout autre contenu rédactionnel.

Il est usuel de trouver le contenu principal affiché dans la partie centrale de la page, avec souvent, sur la droite, l’affichage du contenu associé avec l’élément <aside>.

L’élément <nav>

L’élément <nav>, comme son nom le laisse supposer, est dédié à l’affichage d’une barre de navigation avec des liens hypertextes. Mais attention, il n’est pas obligatoire de n’avoir qu’une seule zone de navigation par page. Il est parfaitement valide d’exploiter autant d’éléments <nav> qu’il y a de navigations différentes dans les pages, à partir du moment où chacun d’entre eux est bien identifié.

Il est possible d’inclure une navigation principale <nav> dans un en-tête <header> et une navigation  secondaire dans un pied de page <footer>, par exemple.

L’élément <section>

L’élément <section> permet de regrouper des éléments partageant une même thématique. Cela permet de regrouper dans un même élément un contenu structuré, avec son en-tête et son pied de page. L’utilisation de plusieurs éléments <section> distinguera par exemple plusieurs parties, plusieurs sections au sein d’une même page, avec d’autres éléments de structure imbriqués.

L’élément <article>

L’élément <article> permet d’insérer un contenu autonome. Il est qualifié d’autonome car il peut être réutilisé ailleurs dans le site, sans que sa compréhension en soit affectée. L’usage le plus courant reprend le nom de l’élément : création d’articles de blog et d’actualités.

L’élément <search>

L’élément <search> permet de regrouper tous les éléments concernant une recherche textuelle dans le site. Cet élément peut donc contenir des sections, des titres, des paragraphes, le formulaire de recherche et les résultats de la recherche. Cet élément n’est pas fait pour ne contenir que les résultats de la recherche.

L’élément <div>

L’élément <div> est un des conteneurs les plus anciens du HTML. Il permet de créer une division structurelle dans la page. Dans ces divisions, n’importe quel contenu peut y être inséré et même d’autres divisions <div>. D’autres éléments HTML peuvent y être imbriqués, comme des paragraphes, des listes, des images... Ces divisions permettent d’effectuer des mises en page à l’aide de conteneurs « neutres », c’est-à-dire sans contenu sémantique défini.

L’élément <span>

L’élément <span> est souvent utilisé, par exemple, pour avoir une division au sein d’un paragraphe de texte. Ceci est très pratique pour mettre en forme de manière particulière du texte dans un texte formaté d’une autre manière.

Voici un exemple précis dans lequel il faut avoir un fond gris et une fine bordure, sur une partie d’un texte dans un paragraphe.

Voici le sélecteur CSS :

.fond-gris {  
  background-color : #eee;  
  padding : 0 5px;  
  border : 1px solid #333;  
} 

Voici son application dans le code HTML :

<p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus,  
<span class="fond-gris">porta ac consectetur ac vestibulum</span> at eros.  
Donec sed odio...</p> 

Une structure sémantique simple

Voici la structure sémantique très simple pour un premier exemple :

Voici les éléments HTML utilisés :