Les balises sémantiques HTML5 permettent de définir clairement la fonction d’une zone de la page autant pour les browsers que pour les développeurs ou les moteurs de recherche. Elles sont utilisées par les « readers » et améliorent donc grandement l’accessibilité du site à un plus grand nombre. Elles amènent également l’avantage de définir des styles précis pour chaque zone sans avoir a ajouter d’attribut class. Html 5 apporte 6 nouvelles balises qui permettent d’affiner la structuration de vos pages
| Balise | Utilisation |
|---|---|
| <header> | Section d’introduction de la page entière ou d’une section. Il serait préférable de lui donner un titre (h1 -> h6) mais ce n’est pas obligatoire. Cette balise n’est pas faite pour introduire une nouvelle section |
| <footer> | Section qui représente la fin de la page ou d’un article. Remplace le traditionnel div de fin de page et donne accès à une ne meilleure compréhension de la page. Elle est conçue pour encapsuler par exemple les informations sur l’auteur ou l’éditeur de la page ou article. Comme le header, elle n’est pas conçue pour clore une section. |
| <section> | Définit une section du document qui parle d’un sujet ou d’une fonctionnalité et qui peut être extraite du document général tout en gardant en sens et restant compréhensible dans son ensemble. |
| <article> | Section de contenu dans la page qui peut être lu de façon indépendante, et même extraite du document pour par exemple un flux rss, sans pénaliser la compréhension générale. Il devrait toujours contenir un titre (Hn) |
| <nav> | Section utile à la navigation. C’est la partie qui contient principalement les liens et idéalement des listes d’éléments. |
| <aside> | Balise qui permet d’encapsuler une information qui n’a pas de rapport direct avec le contenu principal. Défini une section qui n’est pas indispensable à la compréhension générale de la page. A noter qu’il est inapproprié d’utiliser cette balise pour du contenu que l’on pourrait dire ‘entre-parenthèses’. Elle est dédiée à du contenu très peu en relation avec la page… |
Exemple d’implémentation des balises sémantiques
