Avant l’introduction du HTML sémantique, les développeurs utilisaient des divs pour organiser le contenu. Les éléments div n’ont aucune signification en soi. Ils permettent uniquement d’appliquer des styles et d’organiser le contenu.
Le mot sémantique signifie qui a trait à la signification. Les éléments HTML sémantiques décrivent l’objectif de leur contenu. Ils donnent une signification au développeur, à l’utilisateur, aux moteurs de recherche et aux technologies d’assistance. Voici une liste de balises HTML sémantiques populaires que vous pouvez utiliser dans votre prochain projet.
Que sont les divs ?
En HTML, l’élément div (division) est un conteneur au niveau du bloc. Il permet de regrouper ou de diviser les éléments HTML en sections sur une page web. La syntaxe est la suivante :
<div>
</div>
Avantages de l’utilisation d’éléments HTML sémantiques plutôt que de divs
HTML5 a introduit des éléments HTML sémantiques pour faciliter la lecture du code. Les éléments sémantiques donnent un sens et une structure au contenu web.
Ils rendent votre code compréhensible pour les autres développeurs. Ils permettent également aux moteurs de recherche de trouver plus facilement votre contenu et de diriger le trafic vers votre site. Voici quelques éléments sémantiques que vous pouvez utiliser dans vos projets HTML et CSS.
1. <header> ;
Le <header> ; définit la section d’en-tête d’un document. Elle contient généralement le logo du site, la navigation et le titre de la page. C’est la section qui apparaît en haut d’une page web. Vous pouvez personnaliser l’en-tête en fonction de vos besoins. La syntaxe est la suivante :
<body>
<header>
<h1> Hi There!</h1>
<p>I am a header</p>
</header>
</body>
2. <nav> ;
Le <nav> ; contient les liens de navigation du site web. Il peut s’agir de menus, de tables des matières ou d’index. Elle est généralement placée dans la balise <header> ; . La syntaxe est la suivante :
<header>
<nav>
<ul>
<li>My website links</li>
<li><a href="#"> Home</a> </li>
<li ><a href="#"> About Us </a></li>
</ul>
</nav>
<h1>The above is navigation part of my website.</h1>
</header>
Sur le navigateur, elle se présente comme suit :
Vous pouvez utiliser des modèles de mise en page CSS tels que CSS flexbox pour aligner les éléments <nav> ; sur votre page web.
3. <main> ;
Le <main> ; contient le contenu principal de la page web. Elle sépare le contenu de l’en-tête, de la barre latérale et du pied de page. La balise main représente le contenu dominant de la page web. <body> ; section.
<body>
<header>
<title> Website facts </title>
</header>
<main>
<p> This website is a short demonstration of how the main tag works.</p>
<p> It encloses the part of the website with useful content.</p>
</main>
<footer>
<h3> This is a footer </h3>
</footer>
</body>
Elle se présente comme suit :
4. <article> ;
Utiliser le <article> ; pour définir des sections autonomes dans un document ou un site web. Par exemple, vous pouvez les utiliser pour structurer des articles de blog, des magazines ou des fiches produits. La balise <article> ; peut contenir d’autres éléments, y compris d’autres articles, des sections et des titres. Les éléments inclus doivent être en rapport avec le sujet de l’article.
<article>
<h1>Stranger Than Fiction</h1>
<article>
<h3>Introduction</h3>
<p>The events and persons naratted in this book are fictitious.</p>
</article>
<article>
<h3>Chapter One</h3>
<p> The day was bright and the sun smiled from the sky</p>
</article>
</article>
Cela se présente ainsi :
5. <aside> ;
Le <aside> ; contient le contenu lié au contenu principal. Utilisez cette balise pour créer des barres latérales pour les citations, les commentaires ou les mentions spéciales. <aside> ; met en évidence une information qui pourrait échapper au lecteur. Elle se démarque du reste du contenu.
<!DOCTYPE html>
<html>
<style>
body{
background-color:#abdbe3;
}
aside {
width: 30%;
padding-left: 0.5rem;
margin-left: 1rem;
flex:left;
box-shadow: inset 5px 0 5px -5px green;
font-style: italic;
color: red;
}
aside > p {
margin: 0.5rem;
</style>
<body>
<main>
<h1> Weaver Birds</h1>
<p>Ploceidae is a family of small passerine birds. Many of which are called weavers, weaverbirds, weaver finches and bishops.</p>
<aside>
<p>Kingdom: Animalia
Phylum: Chordata</p>
</aside>
<p>In most recent classifications, Ploceidae is a clade, excludes some birds that have historically been placed in the family.Some of the sparrows, but includes the monotypic subfamily Amblyospizinae.</p>
</main>
</body>
</html>
6. <section> ;
Le <section> ; contient une partie de la page sans élément sémantique spécifique. Les sections peuvent avoir un titre pour présenter le contenu et contenir d’autres éléments HTML. <section> ; représente les composants d’une page web comme les chapitres d’un livre ou d’un blog.
<!DOCTYPE html>
<html>
<body>
<h1>The Bible</h1>
<section>
<h2>Introduction</h2>
<p>The Bible is a collection of religious scriptures sacred in Christianity, Judaism, Samaritanism. The Bible is an anthology – a compilation of texts of a variety of forms – originally written in Hebrew, Aramaic, and Koine Greek.</p>
</section>
<section>
<h2>Chapter one:Genesis</h2>
<p>The Book of Genesis is the first book of the Hebrew Bible and the Christian Old Testament. Its Hebrew name is the same as its first word, Bereshit. Genesis is an account of the creation of the world, the early history of humanity, and of Israel's ancestors and the origins of the Jewish people</p>
</section>
</body>
</html>
Il semble que ce soit le cas :
7. <figure> ;
Le <figure> ; élément contient des illustrations autonomes telles que des images ou des diagrammes. Ces illustrations font référence au contenu de la page principale. Les figures sont accompagnées de légendes spécifiées par l’option <figcaption> ; élément. L’élément <figcaption> ; explique le sens de l’image. L’image <figure> ;, <figcaption> ;, et le contenu représentent une seule unité.
<!DOCTYPE html>
<html>
<body>
<main>
<section>
<h1>Parts of a Computer</h1>
<p> There are several parts that work together to make up a computer</p>
<figure>
<img src="some-url.jpg" alt="computer mouse">
<figcaption>This is a computer mouse</figcaption>
</figure>
</section>
</main>
</body>
</html>
Vous pouvez aller plus loin et apprendre à créer des images réactives en HTML.
8. <footer> ;
Le <footer> ; L’élément HTML contient des informations dans la partie inférieure de la page web. Il est l’opposé de l’élément <header> ; élément. L’élément <footer> ; peut contenir des informations sur le propriétaire de la page. Il peut s’agir de données sur les droits d’auteur ou de liens vers des informations complémentaires sur le site.
<!DOCTYPE html>
<html>
<body>
<main>
<section>
<h1>Parts of a Computer</h1>
<figure>
<img src="some-url.jpg" alt="computer mouse">
<figcaption>This is a computer mouse</figcaption>
</figure>
</section>
</main>
<footer>
<p> Manufactured by ComputerTech © 2023</p>
</footer>
</body>
</html>
Le code ci-dessus ajoute un pied de page à la page Parties d’un ordinateur comme le montre l’image suivante.
Pourquoi utiliser des éléments HTML sémantiques ?
L’utilisation d’éléments HTML sémantiques donne un contexte au code. Toute personne regardant le code peut facilement le comprendre. Les balises facilitent le style des éléments et la collaboration sur les projets.
Vous pouvez utiliser le HTML sémantique avec des bibliothèques frontales et des frameworks. La plupart des navigateurs modernes préfèrent les éléments HTML sémantiques aux éléments traditionnels. Commencez à utiliser le HTML sémantique et observez votre code paraître moderne, lisible et présentable.
