Éléments sémantiques HTML
Éléments sémantiques = éléments ayant un 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.
Exemples d' éléments non sémantiques : <div>et <span>- Ne dit rien sur son contenu.
Exemples d' éléments sémantiques : <form>, <table>, et <article>- Définit clairement son 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, certains éléments sémantiques peuvent être utilisés pour définir différentes parties d'une page Web :
- <articles>
- <à part>
- <détails>
- <figcaption>
- <chiffre>
- <pied de page>
- <en-tête>
- <principal>
- <marque>
- <navi>
- <rubrique>
- <résumé>
- <heure>
Élément HTML <section>
L' <section>élément 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' <section>utilisation d'un élément :
- Chapitres
- introduction
- Informations
- Informations de contact
Une page Web peut normalement ê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>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
Élément HTML <article>
L' <article>élément spécifie un contenu indépendant et autonome.
Un article doit avoir un sens en lui-même et il doit être possible de le diffuser indépendamment du reste du site Web.
Exemples d' <article>utilisation de l'élément :
- Messages du forum
- Billets de blog
- Commentaires des utilisateurs
- Fiches produits
- Articles de journaux
Exemple
Trois articles au contenu indépendant et autonome :
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced 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>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
Imbriquer <article> dans <section> ou vice versa ?
L' <article>
élément spécifie un contenu indépendant et autonome.
L' <section>élément définit la section dans un document.
Pouvons-nous utiliser les définitions pour décider comment imbriquer ces éléments ? Non, nous ne pouvons pas!
Ainsi, vous trouverez des pages HTML avec <section>des éléments contenant des <article>éléments, et <article>des éléments contenant des <section>éléments.
Élément HTML <en-tête>
L' <header>élément représente un conteneur pour le contenu d'introduction ou un ensemble de liens de navigation.
Un <header>élément contient généralement :
- un ou plusieurs éléments d'en-tête (<h1> - <h6>)
- logo ou icône
- informations sur l'auteur
Remarque : Vous pouvez avoir plusieurs <header>éléments dans un document HTML. Cependant, <header>ne peut pas être placé dans un <footer>, <address>ou un autre <header>élément.
Exemple
Un en-tête pour un <article> :
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
Élément HTML <pied de page>
L' <footer>élément définit un pied de page pour un document ou une section.
Un <footer>élément contient généralement :
- informations sur l'auteur
- Informations sur le droit d'auteur
- Informations de contact
- plan du site
- retour en haut des liens
- documents connexes
Vous pouvez avoir plusieurs <footer>éléments dans un même document.
Exemple
Une section de pied de page dans un document :
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
Élément HTML <nav>
L' <nav>élément définit un ensemble de liens de navigation.
Notez que PAS tous les liens d'un document ne doivent être à l'intérieur d'un <nav>élément. L'
<nav>élément est destiné uniquement aux principaux blocs 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'il faut 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' <aside>élément définit un contenu en dehors du contenu dans lequel il est placé (comme une barre latérale).
Le <aside>contenu doit être indirectement lié au contenu environnant.
Exemple
Affichez du contenu en dehors du contenu dans lequel il est placé :
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</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>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
Éléments HTML <figure> et <figcaption>
La <figure>balise spécifie un contenu autonome, comme des illustrations, des diagrammes, des photos, des listes de codes, etc.
La <figcaption>balise définit une légende pour un <figure>élément. L' <figcaption>élément peut être placé comme premier ou comme dernier enfant d'un <figure>élément.
L' <img>élément définit l'image/l'illustration réelle.
Exemple
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Pourquoi les éléments sémantiques ?
Selon le W3C : "Un Web sémantique permet aux données d'être partagées et réutilisées entre les applications, les entreprises et les communautés."
Éléments sémantiques en HTML
Vous trouverez ci-dessous une liste de certains des éléments sémantiques en HTML.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .