Explore the Concept of Semantic HTML
Dans cette étape, vous allez apprendre ce qu'est le HTML sémantique et pourquoi il est important dans le développement web. Le HTML sémantique utilise des balises qui décrivent clairement le sens du contenu, rendant les pages web plus accessibles, plus lisibles et plus conviviales pour les moteurs de recherche (SEO).
Les balises HTML traditionnelles telles que <div>
et <span>
ne fournissent aucune information sur le contenu qu'elles contiennent. En revanche, les balises HTML sémantiques décrivent le but et la structure du contenu.
Créons un simple fichier HTML pour illustrer les concepts du HTML sémantique. Ouvrez le WebIDE et créez un nouveau fichier appelé semantic-example.html
dans le répertoire ~/project
.
touch ~/project/semantic-example.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Semantic HTML Example</title>
</head>
<body>
<div>Website Header</div>
<div>Navigation Menu</div>
<div>Main Content</div>
<div>Sidebar</div>
<div>Footer</div>
</body>
</html>
Maintenant, transformons cet exemple en utilisant des balises HTML sémantiques :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Semantic HTML Example</title>
</head>
<body>
<header>Website Header</header>
<nav>Navigation Menu</nav>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</body>
</html>
Les principales balises HTML sémantiques incluent :
<header>
: Représente le contenu d'introduction
<nav>
: Définit les liens de navigation
<main>
: Spécifie le contenu principal du document
<article>
: Représente un élément de contenu indépendant et autonome
<section>
: Définit une section dans un document
<aside>
: Contient du contenu indirectement lié au contenu principal
<footer>
: Représente le pied de page d'un document
Avantages du HTML sémantique :
- Amélioration de l'accessibilité pour les lecteurs d'écran
- Meilleure optimisation pour les moteurs de recherche (SEO)
- Code plus significatif et plus lisible
- Stylage et maintenance plus faciles
Lorsque vous prévisualisez le fichier HTML dans un navigateur, il n'y aura aucun changement visuel, mais la structure sous-jacente sera plus descriptive et plus significative.
Notes : En savoir plus sur How to preview HTML files in the WebIDE.