Sections en HTML5
Présentation des balises de section
Ci-dessous les principales balises de section introduites par HTML5 :
<section>Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d'application web.
<nav>Section possédant des liens de navigation principaux (au sein du document ou vers d'autres pages).
<article>Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
<aside>Section dont le contenu est un complément par rapport à ce qui l'entoure, qui n'est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
<header>Section d'introduction d'un article, d'une autre section ou du document entier (en-tête de page).
<footer>Section de conclusion d'une section ou d'un article, voire du document entier (pied de page).
Source : http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html.
Remarque : Non-unicité des éléments header/footer
Comme le suggère la description faite ci-dessus, les éléments header et footer peuvent être utilisés au sein d'une section ; on peut donc trouver plusieurs éléments de ce type dans une même page web.
On pourra par exemple inclure dans le header d'une section le titre et sous titre de cette dernière, et dans son footer les références associées.
Exemple : Page type
Une page type en HTML5 reprenant les nouvelles balises de structuration pourrait avoir le squelette décrit ci-dessous.
<body>
<header>
<h1>Welcome On Our Website!</h1>
<p>Here is our logo and slogan.</p>
</header>
<nav>
<header>
<h2>Choose Your Interest</h2>
</header>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
<article>
<header>
<h1>Title of Article</h1>
<h2>Subtitle of Article</h2>
</header>
<section>
<h3>First Logical Part (e.g. "Theory")</h3>
<p>Paragraph 1 in first section</p>
<h4>Some Other Subheading in First Section</h4>
<p>Paragraph 2 in first section</p>
</section>
<section>
<h3>Second Logical Part (e.g. "Practice")</h3>
<p>Paragraph 1 in second section</p>
<p>Paragraph 2 in second section</p>
</section>
<footer>
<h4>Author Bio</h4>
<p>Paragraph in Article's Footer</p>
</footer>
</article>
<aside>
<h2>Get To Know Us Better</h2>
<section>
<h3>Popular Posts</h3>
<ul>...</ul>
</section>
<section>
<h3>Partners</h3>
<ul>...</ul>
</section>
<section>
<h3>Testimonials</h3>
<ul>...</ul>
</section>
</aside>
<footer>
<ul>
<li>Copyright</li>
<li>Social Media Links</li>
</ul>
</footer>
</body>
L'intérêt des balises de section par rapport à HTML4
Quelques problèmes rencontrés en HTML4 et comment HTML5 les résout :
HTML4 | HTML5 |
|---|---|
La transclusion d'un sous-document dans un autre est difficile car il est souvent nécessaire de devoir modifier la hiérarchie des titres. En effet, on ne peut avoir qu'un groupe d'éléments h1 ayant eux mêmes des éléments h2, etc. | Chaque section possède ses propres titres sans conflit avec ceux des sections de même niveau par exemple. Une transclusion peut donc se faire de manière quasi-immédiate sans modifier la hiérarchie des titres. |
Chaque section fait partie de la structure du document. Il n'existe pas de section associée au site, comme les menus de navigation, le pied de page principal (avec mentions légales, contact...). | Les éléments tels que nav, header ou footer en dehors de toute section contiennent des informations relatives au site de manière générale. Voir également dans le complément ci-après la balise <main>. |
Avec HTML5, certains navigateurs peuvent :
adapter l'affichage du contenu selon le support (mobile ou non) ;
générer automatiquement une table des matières du document avec sauts rapides.
Ensuite, les technologies d'assistance (personnes aveugles...) peuvent délivrer un contenu adapté à son rôle dans le document (titre, paragraphe...).
Enfin, les moteurs d'indexation améliorent l'accessibilité des pages bien structurées.
Complément : La balise main
Assez peu connue, la balise main introduite par HTML5 permet de spécifier le contenu principal d'une page web. Son contenu devrait être spécifique à la page en cours, et donc non accessible ailleurs sur le site (a contrario des liens de navigation générale, du logo du site...). Elle devrait se substituer aux div qualifiées "main containers" que l'on retrouve sur de nombreuses pages web écrites en HTML4.