Les éléments sémantiques en HTML5
Les éléments sémantiques définissent clairement leur rôle sur la page, facilitant la compréhension du balisage pour les navigateurs et les développeurs.
Les éléments sémantiques constituent l'une des innovations les plus importantes apportées par HTML5. Dans les versions précédentes de HTML, la balise générique <div> avec un attribut id ou class était utilisée pour structurer une page web. Par exemple, pour définir des barres latérales, des pieds de page, des menus ou d'autres blocs structurels, la balise <div> était employée avec la signification correspondante (div class="footer").
Les éléments sémantiques en HTML ont une signification intrinsèque et transmettent cette signification à la fois au navigateur et au développeur. Ils définissent clairement le type de contenu qu'ils contiennent (par exemple, la balise <footer> est utilisée à la place de <div id="footer">). Ils contribuent également à améliorer l'accessibilité et facilitent la compréhension du balisage par les moteurs de recherche.
Cette page couvre les éléments sémantiques structurels (mise en page) que vous utiliserez pour construire le squelette de presque chaque page web — <header>, <nav>, <main>, <article>, <section>, <aside> et <footer> — ainsi que quelques balises sémantiques au niveau du contenu. Elle montre également comment ces éléments correspondent aux points de repère ARIA, ce qui constitue la vraie raison pour laquelle ils sont importants pour l'accessibilité.
Découvrons les éléments sémantiques et leur signification.
Une mise en page sémantique complète
Avant d'examiner chaque élément individuellement, il est utile de voir comment ils s'articulent ensemble. Les éléments structurels s'imbriquent de manière prévisible : un <header> et un <footer> encadrent la page, un seul <main> contient le contenu principal, et à l'intérieur un <article> peut côtoyer un <aside> connexe. La navigation se trouve dans <nav>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic page layout</title>
</head>
<body>
<header>
<h1>The Daily Markup</h1>
<nav>
<a href="/">Home</a> |
<a href="/articles">Articles</a> |
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Why semantic HTML matters</h2>
<p>Semantic elements describe the role of the content they wrap,
which helps browsers, search engines and assistive technology.</p>
</article>
<aside>
<h2>Related reading</h2>
<ul>
<li><a href="/articles/headings">Heading structure</a></li>
<li><a href="/articles/landmarks">ARIA landmarks</a></li>
</ul>
</aside>
</main>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>La suite de cette page explique chaque élément individuellement.
Les éléments sémantiques et les points de repère ARIA
Le principal avantage pratique des éléments sémantiques structurels est l'accessibilité. Les utilisateurs de lecteurs d'écran ne parcourent pas une page du haut vers le bas — ils naviguent entre les points de repère. De nombreux éléments structurels exposent automatiquement un rôle de point de repère ARIA implicite, ce qui vous permet d'en bénéficier gratuitement simplement en utilisant la bonne balise (aucun attribut role n'est nécessaire) :
| Élément | Rôle de point de repère implicite | Notes |
|---|---|---|
<header> (enfant direct de <body>) | banner | En-tête global du site. Un <header> à l'intérieur de <article>/<section> n'est pas un point de repère. |
<nav> | navigation | Étiquetez plusieurs éléments nav avec aria-label pour les distinguer. |
<main> | main | N'utilisez qu'un seul par page. |
<aside> | complementary | Contenu lié au contenu principal, mais pouvant en être séparé. |
<footer> (enfant direct de <body>) | contentinfo | Pied de page global du site (copyright, contact, etc.). |
C'est pourquoi remplacer <div class="header"> par <header> ne représente pas seulement un balisage plus soigné — cela rend la page navigable pour les personnes utilisant des technologies d'assistance.
L'élément <header>
L'élément <header> définit un en-tête pour le document ou la section. Il contient généralement un logo, une barre de recherche, des liens de navigation, etc.
Exemple de l'élément HTML <header>
Exemple de l'en-tête HTML de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul style="padding:0;">
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr />
</header>
<article>
<header>
<h2>Title of the document</h2>
<p>The content of the paragraph.</p>
</header>
</article>
</body>
</html>L'élément <nav>
L'élément <nav> définit un bloc de liens de navigation, soit à l'intérieur du document courant, soit vers d'autres documents. Notez que tous les liens du document HTML ne peuvent pas être placés à l'intérieur de l'élément <nav> ; il ne peut inclure que les blocs de navigation principaux. Par exemple, la balise <nav> peut aussi être placée dans la balise <footer> pour définir des liens dans le pied de page du site.
Exemple de l'élément HTML <nav>
Exemple de l'élément nav de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<header>
<h1>Programming Courses</h1>
</header>
<nav>
<a href="/learn-html.html">HTML</a> | <a href="/learn-css.html">CSS</a> | <a href="/learn-javascript.html">JavaScript</a> | <a href="/learn-php.html">PHP</a> |
</nav>
<h2>Welcome to W3Docs!</h2>
</body>
</html>L'élément <article>
L'élément <article> est utilisé pour spécifier un contenu indépendant et autonome (articles, billets de blog, commentaires, etc.). Le contenu de l'élément a sa propre signification et se distingue facilement du reste du contenu de la page web.
Exemple de l'élément HTML <article>
Exemple de l'élément article de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>Title of the article</h1>
<p>Text of the article</p>
</article>
</body>
</html>L'élément <section>
L'élément <section> est utilisé pour regrouper des sections autonomes au sein d'une page web contenant du contenu logiquement lié (bloc d'actualités, informations de contact, etc.).
Exemple de l'élément HTML <section>
Exemple de l'élément section de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Using the section tag</title>
</head>
<body>
<section>
<h1>Hypertext markup language HTML</h1>
<p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
</section>
<section>
<h1>CSS</h1>
<p>A formal language that is used as a description zone, formatting the appearance of a web page written with the help of markup languages HTML and XHTML but it can be applied to any XML-document, for example, to SVG or XUL.</p>
</section>
</body>
</html><section> vs <article>
Ces deux éléments sont faciles à confondre. Une règle simple :
- Utilisez
<article>lorsque le contenu est autonome et distribuable indépendamment — il aurait encore du sens par lui-même, hors contexte (un billet de blog, une actualité, une fiche produit, un commentaire d'utilisateur). Si vous pouvez imaginer qu'il soit syndiqué dans un flux RSS, c'est un<article>. - Utilisez
<section>pour un regroupement thématique de contenu connexe qui fait partie d'un ensemble plus grand et n'a pas de sens de manière autonome. Un<section>doit presque toujours commencer par un titre (<h2>–<h6>) qui nomme le groupe.
Lorsqu'aucun des deux ne s'applique — vous avez seulement besoin d'un conteneur de mise en forme ou de présentation sans signification sémantique — optez pour un simple <div>.
L'élément <aside>
L'élément <aside> définit une section contenant des informations supplémentaires liées au contenu situé autour de l'élément <aside>. Il est généralement utilisé pour enrichir un article avec des informations complémentaires ou pour mettre en évidence des parties susceptibles d'intéresser l'utilisateur.
Exemple de l'élément HTML <aside>
Exemple de l'élément aside de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>I like watching Game of Thrones.</p>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>L'élément <footer>
L'élément <footer> définit le pied de page d'une page web ou d'une section. En règle générale, il contient des informations sur le copyright, des coordonnées, des liens de navigation, etc.
Exemple de l'élément HTML <footer>
Exemple de l'élément footer de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
header {
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
main {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<header>Header / Menu</header>
<main>
<h1>Main content</h1>
<p>This is some paragraph. </p>
</main>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>L'élément <address>
L'élément <address> fournit des informations de contact pour l'ancêtre <article> le plus proche, ou pour l'ensemble du document lorsqu'il est un enfant de <body>. Il est destiné aux coordonnées (l'auteur ou le propriétaire de l'article ou du site) — et non aux adresses postales arbitraires qui font simplement partie du contenu.
Exemple de l'élément HTML <address>
Exemple de l'élément address de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Author: W3docs Team<br />
<a href="mailto:[email protected]">Send Mail to the Author</a>
</address>
</body>
</html>Demo: Send Mail to the Author
L'élément <main>
L'élément <main> définit le contenu principal de la page. Le contenu de la balise <main> doit être unique et ne pas dupliquer des blocs du même type répétés dans d'autres documents, tels que l'en-tête du site, le pied de page, le menu, la recherche, les informations de copyright, etc.
Exemple de l'élément HTML <main>
Exemple de l'élément main de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<h1>Programming languages</h1>
<p>Languages HTML and CSS are intended for site layout.</p>
<article>
<h2>HTML</h2>
<p> HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages. </p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>CSS</h2>
<p>CSS is a language of styles, defining the display of HTML documents. </p>
<p>... </p>
</article>
</main>
</body>
</html>L'élément <figure>
L'élément <figure> est utilisé pour indiquer un contenu autonome. La balise peut contenir des images, des diagrammes, des illustrations, des exemples de code, etc.
Exemple de l'élément HTML <figure>
Exemple de l'élément figure de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A cute baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
</figure>
</body>
</html>L'élément <figcaption>
L'élément <figcaption> est utilisé pour ajouter une légende ou une annotation à la balise <figure>.
Exemple de l'élément HTML <figcaption>
Exemple de l'élément figcaption de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Image of a baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
<figcaption>Fig.1 – Cute baby</figcaption>
</figure>
</body>
</html>Les éléments sémantiques au niveau du contenu
Les éléments ci-dessus décrivent la structure d'une page. Les balises suivantes ajoutent du sens au niveau du texte — elles balisent de petits morceaux de contenu à l'intérieur d'un paragraphe plutôt que de définir la mise en page. Ce ne sont pas des points de repère et ils n'affectent pas la structure de la page.
L'élément <time>
L'élément <time> définit une heure lisible par l'homme sur une horloge de 24 heures ou une date précise dans le calendrier grégorien.
Exemple de l'élément HTML <time>
Exemple de l'élément time de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The game will be held on<time datetime="2018-09-28 19:00">September 28</time>.</p>
<p>It will start at <time>19:00</time></p>
</body>
</html>L'élément <mark>
L'élément <mark> est utilisé pour marquer une partie du texte qui présente une pertinence. Il peut être utilisé pour mettre en évidence du texte afin de montrer une emphase, pour surligner des termes de recherche dans les résultats afin de fournir un contexte, ou pour distinguer un nouveau contenu ajouté par l'utilisateur en l'affichant différemment.
Exemple de l'élément HTML <mark>
Exemple de l'élément mark de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>L'élément <bdi>
L'élément <bdi> est utilisé pour isoler du texte bidirectionnel lorsqu'une langue s'écrivant de droite à gauche, comme l'arabe ou l'hébreu, est utilisée en ligne avec des langues s'écrivant de gauche à droite.
Exemple de l'élément HTML <bdi>
Exemple de l'élément bdi de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1> Example of using the bdi element </h1>
<p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
</body>
</html>L'élément <wbr>
La balise <wbr> est utilisée pour indiquer au navigateur où un saut de ligne pourrait être ajouté dans le texte. Contrairement à la balise <br> qui oblige le navigateur à insérer un saut de ligne, dans le cas de <wbr> le navigateur analyse d'abord son contenu, puis insère un saut de ligne si nécessaire (mot trop long ou adresse URL).
Exemple de l'élément HTML <wbr>
Exemple de l'élément wbr de la page|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>