HTML5: pour mieux présenter vos pages Web
Page 3: Les nouveaux conteneurs: balises sémantiques
Toutes les pages 
HTML5: pour mieux présenter vos pages Web
Page 3
Les nouveaux conteneurs: balises sémantiques
Les nouveaux conteneurs: balises sémantiques
Les nouveaux conteneurs du HTML5 (Balises sémantiques)
Nous avons déjà vu dans le cours de HTML4 plusieurs balises servant de conteneurs. La plus célèbre est sans aucun doute la balise <div>.La balise <div> est de type block (elle crée un bloc et occupe la ligne entière et, par conséquent, elle engendre un retour à la ligne avant et après). La balise <div> (associée à du CSS) permet de diviser la page en zones. Par exemple, une zone d'entête, une zone de menu de navigation, une zone qui renferme le contenu principal, une zone pour le bas de page et ainsi de suite.
De cette manière, l'affichage du site correspondra certainement à ce que l'on souhaite. Mais, est ce que le navigateur lui même a une idée la nature du contenu inclus dans chacune de ces balises <div>? Ou encore, quand le robot d'un moteur de recherche vient rendre visite à notre page, est ce qu'il comprendra ce que renferme chacune de ces <div>? La réponse est non.
En effet, il n'y a qu'une seule balise qui fait tout le travail. C'est le CSS qui décide de la mettre en haut, en bas ou sur le coté. Mais ça n'indique aucune information sur la nature ni l'importance de son contenu.
HTML5 a apporté une solution à cela. Il s'agit des balises sémantiques. Les balises sémantiques ont le même rendu que la balise <div>, c'est à dire qu'elles sont de type block. Nous aurons donc toujours besoin de CSS pour les doter du design souhaité et les mettre là où l'on veut. Cependant, il y a une très grande différence entre ces balises sémantiques et la balise <div>. Les balises sémantiques donnent une idée sur le contenu renfermé. Par conséquent, utiliser les balises sémantiques comme ils se doivent permet de mieux structurer le document, ce qui a des répercutions indéniables sur la manière dont le navigateur le traite.
Examinons maintenant les balises sémantiques (ou conteneurs HTML5) les plus utilisés.
Balise <header>
Comme son nom l'indique la balise <header> est la balise d'entête (Il ne s'agit pas de la balise <head>. Là on parle de conteneurs, donc ce sont des balises intégrées dans la balise <body>). Si par exemple le site appartient à une entreprise, alors la balise <header> contiendra des informations comme le logo, l'enseigne ou le slogan.Il ne faut pas s'attendre à ce que le navigateur place la balise <header> en haut de la page. Elle sera affichée là où elle a été déclarée. Il faut donc faire en sorte de la mettre en haut de la page en la déclarant en premier ou en utilisant des styles CSS.
Balise <footer>
La balise <footer> est le pied de page. Elle doit normalement être placée en bas de celle ci ou en bas d'un bloc. Elle contient des informations en guise de conclusion. Elle peut aussi contenir des liens du bas de page, les copyrights ou des mentions spécifiques comme les termes légaux ou les conditions d'utilisation...Balise <nav>
La balise <nav> renferme les liens du menu de navigation principal du site Web. On peut la placer n'importe où sur notre page, mais il est fréquent que le menu principal soit placé sur les cotés ou sur le bord de la page d'une manière assez visible pour faciliter la navigation.Balise <section>
La balise <section> constitue un bloc principal qui traite le même sujet ou contient des informations de même nature. C'est généralement la partie dont le contenu change d'une page à une autre. Une section peut contenir sa propre entête (<header>) et son propre pied de page (<footer>).Balise <aside>
La balise <aside> renferme du contenu supplémentaire à un bloc. Elle peut être placée dans la balise <section> ou déclarée à part. Le contenu qu'elle peut inclure peut représenter des liens annexes à un sujet traité dans une section, la définitions d'un terme apparu avant, les références d'une publication...Balise <article>
La balise <article> est destinée à accueillir des informations externes au site Web. En effet, une page ne contient pas toujours que notre propre contenu. On peut, au choix, mettre des blocs qui contiennent des données provenant d'autres site Web comme la météo, les flux RSS, les annonces ou la publicité. Le meilleur endroit pour mettre ce contenu c'est dans la balise <article>. De cette manière le navigateur et les outils de recherche de et d’indexation savent que ce sont des données qui proviennent d'ailleurs.Voici un exemple de répartition des balises sémantique dans un document HTML5:
| <header> | |||
| <nav> | <section>
| ||
| <footer> | |||
C'est le moment d’écrire du code. Nous allons déclarer les différentes balises qu'on a vu pour voir de quoi cela aura l'air sur le navigateur.
<!DOCTYPE html>
<html>
<head>
<title>Document HTML5</title>
<meta charset="UTF-8" />
</head>
<body>
<header>HEADER</header>
<nav>NAV</nav>
<section>
<aside>ASIDE</aside>
<article>ARTICLE</article>
</section>
<footer>FOOTER</footer>
</body>
</html>
Normalement, le résultat devrait ressembler à cela:
<html>
<head>
<title>Document HTML5</title>
<meta charset="UTF-8" />
</head>
<body>
<header>HEADER</header>
<nav>NAV</nav>
<section>
<aside>ASIDE</aside>
<article>ARTICLE</article>
</section>
<footer>FOOTER</footer>
</body>
</html>
HEADER NAV ASIDE ARTICLE FOOTER
Et oui, si le contenu est sur la même linge c'est parce que les balises sémantiques n'ont pas été exécutées. Mais c'est normal, car Internet Explorer ne commence à prendre en charge HTML5 qu'à partir de la version 9.
Mais, les internautes qui utilisent encore d'anciennes versions de IE sont condamnés à ne pas voir correctement notre contenu? La réponse est non. Heureusement Google met à notre disposition l'alternative HTML5Shim. Il s'agit d'un code écrit en Javascript qui se charge de renseigner aux anciens navigateur IE les balises HTML5 (je préfère ne pas parler en détail de comment ça marche, car il faut être initié en Javascript pour comprendre le principe).
Ce qu'il faut donc faire, c'est déclarer le script HTML5Shim dans notre page Web, pour que les anciennes versions d'IE l’exécutent et reconnaissent ainsi nos nouvelles balises. Mais un problème subsiste. Le script sera exécuté par tous les navigateurs et pas seulement ceux que l'on cible. Heureusement encore une fois, il existe une solution appelée commentaire conditionnel. Il s'agit d'un commentaire HTML qui est ignoré par tous les navigateurs sauf par ceux de Microsoft, qui liront ce qui est dedans et décideront de l’exécuter ou non selon la condition explicitée.
Voilà le code du commentaire conditionnel exécutant le script HTML5Shim:
<!--[if lt IE 9]>
<script src="http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Le bloc [if lt IE 9] représente une condition qui signifie: si la version de IE est inférieure strictement à 9. En effet lt signifie less than. Il y a aussi gt qui signifie greater than, lte pour less than or equal etc... le bloc [endif] met fin à la condition.
<script src="http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Le code précédent devient alors:
<!DOCTYPE html>
<html>
<head>
<title>Document HTML5</title>
<meta charset="UTF-8" />
<!--[if lt IE 9]>
<script src="http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>HEADER</header>
<nav>NAV</nav>
<section>
<aside>ASIDE</aside>
<article>ARTICLE</article>
</section>
<footer>FOOTER</footer>
</body>
</html>
Si maintenant vous exécutez le code sur IE6, IE7 ou IE8 le résultat sera comme prévu:
<html>
<head>
<title>Document HTML5</title>
<meta charset="UTF-8" />
<!--[if lt IE 9]>
<script src="http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>HEADER</header>
<nav>NAV</nav>
<section>
<aside>ASIDE</aside>
<article>ARTICLE</article>
</section>
<footer>FOOTER</footer>
</body>
</html>
Vous avez remarqué que le commentaire conditionnel est déclaré dans la balise <head>. C'est là où, d'habitude, sont déclarés les scripts Javascript.
D'autres conteneurs HTML5
Il existe de nombreuses nouvelles balises de type conteneur introduite par HTML5. Celles vues dans la première partie de cette page sont les plus marquantes. Cependant il existe d'autres balises que je vais brièvement définir.Balise <canvas>
La balise <canvas> est un conteneur spécial qui permet de générer des images ou des formes sur le navigateur. Pour s'en servir il faut faire appel au langage Javascript (qui est un langage de script coté client très puissant).Voici le lien vers le cours Dessiner avec Javascript et la balise canvas.
Balises <figure> et <figcaption>
La balise <figure> est un conteneur HTML5 qui permet d'inclure des images, schémas, tableaux ou tout autre élément qui peut être considéré comme une figure. Pour associer une légende à cette figure on recourt à la balise <figcaption> qui contient du texte.Exemple:
<figure>
<img src="http://www.chiny.me/images/footerlogo.png" alt="Logo" />
<figcaption>Logo officiel</figcaption>
</figure>
Ce qui donne le résultat suivant:
<img src="http://www.chiny.me/images/footerlogo.png" alt="Logo" />
<figcaption>Logo officiel</figcaption>
</figure>
Les balises sémantiques en vidéo
Page 3
Les nouveaux conteneurs: balises sémantiques
Les nouveaux conteneurs: balises sémantiques
Quiz 
