Balises sémantiques : <section>, <article>, <aside>, <figure>
En HTML, les balises sémantiques permettent de structurer le contenu d'une page de manière plus significative en indiquant la fonction et le rôle des différentes parties du contenu. Elles jouent un rôle essentiel dans l'amélioration de l'accessibilité, de la lisibilité et du référencement des pages web. Dans cette section, nous allons explorer les balises <section>, <article>, <aside> et <figure>.
Balise <section>
La balise <section> est utilisée pour regrouper un contenu thématiquement lié. Elle permet de découper le contenu de la page en sections distinctes et facilite la compréhension de la structure globale de la page. Voici un exemple d'utilisation de la balise <section> :
<section>
<h2>Titre de la section</h2>
<p>Contenu de la section...</p>
</section>La balise <section> doit être utilisée lorsque le contenu à l'intérieur a une signification sémantique indépendante des autres parties de la page.
Balise <article>
La balise <article> est utilisée pour représenter un contenu autonome et indépendant qui peut être distribué ou réutilisé individuellement. Elle est idéale pour les articles de blog, les publications, les commentaires ou tout autre contenu autonome. Voici un exemple d'utilisation de la balise <article> :
<article>
<h2>Titre de l'article</h2>
<p>Contenu de l'article...</p>
</article>La balise <article> permet de créer une structure claire et de donner du sens à un contenu autonome dans le contexte global de la page.
Balise <aside>
La balise <aside> est utilisée pour représenter un contenu accessoire ou complémentaire par rapport au contenu principal de la page. Elle peut contenir des informations annexes, des publicités, des citations, des éléments de navigation ou tout autre contenu secondaire. Voici un exemple d'utilisation de la balise <aside> :
<aside>
<h3>À propos de l'auteur</h3>
<p>Informations sur l'auteur...</p>
</aside>La balise <aside> permet de distinguer le contenu principal du contenu complémentaire et d'améliorer la structure de la page.
Balise <figure>
La balise <figure> est utilisée pour représenter du contenu indépendant, souvent accompagné d'une légende. Elle est couramment utilisée pour afficher des images, des graphiques, des illustrations ou tout autre média autonome. Voici un exemple d'utilisation de la balise <figure> :
<figure>
<img src="image.jpg" alt="Description de l'image" />
<figcaption>Légende de l'image</figcaption>
</figure>La balise <figure> permet d'associer un contenu visuel à sa légende de manière sémantique.
Exemple complet
Bien sûr ! Voici un exemple complet d'une page web structurée sémantiquement en HTML uniquement :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page Web Structurée Sémantiquement</title>
</head>
<body>
<header>
<h1>Titre de la Page</h1>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
</header>
<main>
<section id="section1">
<h2>Section 1</h2>
<p>Contenu de la section 1...</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<article>
<h3>Titre de l'article</h3>
<p>Contenu de l'article...</p>
</article>
</section>
<section id="section3">
<h2>Section 3</h2>
<figure>
<img src="image.jpg" alt="Description de l'image" />
<figcaption>Légende de l'image</figcaption>
</figure>
<aside>
<h3>À propos de l'auteur</h3>
<p>Informations sur l'auteur...</p>
</aside>
</section>
</main>
<footer>
<p>© 2023 Nom de l'entreprise. Tous droits réservés.</p>
</footer>
</body>
</html>Dans cet exemple, la page web est structurée de manière sémantique en utilisant les balises <header>, <nav>, <main>, <section>, <article>, <aside>, <figure>, et <footer>. Chaque section est identifiée avec un attribut id pour faciliter la navigation interne.
Le contenu principal est placé à l'intérieur de la balise <main>, avec des sections thématiquement liées regroupées dans des balises <section>. Un article autonome est placé dans la deuxième section avec la balise <article>, et une image avec une légende est insérée à l'intérieur de la balise <figure>. Des informations complémentaires sont incluses dans la balise <aside>.
En utilisant ces balises sémantiques de manière appropriée, la structure du contenu est clairement définie, ce qui facilite la compréhension et l'interprétation du contenu par les utilisateurs et les moteurs de recherche.
N'oubliez pas d'ajuster les titres, les liens, le contenu et les attributs en fonction de vos besoins spécifiques pour créer une page web sémantiquement structurée.
Conclusion
Les balises sémantiques <section>, <article>, <aside> et <figure> jouent un rôle essentiel dans la structuration et la sémantique du contenu d'une page web. En utilisant ces balises de manière appropriée, vous pouvez améliorer l'accessibilité, la lisibilité et la compréhension du contenu par les utilisateurs et les moteurs de recherche.
La balise <section> permet de regrouper un contenu thématiquement lié, la balise <article> représente un contenu autonome, la balise <aside> représente un contenu complémentaire et la balise <figure> représente un contenu visuel avec une légende. En utilisant ces balises de manière cohérente et réfléchie, vous pouvez créer des pages web bien structurées et optimisées sur le plan sémantique.