HTML Éléments Sémantiques
Éléments sémantiques = éléments ayant une signification.
Qu'est-ce que les Éléments Sémantiques ?
Un élément sémantique décrit clairement sa signification tant pour le navigateur que pour le développeur.
Exemples d'éléments non sémantiques : <div> et <span> - Ne donnent aucune indication sur leur contenu.
Exemples d'éléments sémantiques : <img> , <table> , et <article> - Définissent clairement leur contenu.
Éléments Sémantiques en HTML
De nombreux sites web contiennent du code HTML tel que : <div id="nav"> <div class="header"> <div id="footer"> pour indiquer la navigation, l'en-tête et le pied de page.
En HTML, il existe plusieurs éléments sémantiques qui peuvent être utilisés pour définir différentes parties d'une page web :
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Élément HTML <section>
L'élément <section> définit une section dans un document.
Selon la documentation HTML du W3C : "Une section est un regroupement thématique de contenu, généralement avec un titre."
Exemples d'endroits où un élément <section> peut être utilisé :
- Chapitres
- Introduction
- Articles d'actualité
- Informations de contact
Une page web peut généralement être divisée en sections pour l'introduction, le contenu et les informations de contact.
Exemple
Deux sections dans un document :
<section>
<h1>WWF</h1>
<p>Le Fonds Mondial pour la Nature (WWF) est une organisation internationale œuvrant pour la conservation, la recherche et la restauration de l'environnement, anciennement connue sous le nom de Fonds Mondial pour la Faune. WWF a été fondé en 1961.</p>
</section>
<section>
<h1>Symbole du Panda de WWF</h1>
<p>Le Panda est devenu le symbole de WWF. Le logo bien connu du panda de WWF provient d'un panda nommé Chi Chi, qui a été transféré du Zoo de Pékin au Zoo de Londres l'année même de la création de WWF.</p>
</section> Élément HTML <article>
L'élément <article> spécifie un contenu indépendant et autonome.
Un article doit avoir un sens par lui-même et il doit être possible de le distribuer indépendamment du reste du site web.
Exemples d'endroits où l'élément <article> peut être utilisé :
- Publications de forum
- Articles de blog
- Commentaires d'utilisateurs
- Cartes de produits
- Articles de journaux
Exemple
Trois articles avec un contenu indépendant et autonome :
<article>
<h2>Google Chrome</h2>
<p>Google Chrome est un navigateur web développé par Google, lancé en 2008. Chrome est le navigateur web le plus populaire au monde aujourd'hui !</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox est un navigateur web open-source développé par Mozilla. Firefox est le deuxième navigateur web le plus populaire depuis janvier 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge est un navigateur web développé par Microsoft, lancé en 2015. Microsoft Edge a remplacé Internet Explorer.</p>
</article> Exemple 2
Utilisez CSS pour styliser l'élément <article> :
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Navigateurs les Plus Populaires</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome est un navigateur web développé par Google, lancé en 2008. Chrome est le navigateur web le plus populaire au monde aujourd'hui !</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox est un navigateur web open-source développé par Mozilla. Firefox est le deuxième navigateur web le plus populaire depuis janvier 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge est un navigateur web développé par Microsoft, lancé en 2015. Microsoft Edge a remplacé Internet Explorer.</p>
</article>
</article>
</body>
</html> Imbriquer <article> dans <section> ou vice versa ?
L'élément <article> spécifie un contenu indépendant et autonome.
L'élément <section> définit une section dans un document.
Pouvons-nous utiliser ces définitions pour décider comment imbriquer ces éléments ? Non, nous ne le pouvons pas !
Ainsi, vous trouverez des pages HTML avec des éléments <section> contenant des éléments <article> et des éléments <article> contenant des éléments <section> .
Élément HTML <header>
L'élément <header> représente un conteneur pour un contenu introductif ou un ensemble de liens de navigation.
Un élément <header> contient généralement :
- un ou plusieurs éléments de titre (<h1> - <h6>)
- un logo ou une icône
- des informations sur l'auteur
Remarque : Vous pouvez avoir plusieurs éléments <header> dans un document HTML. Cependant, <header> ne peut pas être placé à l'intérieur d'un <footer> , <address> ou un autre élément <header> .
Exemple
Un en-tête pour un <article> :
<article>
<header>
<h1>Que Fait WWF ?</h1>
<p>La mission de WWF :</p>
</header>
<p>La mission de WWF est d'arrêter la dégradation de l'environnement naturel de notre planète,
et de construire un avenir où les humains vivent en harmonie avec la nature.</p>
</article> Élément HTML <footer>
L'élément <footer> définit un pied de page pour un document ou une section.
Un élément <footer> contient généralement :
- des informations sur l'auteur
- des informations sur le copyright
- des informations de contact
- un plan du site
- des liens de retour en haut
- des documents connexes
Vous pouvez avoir plusieurs éléments <footer> dans un document.
Exemple
Une section de pied de page dans un document :
<footer>
<p>Auteur : Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer> Élément HTML <nav>
L'élément <nav> définit un ensemble de liens de navigation.
Remarquez que TOUS les liens d'un document ne doivent pas être à l'intérieur d'un élément <nav> . L'élément <nav> est destiné uniquement aux blocs majeurs de liens de navigation.
Les navigateurs, tels que les lecteurs d'écran pour les utilisateurs handicapés, peuvent utiliser cet élément pour déterminer s'ils doivent omettre le rendu initial de ce contenu.
Exemple
Un ensemble de liens de navigation :
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> Élément HTML <aside>
L'élément <aside> définit un contenu à part du contenu dans lequel il est placé (comme une barre latérale).
Le contenu de <aside> doit être indirectement lié au contenu environnant.
Exemple
Afficher un contenu à part du contenu dans lequel il est placé :
<p>Ma famille et moi avons visité le centre Epcot cet été. Le temps était agréable, et Epcot était incroyable ! J'ai passé un excellent été avec ma famille !</p>
<aside>
<h4>Centre Epcot</h4>
<p>Epcot est un parc à thème au Walt Disney World Resort avec des attractions passionnantes, des pavillons internationaux, des feux d'artifice primés et des événements spéciaux saisonniers.</p>
</aside> Exemple 2
Utilisez CSS pour styliser l'élément <aside> :
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>Ma famille et moi avons visité le centre Epcot cet été. Le temps était agréable, et Epcot était incroyable ! J'ai passé un excellent été avec ma famille !</p>
<aside>
<p>Le centre Epcot est un parc à thème au Walt Disney World Resort avec des attractions passionnantes, des pavillons internationaux, des feux d'artifice primés et des événements spéciaux saisonniers.</p>
</aside>
<p>Ma famille et moi avons visité le centre Epcot cet été. Le temps était agréable, et Epcot était incroyable ! J'ai passé un excellent été avec ma famille !</p>
<p>Ma famille et moi avons visité le centre Epcot cet été. Le temps était agréable, et Epcot était incroyable ! J'ai passé un excellent été avec ma famille !</p>
</body>
</html> Éléments HTML <figure> et <figcaption>
La balise <figure> spécifie un contenu autonome, comme des illustrations, des diagrammes, des photos, des listings de code, etc.
La balise <figcaption> définit une légende pour un élément <figure> . L'élément <figcaption> peut être placé comme le premier ou le dernier enfant d'un élément <figure> .
L'élément <img> définit l'image ou l'illustration réelle.
Exemple
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Pouilles, Italie.</figcaption>
</figure> Pourquoi des Éléments Sémantiques ?
Selon le W3C : "Un Web sémantique permet de partager et de réutiliser des données à travers des applications, des entreprises et des communautés."
Éléments Sémantiques en HTML
Ci-dessous se trouve une liste de certains des éléments sémantiques en HTML.
| Balise | Description |
|---|---|
| <article> | Définit un contenu indépendant et autonome |
| <aside> | Définit un contenu à part du contenu de la page |
| <details> | Définit des détails supplémentaires que l'utilisateur peut afficher ou cacher |
| <figcaption> | Définit une légende pour un élément <figure> |
| <figure> | Spécifie un contenu autonome, comme des illustrations, des diagrammes, des photos, des listings de code, etc. |
| <footer> | Définit un pied de page pour un document ou une section |
| <header> | Spécifie un en-tête pour un document ou une section |
| <main> | Spécifie le contenu principal d'un document |
| <mark> | Définit un texte marqué ou surligné |
| <nav> | Définit des liens de navigation |
| <section> | Définit une section dans un document |
| <summary> | Définit un titre visible pour un élément <details> |
| <time> | Définit une date ou une heure |
Pour une liste complète de toutes les balises HTML disponibles, visitez notre Référence des Balises HTML .