Balises sémantiques
Fait partie de la section Fundamentals du Journey HTML de Coddy — leçon 27 sur 60.
Les balises sémantiques en HTML aident à définir le sens du contenu, rendant le code plus clair tant pour les développeurs que pour les navigateurs. Contrairement aux <div> et <span>, elles donnent du contexte au contenu inclus.
Balises sémantiques courantes :
<header>– Contenu introductif, généralement en haut.<nav>– Contient des liens de navigation.
<main>– Contenu principal de la page.<article>– Un élément autonome comme un article de blog.
<section>– Regroupe du contenu lié, souvent avec un en-tête.<footer>– Section de bas de page avec des informations telles que les droits d'auteur ou les coordonnées.
<header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Titre de l'article</h2>
<p>Le contenu de l'article va ici.</p>
</article>
</main>
<footer>
<p>Copyright 2023</p>
</footer>Cette structure offre une mise en page claire et significative pour le contenu.
Défi
FacileConstruisez une page de critiques de films en utilisant le HTML sémantique. Elle doit inclure :
1. Un <header> avec :
<h1>"Movie Reviews"<nav>avec des liens : "Home", "Reviews", “Top Picks”
2. Un <main> avec :
<article>pour une critique qui contient :<h2>avec le nom du film<p>avec une courte critique
3. Un <footer> avec :
<p>"Copyright 2023 Movie Reviews"
Aide-mémoire
Les balises sémantiques en HTML aident à définir le sens du contenu, rendant le code plus clair tant pour les développeurs que pour les navigateurs. Contrairement à <div> et <span>, elles donnent du contexte au contenu inclus.
Balises sémantiques courantes :
<header>– Contenu introductif, généralement en haut.<nav>– Contient des liens de navigation.<main>– Contenu principal de la page.<article>– Un élément autonome comme un article de blog.<section>– Regroupe du contenu connexe, souvent avec un titre.<footer>– Section du bas avec des informations comme le copyright ou les coordonnées.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>Copyright 2023</p>
</footer>Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez le code ici -->
</body>
</html>
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Fundamentals
1Les bases du HTML
Qu'est-ce que le HTML ?Structure de base du HTMLBalises et élémentsImbrication et fermeture des balisesCommentaires en HTML7Page de profil personnel
Présentation du projetSection d'en-tête
Photo de profilSection À propos de moiLiens sociaux2Texte et mise en forme
TitresParagraphesSauts de ligneTexte en gras et italiqueGras et italique (suite)Récapitulatif - Mise en forme8Formulaires et champs de saisie, partie 1
Bases des formulairesChamps de texteAttributs des champsChamp de mot de passeLibellés pour les champsRécapitulatif - Formulaire de base11Page d'inscription à un événement
Aperçu du projetSection d'en-têteSection des détails de l'événementFormulaire d'inscriptionSection de pied de page3Travailler avec les listes
Liste non ordonnéeListe ordonnéeListes imbriquéesRécapitulatif - Les listes6Mise en page
DivisionsSpans en ligneBalises sémantiquesSections et articlesRécapitulatif - Mise en page