Les conteneurs sémantiques

Bien utiliser les conteneurs sémantiques

Pour concevoir vos pages, vous devez réfléchir en termes de « conteneur ». Un conteneur, comme son nom l’indique, inclut un contenu de type très varié.

Dans ces conteneurs, vous pourrez placer du texte, des images, des formulaires, des liens, des tableaux… Mais vous pourrez aussi avoir des conteneurs plus « petits » comme pour mettre en évidence un ou plusieurs mots, ou pour définir une cellule de tableau.

Les conteneurs servent aussi à structurer vos pages. Vous pourrez ainsi utiliser des conteneurs pour insérer un en-tête de page, une colonne latérale (une sidebar en anglais), un pied de page, une barre de navigation...

Vous l’avez compris, tous les contenus sont insérés dans des conteneurs. Chaque conteneur, en dehors des divisions (<div> et <span>), sont dédiés à recevoir un contenu spécifique. C’est pour cela qu’ils sont qualifiés de conteneurs sémantiques.

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, nous pouvons placer n’importe quel contenu et même d’autres conteneurs comme d’autres divisions <div>, des paragraphes, des listes...

Le HTML5 a introduit de nouveaux conteneurs sémantiques qui ont réduit l’utilisation de l’élément <div>. Mais ce n’est pas parce que vous utilisez du HTML5 que vous devez abolir l’utilisation des boîtes <div> ! Elles sont toujours utilisables et ont toujours leur utilité. Les boîtes <div> sont souvent utilisées pour avoir des conteneurs "neutres" qui n’ont pas besoin d’avoir un sens sémantique précis.

L’élément <span>

L’élément <span> est souvent utilisé, par exemple, pour avoir une différenciation 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 : nous souhaitons mettre en fond gris et avec une fine bordure 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> 

Voici l’affichage obtenu :

<article> 
   <header> 
       <h2>Cras Vestibulum Sem Fermentum</h2> 
       <aside> 
           <header> 
               <h3>Inceptos Magna Vehicula Malesuada</h3> 
               <p>Mollis Risus Sollicitudin Inceptos...</p> ...

L’élément <footer>

L’é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 une autre zone d’affichage de celle-ci, comme un article. Notez 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 indirectement lié au 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.

Vous avez usuellement le contenu principal qui est affiché dans la partie centrale de la page, avec souvent, sur la droite, l’affichage du contenu associé avec l’élément <aside>. Cet élément est parfois traduit en français par le terme « aparté ».

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, ne vous sentez pas obligé de n’avoir qu’une seule zone de navigation par page. Vous pouvez créer autant d’éléments <nav> que vous avez de navigations différentes dans vos pages, à partir du moment où chacun d’entre eux est bien identifié. L’élément <nav> est plutôt dédié à la navigation principale du site, à la création de liens entre les pages du site.

Vous pouvez inclure une navigation principale <nav> dans un en-tête <header> et une navigation secondaire <nav> dans un pied de page <footer>, par exemple.

L’élément <main>

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

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 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 ne doit pas contenir que les résultats de la recherche.

L’affichage des éléments de structure

Les éléments de structure de type block que nous venons de voir, à savoir <div>, <header>, <footer>, <aside>, <nav>, <main>, <section> et <article>, utilisent tous la propriété display, mais ne possèdent pas de valeur spécifiée pour les marges.

div, header, footer, aside, nav, main, section, article { 
    display : block ; 
} 

Un exemple de structure sémantique d’un article

Voici un exemple d’un article, d’un contenu rédactionnel utilisant ces éléments de structure sémantique :

Nous avons :