Les éléments sémantiques HTML5
Les éléments sémantiques sont une des innovations significatives en HTML5. Avant leur apparition, toutes les balises des pages Web étaient créées à l'aide des éléments <div>, auxquels étaient attribués des identificateurs (id) ou des classes (class). Pour placer des panneaux latéraux, des en-têtes, des pieds de page, des éléments de navigation et d'autres blocs de construction, des blocs div avec les valeurs appropriées (par exemple, div = "footer") ont été utilisés.
HTML5 introduit de nouveaux éléments sémantiques pour la structuration, le regroupement du contenu et le balisage du contenu du texte. Ils décrivent clairement quel contenu ils ont (il y avait <div id = "footer">, devenu <footer>).
Considérons plus en détail les éléments sémantiques et leurs valeurs.
Élément <header>
L’élément <header> forme le bloc d’en-tête ou le “chapeau” du document. Il est utilisé en tant qu’un conteneur pour regrouper les éléments de saisie et de navigation (logo, menu de navigation, formulaire de recherche, etc.).
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul style="padding:0;">
<li>Accueil</li>
<li>À propos</li>
</ul>
</nav>
<h1>Bienvenue sur notre page</h1>
<hr>
</header>
<article>
<header>
<h2>Titre du document</h2>
<p>Le contenu du paragraphe.</p>
</header>
</article>
</body>
</html>Résultat
Élément <nav>
L’élément <nav> forme le bloc principal des liens de navigation. Notez que ce ne sont pas tous les liens du document HTML, qui peuvent être placés dans l’élément <nav>, il ne peut inclure que de gros blocs de navigation.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<header>
<h1>Courses de programmation</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>Bienvenue à W3Docs!</h2>
</body>
</html>
</body>
</html>Résultat
Élément <article>
L’élément <article> définit un bloc indépendant, dans lequel les enregistrements sont regroupés (articles, publications des blogs, commentaires, etc.).Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<article>
<h1>Titre de l'article</h1>
<p>Texte de l'article</p>
</article>
</body>
</html>Résultat
Élément <section>
L’élément <section> est utilisé pour regrouper le contenu thématique (table des matières, programme, sections etc.).
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Utilisation de la balise section</title>
</head>
<body>
<section>
<h1>Langage de balisage hypertexte HTML</h1>
<p>Le langage de balisage standardisé pour les documents sur le World Wide Web. Le langage HTML est interprété par les navigateurs. Reçu à la suite d'une interprétation, le texte formaté est affiché sur l'écran d'un écran d'ordinateur ou d'un appareil mobile.</p>
</section>
<section>
<h1>CSS</h1>
<p>Un langage formel utilisé pour décrire, façonner l'apparence des pages Web écrites à l'aide des langages de balisage HTML et XHTML, mais peut également s'appliquer à tous les documents XML, par exemple, à SVG ou XUL.</p>
</section>
</body>
</html>Résultat
Élément <aside>
L’élément <aside> définit une section contenant des informations complémentaires au département principal. Cette information est facultative et si vous la supprimez, le contenu principal ne sera pas affecté. Ces informations peuvent être des commentaires, des informations de référence, des listes de termes, une collection de liens etc.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<p>J'aime regarder Game of Thrones.</p>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones est une série télévisée dramatique américaine créée par David Benioff et D. B. Weiss. C’est une adaptation de A Song of Ice and Fire, série de romans fantastiques de George R. R. Martin</p>
</aside>
</body>
</html>Résultat
Élément <footer>
L'élément <footer> forme le pied de la section ou de l'élément racine dans lequel il se trouve. En règle générale, il contient des informations sur les droits d'auteur, les coordonnées, les liens de navigation, etc.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du 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>Contenu principal</h1>
<p>C'est un paragraphe. </p>
</div>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>Résultat
Élément <address>
L’élément <address> définit coordonnées de l’auteur/propriétaire du document ou de l’article.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<address>
Auteur: Equipe W3docs <br />
<a href="mailto:[email protected]">Envoyer un mail à l'auteur</a>
</address>
</body>
</html>Résultat
Élément <main>
L’élément <main> forme le contenu principal du document (le contenu de l’élément <body>). Le contenu de la balise doit être unique et ne pas dupliquer les mêmes blocs que ceux répétés dans d'autres documents, tels que l'en-tête du site, le pied de page, le menu, le formulaire de recherche, les informations de copyright, etc.
Exemple
<!DOCTYPE html>
<html>
<body>
<main>
<h1>Les langages de programmations</h1>
<p>Les langages HTML et CSS son conçu pour la mise en page du site.</p>
<article>
<h2>HTML</h2>
<p>HTML (Hyper Text Markup Language) – langage de la balisage hypertexte, utilisé pour créer des pages Web.</p>
</article>
<article>
<h2>CSS</h2>
<p>CSS est un langage des styles, qui définit l’affichage des documents HTML.</p>
</article>
</main>
</body>
</html>Résultat
Élément <figure>
L'élément <figure> définit un contenu autonome, qui est un élément indépendant du flux principal. Utilisé pour ajouter de courtes annotations aux illustrations, photos, diagrammes, extraits de code, etc.
Exemple
<!DOCTYPE html>
<html>
<body>
<p>Un bon enfant</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200">
</figure>
</body>
</html>Résultat
Élément <figcaption>
L’élément <figcaption> est utilisé pour ajouter une légende ou des explications au contenu de la balise <figure>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<p>Image d'un enfant</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>Résultat
Élément <time>
L'élément <time> détermine l'heure (24 heures) ou la date sur le calendrier grégorien avec indication possible de l'heure et du décalage du fuseau horaire.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre de la fenêtre de page Web </title>
</head>
<body>
<p>Le jeu sera <time datetime="2014-09-28 19:00">28ème septembre</time>.</p>
<p>Commence à <time>19:00</time></p>
</body>
</html>Résultat
Élément <mark>
L’élément <mark>est utilisé pour mettre en évidence le contenu important ou les mots-clés. Il est par défaut en jaune.
Exemple
<!DOCTYPE html>
<html>
<body>
<p>Apprenez le langage de balisage hypertexte HTML sur le site <mark>W3Docs.com</mark>.</p>
</body>
</html>Résultat
Élément <bdi>
L’élément <bdi> définit une partie du texte de formulation bidirectionnelle, qui doit être isolé du reste du texte.
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>Exemple d’utilisation de l’élément bdi</h1>
<p dir="ltr"><bdi>أرمينيا جميلة</bdi> Cette phrase en arabe est automatiquement affichée de droite à gauche.</p>
</body>
</html>Résultat
Élément <wbr>
L'élément <wbr> indique au navigateur l'emplacement d'une éventuelle rupture d'une longue chaîne si nécessaire.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<p>Exemple d'une longue chaîne de texte sans wbr.</p>
<p>C'est le mot le plus long que vous puissiez rencontrer en anglais pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Exemple d'une longue chaîne de texte avec wbr.</p>
<p>C’est le mot le plus long que l’on puisse rencontrer dans la langue anglaise pneumono <wbr> ultra <wbr> micro <wbr> scopique <wbr> silico <wbr> volcan <wbr> coniose</p>
</p>
</body>
</html>Résultat
Pratiquez vos connaissances
