Structurer sa page

Je vais vous présenter ici les nouvelles balises introduites par HTML5 pour structurer nos pages. Vous allez voir, cela ne va pas beaucoup changer l'apparence de notre site pour le moment, mais il sera bien construit et prêt à être mis en forme ensuite !

<header>: l'en-tête

La plupart des sites web possèdent en général un en-tête, appelé header en anglais. On y trouve le plus souvent un logo, une bannière, le slogan de votre site…

Vous devrez placer ces informations à l'intérieur de la balise<header>:
<header>
<!-- Placez ici le contenu de l'en-tête de votre page -->
</header>

<footer>: le pied de page

À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du document. On y trouve des informations comme des liens de contact, le nom de l'auteur, les mentions légales, etc.
<footer>
<!-- Placez ici le contenu du pied de page -->
</footer>

<nav>: principaux liens de navigation

La balise <nav> doit regrouper tous les principaux liens de navigation du site. Vous y placerez par exemple le menu principal de votre site.

Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur de la balise <nav> :
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

<section>: une section de page

La balise<section>sert à regrouper des contenus en fonction de leur thématique. Elle englobe généralement une portion du contenu au centre de la page.
<section>
<h1>Ma section de page</h1>
<p>Bla bla bla bla</p>
</section>

<aside>: informations complémentaires

La balise <aside> est conçue pour contenir des informations complémentaires au document que l'on visualise. Ces informations sont généralement placées sur le côté (bien que ce ne soit pas une obligation).
<aside>
<!-- Placez ici des informations complémentaires -->
</aside>

<article>: un article indépendant

La balise <article> sert à englober une portion généralement autonome de la page. C'est une partie de la page qui pourrait ainsi être reprise sur un autre site. C'est le cas par exemple des actualités (articles de journaux ou de blogs).
<article>
<h1>Mon article</h1>
<p>Bla bla bla bla</p>
</article>

Résumé

Ouf, cela fait beaucoup de nouvelles balises à retenir. Heureusement, je vous ai fait un petit schéma (figure suivante) pour vous aider à retenir leur rôle ! structure d'un site internet
Essayons d'utiliser les balises que nous venons de découvrir pour structurer notre page web. Le code ci-dessous reprend toutes les balises que nous venons de voir au sein d'une page web complète :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Zozor - Le Site Web</title>
</head>

<body>
<header>
<h1>Zozor</h1>
<h2>Carnets de voyage</h2>
</header>

<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CV</a></li>
</ul>
</nav>

<section>
<aside>
<h1>À propos de l'auteur</h1>
<p>C'est moi, Zozor ! Je suis né un 23 novembre 2005.</p>
</aside>
<article>
<h1>Je suis un grand voyageur</h1>
<p>Bla bla bla bla (texte de l'article)</p>
</article>
</section>

<footer>
<p>Copyright Zozor - Tous droits réservés<br />
<a href="#">Me contacter !</a></p>
</footer>

</body>
</html>
Ce code peut vous aider à comprendre comment les balises doivent être agencées. Vous y reconnaissez un en-tête, un menu de navigation, un pied de page… et, au centre, une section avec un article et un bloc <aside> donnant des informations sur l'auteur de l'article. exemple page html C'est vrai. En fait, ces balises sont seulement là pour expliquer à l'ordinateur « Ceci est l'en-tête », « Ceci est mon pied de page », etc. Elles n'indiquent pas, contrairement à ce qu'on pourrait penser, où doit être placé le contenu. C'est le rôle du CSS, comme nous le verrons dans peu de temps maintenant.

À l'heure actuelle, pour tout vous dire, ces balises ont encore assez peu d'utilité. On pourrait très bien utiliser des balises génériques <div> à la place pour englober les différentes portions de notre contenu. D'ailleurs, c'est comme cela qu'on faisait avant l'arrivée de ces nouvelles balises HTML5.

Néanmoins, il est assez probable que, dans un futur proche, les ordinateurs commencent à tirer parti intelligemment de ces nouvelles balises. On peut imaginer par exemple un navigateur qui choisisse d'afficher les liens de navigation <nav> de manière toujours visible ! Quand l'ordinateur « comprend » la structure de la page, tout devient possible.
  • Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui constituent la page web :
    • <header>: en-tête ;
    • <footer>: pied de page ;
    • <nav>: liens principaux de navigation ;
    • <section>: section de page ;
    • <aside>: informations complémentaires ;
    • <article>: article indépendant.
  • Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut avoir son propre en-tête.
  • Ces balises ne s'occupent pas de la mise en page. Elles servent seulement à indiquer à l'ordinateur le sens du texte qu'elles contiennent. On pourrait très bien placer l'en-tête en bas de la page si on le souhaite.