Éléments sémantiques en HTML5
Les éléments sémantiques sont l’une des introductions les plus importantes de 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 utilisé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 rendent le balisage plus facile à comprendre pour les moteurs de recherche.
Examinons les éléments sémantiques et leur signification.
L’élément <header>
L’élément <header> définit un en-tête pour le document ou une 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 dans le document actuel, 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 contenir que les principaux blocs de navigation. 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 web.
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 un 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>L’élément <aside>
L’élément <aside> définit une section contenant des informations supplémentaires liées au contenu autour de l’élément <aside>. Il est généralement utilisé pour enrichir un article avec des informations supplémentaires, ou pour mettre en évidence les 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 de 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-content {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<div class="header">Header / Menu</div>
<div class="main-content">
<h1>Main content</h1>
<p>This is some paragraph. </p>
</div>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>L’élément <address>
L’élément <address> est utilisé pour fournir les coordonnées de l’auteur ou du propriétaire d’un article, d’un document ou du site web.
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>Démo : Envoyer un e-mail à l’auteur
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, comme l’en-tête d’un 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 inclure 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="https://fr.w3docs.com/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="https://fr.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
<figcaption>Fig.1 – Cute baby</figcaption>
</figure>
</body>
</html>L’élément <time>
L’élément <time> définit une heure lisible par l’humain 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 est pertinente. Il peut servir à mettre en évidence un texte pour attirer l’attention, à surligner des termes de recherche dans les résultats afin de fournir du contexte, ou à 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ù une coupure de ligne peut être ajoutée dans le texte. Contrairement à la balise <br>, qui oblige le navigateur à insérer une coupure de ligne, dans le cas de <wbr>, le navigateur analyse d’abord son contenu, puis insère une coupure de ligne si nécessaire (mot ou adresse URL trop longs).
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>Practice
Quel est le principal objectif de l’utilisation des éléments sémantiques en HTML5 ?