Dernière mise à jour le 23 octobre 2022
Certains éléments sémantiques n'ont pas encore été vus jusqu'ici.
On entend par élément sémantique un élément qui décrit clairement le sens de son contenu.
Par exemple, tout le monde sait ce qu'est un titre (h1 à h6), un paragraphe (p) ou un tableau (table).
À l'opposé, des éléments comme div et span ne disent rien sur le sens de leur contenu. Ce ne sont que des conteneurs.
Les éléments que nous allons présenter ici ont été introduits avec HTML5 et sont la fondation d'une page Web moderne.
Jetons un coup d'oeil à la structure suivante :
| En-tête | ||
| Barre de navigation | ||
| Barre latérale | Section(s) | |
| Article(s) | ||
| Pied de page | ||
Il s'agit du genre de page Web que l'ont voit le plus souvent, avec comme éléments fondamentaux :
Avant HTML5, on construisait une telle structure en utilisait abondamment les div et les classes :
<style>
.header {
...
}
.footer {
...
}
.nav {
...
}
...
<body>
<div class="header">
...
</div>
<div class="nav">
...
Tout cela fonctionne bien, mais rien ne permet facilement et à tout coup d'identifier le rôle des principaux éléments de la page (on ne peut se fier aux noms de classes qui sont au choix du développeur).
Ce que HTML5 nous offre est une série d'éléments sont le sens ne peut prêter à confusion :
Toutes les pages Web utilisent (ou devraient utiliser) maintenant ces éléments.
Cet élément représente l'en-tête d'un document, d'une section ou d'un article.
Il doit être utilisé comme conteneur pour tout matériel d'introduction.
On peut retrouver plusieurs éléments header à l'intérieur d'un même document.
L'exemple suivant illustre l'en-tête d'un article :
<article>
<header>
<h1>Les pingouins attaquent</h1>
<p>Des événements troublants sur la banquise</p>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent convallis ut
ipsum vel consectetur. Morbi et malesuada augue. Donec vel est maximus, placerat
nulla quis, molestie diam...
</p>
</article>
Cet élément représente le pied de page d'un document, d'une section ou d'un article.
Il doit être utilisé comme conteneur pour toute information relative à son parent et qui ne figure pas dans l'en-tête.
On y retrouve typiquement le nom de l'auteur, des informations de copyright, des informations de contact, des liens, etc.
On peut retrouver plusieurs éléments footer à l'intérieur d'un même document.
L'exemple suivant illustre le pied de page d'un article :
<footer>
<p>
Toute ressemblance avec des personnes, sociétés, adresses électroniques ou URL
existantes ne serait que pure coïncidence.
</p>
<p>
Pour plus d'informations veuilles contacter <a href="mailto:kekun@kekpart.com">
kekun@kekpart.com</a>.
</p>
</footer>
Cet élément regroupe un ensemble d'hyperliens de navigation.
Tous les hyperliens d'une page n'ont pas à se retrouver nécessairement dans l'élément nav, mais seulement les plus importants.
<nav>
Choisissez votre destination :
<a href="">La Comté</a> |
<a href="">Isengard</a> |
<a href="">Ithilien</a> |
<a href="">Mordor</a>
</nav>
Cet élément représente une barre latérale placée à gauche ou à droite.
L'élément aside est généralement utilisé comme conteneur pour un menu, de la publicité, etc.
Notons que le fait d'insérer un élément aside dans le document ne le dispose pas automatiquement à gauche ou à droite du contenu principal.
Pour cela il est nécessaire d'utiliser certaines propriétés CSS que nous verrons bientôt.
Cet élément représente une section dans un document.
Une section est considérée comme un regroupement d'informations sur un sujet donné, incluant typiquement un en-tête (élément header).
Une page d'accueil peut par exemple être découpées en sections : une pour l'introduction, une pour le contenu, une pour les informations de contact, etc.
Cet élément représente un contenu indépendant du reste du document.
Il devrait être possible de lire un article indépendamment du reste de la page ou du site Web.
Exemples d'utilisation de l'élément article :
Maintenant il est légitime de se poser les questions suivantes :
La réponse aux deux questions est OUI.
On retrouve même des sections dans des sections (des "sous-sections") et des articles dans des articles.
L'important est de bien réfléchir avant de choisir la structure du document et d'être cohérent ensuite.
Terminons cette présentation par deux nouveau éléments.
Le but d'un figcaption est d'ajouter des explications à une image, ce qu'on appelle généralement la légende.
L'élément figure, lui, permet de regrouper l'image et la légende au sein d'un même élément.
Exemple :
<figure>
<img src="images/troll.jpg" alt="Un troll">
<figcaption>Fig.8 - Troll des cavernes</figcaption>
</figure>
Sortie :
