initiation à HTML5
Structure de l'information
Le HTML5 a porté beaucoup d'attention à la structuration de sites existants et a standardisé leur usage au sein de quelques balises. Alors qu'auparavant la balise div était utilisée pour organiser le découpage de la page en partie, on utilisera maintenant des éléments spécifiques au rôle du contenu inclus.
Cela a l'avantage de rendre les choses plus claires pour les moteurs de recherche qui identifient mieux les parties informatives du site, par rapport aux parties de navigations et aux parties publicitaires. Il ne reste pas moins que cela devient une contrainte à suivre pour les intégrateurs.
Cependant, ces balises sont souvent difficiles à appréhender par le débutant, car elles n'ont pas d'impact visuel. Elles servent juste à structurer la page de façon sémantique.
Cette partie est simple en principe, mais ne sont pas toujours les plus faciles. Les débutants, en particulier, pourront être gênés par le fait que les balises vues ici ne produisent pas de rendu visuel spécifique, rendant ainsi difficile toute évaluation de l'action effectuée. Vous pouvez très bien passer ce chapitre et y revenir ultérieurement.
header
Header définit un ensemble introductif relatif à son élément parent. Le header est considéré avant le bandeau de la page (body), mais il peut aussi être introduit dans tout autre élément : une liste, une section, un article... un header peut lui-même contenir d'autres balises comme les balises de titre (h), paragraphe (p) ou de navigation (nav).
Un exemple d'utilisation de header serait :
<body>
<header>
<h1>Les petits hommes verts</h1>
<h2>Les martiens sont là !</h2>
</header>
<p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
<h1>Nous rencontrer</h1>
<p>Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.</p>
<h1>S'inscrire</h1>
<p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
</body>
ce qui affichera le résultat :
On pourrait ici croire que le texte "les martiens sont là" soit un titre du contenu. Pourtant, si on regarde avec les yeux du navigateurs, on voit bien qu'il est compris dans la zone de titre. Ceal aura un impact sur le référencement et éventuellement sur le travail graphique en CSS.
nav
L'élément nav apporte au HTML la capacité de marquer de façon claire les zones dédiées spécifiquement à la navigation dans le site. Les barres horizontales en haut de site ou les colonnes de gauche sont des exemples typiques de sections devant être spécifiées en nav. Mais d'autres cas d'utilisations sont envisageables :
- Pied de page avec une liste de liens vers les mentions légales, conditions générales, contact...
- Des liens propres à une rubrique d'un site web et permettant de naviguer au sein de cette rubrique.
- Des liens propres à un article sur une page et permettant d'accéder facilement aux parties à partir d'une sorte de table des matières placée en début d'articles.
- Des liens propres à un article répartis sur plusieurs pages et parmi lesquelles il faudra naviguer...
Ce que l'on voit ici c'est l'élément nav servira à chaque fois pour regrouper des liens permettant de se déplacer dans un contenu identifié et organisé. Ces liens peuvent être écrits en prose ou sous forme de liste, selon le souhait. En général, la liste semble être la plus courante.
L'utilisation de la balise nav permettra aux moteurs de recherche d'identifier spécifiquement les liens importants de votre site, de naviguer plus facilement dans votre contenu et de réduire l'importance des liens annexes dans leur contexte d'utilisation. La balise nav et les liens qui y sont inclus seront donc systématiquement associés au niveau informationnel de la section courante qu'il s'agisse du body, d'un article ou autre.
<body>
<nav>
<ul>
<li><a href="inscription.html">Inscription</a></li>
<li><a href="actualite.html">Actus</a></li>
<li><a href="rencontres.html">Rencontres</a></li>
</ul>
</nav>
<header>
<h1>Les petits hommes verts</h1>
<h2>Les martiens sont là !</h2>
</header>
<p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
<h1>Nous rencontrer</h1>
<p>Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.</p>
<h1>S'inscrire</h1>
<p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
</body>
Cela permettra d'arriver au résultat :
et avec un peu de mise en forme CSS :
main
L'élément main permet de définir la partie principale d'une page impliquant par ailleurs que cette partie est spécifique à cette page web. Aucun contenu dupliqué sur plusieurs pages ne devrait normalement se retrouver dans un main. On ne devrait donc pas y trouver, les bandeaux, parties principales de navigation ou footer. On peut ainsi faire les remarques suivantes :
- Main devrait être unique dans une page web.
- Main devrait être unique à une page web.
- Main devrait être un enfant de body et ne pas être inclus dans d'autres balises structurantes comment section, article, header... Il pourra en revanche en contenir s'il s'avère utile d'avoir un découpage de cette partie principale avec les balises appropriées.
En reprenant notre exemple précédent, l'utilisation de la balise main produirait le résultat suivant :
<body>
<nav>
<ul>
<li><a href="inscription.html">Inscription</a></li>
<li><a href="actualite.html">Actus</a></li>
<li><a href="rencontres.html">Rencontres</a></li>
</ul>
</nav>
<header>
<h1>Les petits hommes verts</h1>
<h2>Les martiens sont là !</h2>
</header>
<main>
<p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
<h1>Nous rencontrer</h1>
<p>Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.</p>
<h1>S'inscrire</h1>
<p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
</main>
</body>
Cela permettra d'arriver au résultat suivant :
Comme on peut le voir, main ne change rien à notre page, il a juste clarifié la structure entre les différents éléments la constituant. Sans la balise main, la pratique est d'utiliser l'élément div avec un identifiant spécifique du type id="main". Cette pratique n'est cependant plus à conseiller, car div est un élément passe-partout qui ne renseigne pas sur la nature du contenu ni son importance.
Avec un peu de style CSS en fond gris on peut faire ressortir la zone propre au main.
section
Une section agit comme un découpage de la partie principale de l'élément dans lequel elle est placée. Elle peut contenir son propre titre (h), sa propre introduction, son propre header... Elle est en général insérée comme enfant de body ou de article. Si vous devez migrer des sites au préalable réalisés avec XHTML, il est probable que de nombreux div deviendront des sections ou des articles.
Il peut y avoir autant de section que nécessaire dans la page et ils peuvent être répartis dans divers emplacements et divers éléments parents.
<body>
<nav>
<ul>
<li><a href="inscription.html">Inscription</a></li>
<li><a href="actualite.html">Actus</a></li>
<li><a href="rencontres.html">Rencontres</a></li>
</ul>
</nav>
<header>
<h1>Les petits hommes verts</h1>
<h2>Les martiens sont là !</h2>
</header>
<main>
<p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
<section>
<h1>Nous rencontrer</h1>
<p>Il suffit de vous inscrire et vous aurez des petites nouvelles de nous sans tarder.</p>
</section>
<section>
<h1>S'inscrire</h1>
<p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
</section>
</main>
</body>
Dans cet exemple nous avons encadré dans des sections différentes chaque partie de la page ayant trait à des informations spécifiques. Cela permettra d'arriver au résultat, identique aux précédents visuellement, mais toujours plus riche dans l'organisation du document :
article
L'élément article est un autre élément de groupage de contenu, au même titre que main ou section. En principe, là ou main se réfère à la partie principale de contenu de page, là où section représente un découpage de contenu, article représente un découpage spécifique d'une unité d'information qui peut ensuite être redécoupée en section, paragraphes... article accepte donc tout type de contenu dont section, header, footer, nav, p, voire article lui-même ... nécessaire à l'organisation du contenu propre à cet article.
En pratique il sera souvent difficile de savoir s'il est préférable de définir une section ou un article, l'usage se fera certainement de lui-même à long terme.
<body>
<nav>
<ul>
<li><a href="inscription.html">Inscription</a></li>
<li><a href="actualite.html">Actus</a></li>
<li><a href="rencontres.html">Rencontres</a></li>
</ul>
</nav>
<header>
<h1>Les petits hommes verts</h1>
<h2>Les martiens sont là !</h2>
</header>
<main>
<p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
<article>
<h1>Rencontrer des martiens</h1>
<section>
<h1>Nous rencontrer sur le web</h1>
<p>Abonnez-vous au flux d'actualité et vous aurez des petites nouvelles de nous sans tarder.</p>
<p>Ou connectez-vous sur marsnet :)</p>
</section>
<section>
<h1>Nous rencontrer en chair</h1>
<p>Envoyez un doigt et nous verrons si la rencontre sera profitable.</p>
</section>
</article>
<section>
<h1>S'inscrire</h1>
<p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
</section>
</main>
</body>
Une fois encore, le résultat visuel n'est pas affecté. Nous avons ici regroupé remplacé une section par un article qui regroupe à présent 2 sections traitant du même sujet. Il y a toujours une section dans le body, qui aurait pu éventuellement elle-même être convertie en article.
aside
Aside est l'élément que l'on peut opposer à main, même si ce n'est pas tout à fait exact. Il sert à définir tout contenu qui n'est pas relié directement à la partie informationnelle principale de la page. Cela peut être un contenu issu d'un autre site, un bandeau publicitaire, des informations annexes... Il s'agit d'un type de section particulier qui peut contenir tout type d'information, généralement représenté dans les documents sous formes de barres latérales. Il peut exister plusieurs aside par page.
Un aside peut être placé dans body, comme dans tout autre élément de section (section, article, main, header, footer...). Dans ce cas, on considérera que le contenu est raccordé, même étroitement, au contenu de la section dans laquelle il est placé. On observe une fois encore qu'il s'agit du placement dans le code, pas le placement dans la page qui, lui, reste libre, et représenté en CSS.
<body>
<nav>
<ul>
<li><a href="inscription.html">Inscription</a></li>
<li><a href="actualite.html">Actus</a></li>
<li><a href="rencontres.html">Rencontres</a></li>
</ul>
</nav>
<header>
<h1>Les petits hommes verts</h1>
<h2>Les martiens sont là !</h2>
</header>
<main>
<p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
<article>
<h1>Rencontrer des martiens</h1>
<section>
<h1>Nous rencontrer sur le web</h1>
<p>Abonnez-vous au flux d'actualité et vous aurez des petites nouvelles de nous sans tarder.</p>
<p>Ou connectez-vous sur marsnet :)</p>
<aside>
<h1>Messagerie</h1>
<p>Nous utilisons aussi la messagerie instantanée IRC</p>
</aside>
</section>
<section>
<h1>Nous rencontrer en chair</h1>
<p>Envoyez un doigt et nous verrons si la rencontre sera profitable.</p>
</section>
</article>
<section>
<h1>S'inscrire</h1>
<p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
</section>
</main>
<aside>
<h1>Les saturniens</h1>
<p>Faites parti du cercle des saturniens sur <a href="#">Saturn Ring</a>.</p>
</aside>
</body>
Nous avons ici rajouté un aside dans la section Nous rencontrer sur le web et un autre en dernier élément enfant du body. Ils ne font pas tous les deux références au même contenu et sont donc placés en conséquence dans le flux de contenu.
Nous avons ici mis en forme la section aside par des pointillés. On peut clairement voir que le aside n'est pas nécessairement une fonction créant un bandeau sur le côté de la page : son impact n'est pas graphique mais bien sémantique.
footer
Enfin, footer est le dernier élément sémantique introduit dans HTML5. Il est un équivalent au header mais sera en général placé en fin de section parente même si rien de contraint à cette position. Il peut donc être placé dans un body (pour faire un pied de page), mais aussi en fin d'article (par exemple pour noter le nom de l'auteur ou la date de publication, licence). Il peut contenir des sections complètes comme des index, par exemple. Il n'est cependant pas considéré comme un élément de section au même titre, qu'article ou aside.
<body>
<nav>
<ul>
<li><a href="inscription.html">Inscription</a></li>
<li><a href="actualite.html">Actus</a></li>
<li><a href="rencontres.html">Rencontres</a></li>
</ul>
</nav>
<header>
<h1>Les petits hommes verts</h1>
<h2>Les martiens sont là !</h2>
</header>
<main>
<p>Bienvenu sur le site des martiens terrestres. Nous vous laissons nous donner vos coordonnées pour une petite visite surprise.</p>
<article>
<h1>Rencontrer des martiens</h1>
<section>
<h1>Nous rencontrer sur le web</h1>
<p>Abonnez-vous au flux d'actualité et vous aurez des petites nouvelles de nous sans tarder.</p>
<p>Ou connectez-vous sur marsnet :)</p>
<aside>
<h1>Messagerie</h1>
<p>Nous utilisons aussi la messagerie instantanée IRC</p>
<footer>Posté le 01-01-01</footer>
</aside>
</section>
<section>
<h1>Nous rencontrer en chair</h1>
<p>Envoyez un doigt et nous verrons si la rencontre sera profitable.</p>
</section>
</article>
<section>
<h1>S'inscrire</h1>
<p>C'est par <a href="#mars">là</a> illico. Et devenez nos amis.</p>
</section>
</main>
<aside>
<h1>Les saturniens</h1>
<p>Faites parti du cercle des saturniens sur <a href="#">Saturn Ring</a>.</p>
</aside>
<footer>Mentions légales - contact@mars.mrs - tel : 01 23 45 67 89</footer>
</body>
Nous avons ici rajouté un footer dans le aside concernant Les saturniens contenant une date de publication et en pied de page contenant les informations générales sur le site.
