HTML5 Éléments sémantiques
Sémantique = Sens
Éléments sémantiques = Éléments porteurs de sens
Que sont les éléments sémantiques ?
Un élément sémantique décrit clairement sa signification à la fois pour le navigateur et pour le développeur.
Non sémantiqueExemples d'éléments : <div> et <span> - N'indique rien sur son contenu.
SémantiqueExemples d'éléments : <form>, <table> et <img> - Définit clairement son contenu.
Prise en charge des navigateurs
Internet Explorer 9+, Firefox, Chrome, Safari et Opera prennent en charge les éléments sémantiques.
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge ces éléments. Cependant, une solution de compatibilité est fournie en bas de l'article.
Nouveaux éléments sémantiques en HTML5
De nombreux sites web existants contiennent du code HTML comme : <div id="nav">, <div class="header">, ou <div id="footer">, pour indiquer les liens de navigation, les en-têtes et les pieds de page.
HTML5 fournit de nouveaux éléments sémantiques pour définir clairement différentes parties d'une page web :
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer>
Élément <section> de HTML5
La balise <section> définit une section (section, segment) dans un document. Comme les chapitres, les en-têtes, les pieds de page, ou d'autres parties d'un document.
Selon la documentation W3C HTML5 : une section contient un groupe de contenu et son titre.
Exemple
Essayez-le vous-même »
Élément <article> de HTML5
La balise <article> définit un contenu indépendant.
Exemples d'utilisation de l'élément <article> :
- Message de forum
- Article de blog
- Article d'actualité
- Commentaire
Exemple
Essayez-le vous-même »
Élément <nav> HTML5
La balise <nav> définit une section de liens de navigation.
L'élément <nav> est utilisé pour définir la section des liens de navigation d'une page. Cependant, tous les liens n'ont pas besoin d'être contenus dans l'élément <nav> !
Exemple
Essayez-le vous-même »
Élément <aside> HTML5
La balise <aside> définit du contenu en dehors de la zone de contenu principale d'une page (comme une barre latérale).
Le contenu de la balise aside doit être lié au contenu de la zone principale.
Exemple
Essayez-le vous-même »
Élément <header> HTML5
L'élément <header> décrit la zone d'en-tête d'un document.
L'élément <header> est principalement utilisé pour définir la zone d'affichage introductive du contenu.
Vous pouvez utiliser plusieurs éléments <header> dans une page.
L'exemple suivant définit l'en-tête d'un article :
Exemple
Essayez-le vous-même »
Élément HTML5 <footer>
L'élément <footer> décrit la zone inférieure d'un document.
L'élément <footer> doit contenir des informations sur son élément conteneur.
Un pied de page contient généralement des informations sur l'auteur du document, des informations sur les droits d'auteur, des liens vers les conditions d'utilisation, des coordonnées, etc.
Vous pouvez utiliser plusieurs éléments <footer> dans un document.
Exemple
Essayez-le vous-même »
Éléments HTML5 <figure> et <figcaption>
La balise <figure> spécifie un contenu de flux indépendant (images, diagrammes, photos, code, etc.).
Le contenu de l'élément <figure> doit être lié au contenu principal, mais s'il est supprimé, il ne doit pas affecter le flux du document.
La balise <figcaption> définit la légende de l'élément <figure>.
L'élément <figcaption> doit être placé comme premier ou dernier élément enfant de l'élément "figure".
Exemple
Essayez-le vous-même »
Pouvons-nous commencer à utiliser ces éléments sémantiques ?
Les éléments ci-dessus sont tous des éléments de bloc (sauf <figcaption>).
Afin de faire fonctionner ces éléments de niveau bloc dans toutes les versions des navigateurs, vous devez définir les propriétés suivantes dans le fichier de feuille de style (le code de style suivant permet aux anciens navigateurs de prendre en charge les éléments de niveau bloc introduits dans ce chapitre) :
{
display: block;
}
Problèmes avec Internet Explorer 8 et les versions IE antérieures
IE8 et les versions IE antérieures ne peuvent pas rendre les effets CSS dans ces éléments, donc vous ne pouvez pas utiliser <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, ni d'autres éléments HTML5.
Solution :Vous pouvez utiliser le script JavaScript HTML5 Shiv pour résoudre le problème de compatibilité avec IE. Adresse de téléchargement de HTML5 Shiv :https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js
Après le téléchargement, placez le code suivant dans la page web :
<![endif]-->
Le code ci-dessus chargera le fichier html5shiv.js lorsque la version du navigateur est inférieure à IE9. Vous le placez dans l'élément <head>, car les navigateurs IE doivent rendre ces nouveaux éléments HTML5 après le chargement de l'élément head.
Autres extensions