Lorsque l’on passe au HTML5, il devient parfois assez confus de réaliser une structure de page sémantiquement viable. Habitué auparavant au HTML4 où la confusion régnait allègrement sur les propriétés sémantique de chaque div (est-elle entrain de désigner un nouveau type de contenu ou est-elle là uniquement pour styler l’élément, la page?) et où, pour le coup nous nous efforcions de séparer les différents types de contenu les uns des autres proprement, le HTML5 arrive avec un grand nombre de balises venant combler ces lacunes. Néanmoins, le HTML5 en voulant résoudre les problèmes des versions précédentes, apporte aussi son lot de confusions, principalement pour la bonne utilisation de ses balises.
Nous nous retrouvons ainsi avec des balises section, header, aside, pour la mise en forme sémantique du contenu mais sans trop comprendre à quel moment les utiliser, et surtout quelle bonne architecture adopter pour la création de ses pages.
Structure d’un document HTML4
Le HTML4 dispose de plusieurs balise permettant la mise en forme sémantique des différents types de contenus, il permet de délimiter les éléments de bases, le corps du document (<body>), les titres (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>). Ces éléments se disposent à l’intérieur d’autres conteneurs, les div. Chaque élément peuvent avoir différents attributs comme des « id », des « class » mais aussi des « role » (utilisé pour la norme d’accessibilité ARIA). Nous pouvons commencer à mettre en forme notre contenu.
Exemples basiques
Ainsi, avec cette structure :
<body> <div id="conteneur"> <div id="section"> <h1>La neige</h1> <p>Voici un petit contenu sur la neige et ses caractéristiques ...</p> <h2>Le froid</h2> <p>...</p> <div id="sous-section"> <h2>L'eau</h2> <p>...</p> </div> </div> </div> </body>
Sera traduite sémantiquement par :
1. La neige 1.1. Le froid 1.2. L'eau 2. La glace
Et avec celle-ci :
<body> <div id="conteneur"> <h1>La neige</h1> <p>Voici un petit contenu sur la neige et ses caractéristiques ...</p> <h2>Le froid</h2> <p>...</p> <h2>L'eau</h2> <p>...</p> <h1>La glace</h1> </div> </body>
Sera traduite sémantiquement sous cette forme :
1. La neige 1.1. Le froid 1.2. L'eau 2.La glace
HTML4 vs HTML5
L’algorithme sémantique du HTML4 est donc imprécis, il ne fait pas la différence entre une <div> utilisée pour styler un élément et une autre pour séparer un contenu.
Le HTML5 permet de s’affranchir de ces <div> de séparation sémantique avec une nouvelle balise <section>.
Le HTML5 permet l’inclusion de documents à plusieurs niveaux, vous pouvez donc avoir plusieurs éléments enfants sémantiquement reliés à votre élément parent. De nouvelles balises (<article>, <section>, <nav> et <aside>) sont autant de sections, d’éléments pouvant être imbriqués pour un contenu cohérent.
Le HTML5 introduit le <hgroup> qui va vous permettre de donner une description d’un titre principale ou même un titre secondaire en les liant sémantiquement.
En HTML4, tout les sections présentés sont en rapport direct avec le document. Cette structure est trop limité, il est important de pouvoir afficher un contenu, un section possédant un rapport au document en général et non direct, comme une publicité ou plus d’informations sur un contenu en particulier. Pour cela le HTML5 a introduit la balise <aside> (utilisée typiquement dans les « sidebares »).
Le HTML5 permet maintenant de disposer d’éléments affichant des informations générales sur un site web et non sur le document, ou la page actuellement consultée. Les éléments <footer>, <nav> et <header> sont donc des éléments permettant de décrire des fonctions propres au site web ou à l’application, comme la navigation avec la balise <nav> par exemple.
Le HTML5 permet une mise en forme sémantique du contenu par section, importance et fonctionnalité, tout en assurant les éléments de style. Il est donc une évolution sémantique du HTML4 tournée vers la déduction des éléments et l’expérience utilisateur.
HTML5 mise en forme
Ainsi, si l’on traduit en HTML5 l’exemple plus haut nous arrivons à ce résultat :
<body> <section> <h1>La neige</h1> <p>Voici un petit contenu sur la neige et ses caractèristiques ...</p> <section> <h1>Le froid</h1> <p>...</p> </section> <section> <h1>L'eau'</h1> <p>...</p> </section> <aside> bloque de publicité </aside> </section> <section> <h1>La glace</h1> </section> <footer> copyright exemple </footer> </body>
Cela va être traduit par :
1. La neige 1.1. Le froid 1.2. L'eau 2. La glace
Chaque section possède sa propre hiérarchisation de données, ainsi les sections et sous-sections peuvent disposer des <h1>, <h2>, <h3>…
HTML5 mise en forme d’une page
Le HTML5 a introduit de nouveaux éléments dans la définition de nouvelles sections et type de contenu d’un document web :
- <aside> définit une section qui tout en étant reliée au contenu générale du document, ne fait pas à proprement parler de celui-ci. Cette section apporte un contenu nouveau sur le document ou un publicité dans les cas les plus fréquents.
- <nav> définit une section contenant des liens de navigation. Il peut y avoir plusieurs de ses sections dans un document.
- <header> définit la partie du site avec le logo, le nom et le slogan, ainsi que sa barre de navigation.
- <footer> définit la partie du site contenant le copyright, les informations légales, des liens de navigation.
De nombreuses autres balises ont vu le jour, notamment pour les adresses et les éléments de date, mais ce n’est pas dans l’objet de cet article.
Avec ces bases nous pouvons commencer à apercevoir comment traduire une structure de page basique :
Tous ces structures sont en guise d’exemples, chaque projet, chaque site web doit faire sa propre adaptation de structure.
<body> <header> <h1>Nom du site</h1> <h2>Slogan du site</h2> <nav> <a href="#">Lien1</a> <a href="#">Lien2</a> <a href="#">Lien3</a> </nav> </header> <section> <h1>Les derniers articles</h1> <article> <h1>Mon premier article</h1> <p>Lorem ipsum dolor ...</p> </article> <article> <h1>Mon deuxième article</h1> <p>Lorem ipsum dolor ...</p> </article> <article> <h1>Mon troisième article</h1> <p>Lorem ipsum dolor ...</p> </article> </section> <aside> Sidebar </aside> <footer> copyright </footer> </body>
HTML5 – Structure sémantique basique
Une forme un peu plus complexe :
<body> <header> <hgroup> <h1>Nom du site</h1> <h2>Slogan du site</h2> </hgroup> <nav> <ul> <li><a href="#">Lien1</a></li> <li><a href="#">Lien2</a></li> <li><a href="#">Lien3</a></li> </ul> </nav> </header> <section> <h1>Les derniers articles</h1> <article> <header> <h1>Mon premier article</h1> </header> <p>Lorem ipsum dolor ...</p> <aside> Plus d'informations </aside> <footer> Informations du footer, auteur, catégorie ... </footer> </article> <article> <header> <h1>Mon premier article</h1> </header> <p>Lorem ipsum dolor ...</p> <aside> Plus d'informations </aside> <footer> Informations du footer, auteur, catégorie ... </footer> </article> <article> <header> <h1>Mon premier article</h1> </header> <p>Lorem ipsum dolor ...</p> <aside> Plus d'informations </aside> <footer> Informations du footer, auteur, catégorie ... </footer> </article> </section> <aside> Sidebar </aside> <footer> copyright <nav> <ul> <li><a href="#">Lien1</a></li> <li><a href="#">Lien2</a></li> <li><a href="#">Lien3</a></li> </ul> </nav> </footer> </body>
HTML5 – Structure sémantique avancée
