Sections : Démo HTML5
Mise à jour : 2017-01-22
En ajoutant un aspect sémantique, elles renforcent l'indexation par les moteurs de recherche et renforcent l'accessibilité.
Les éléments peuvent être imbriqué et ainsi rendre compte d'une hiérarchie du document.
Par exemple, on peut imbriquer les éléments "section" et utiliser conjointement les niveaux de titre (<h1>...<h6>) pour apporter une hiérarchie et du sens.
Les balises
- <header> : en-tête d'une section (la page elle-même pouvant être considérée comme une section).
- <nav> : bloc réservé à la navigation.
- <article> : bloc de contenu principal.
- <section> : sous-partie d'un article.
- <aside> : section en léger décalage avec le contenu.
- <footer> : pied de page d'une section.
=>
© Lachlan Hunt
© Lachlan Hunt
Notes sur le tuto
- Les mêmes styles sont appliqués aux div et aux sections.
Exemple de code HTML5
<div style="float:left;"> <div id="myHeader"><h4><div id="header"></h4></div> <div id="myNav"><div id="nav"></div> <div id="myArticle" style="float:left;"> <div id="article"> <div id="mySection"><div id="section"></div> </div> <div id="myAside" style="float:right;"><div id="aside"></div> <div id="myFooter" style="clear:both;"><div id="footer"></div> </div> <div style="float:left;"><br><br><br><br><br><br>=></div> <div style="float:left;" id="demo"> <header><h4><header></h4></header> <nav><nav></nav> <article style="float:left;"> <article> <section><section></section> </article> <aside style="float:right;"><aside></aside> <footer style="clear:both;"><footer></footer> </div> <div style="clear:both"></div>
Démonstration du résultat HTML5
<div id="header">
<div id="article">
<div id="section">
<div id="aside">
=>
<header>
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script> isTagSupported("header"); isTagSupported("nav"); isTagSupported("article"); isTagSupported("section"); isTagSupported("aside"); isTagSupported("footer"); </script>