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, ce qui rend le code plus clair pour les développeurs comme pour les navigateurs. Contrairement à <div> et <span>, elles donnent un contexte au contenu qu’elles contiennent.
Balises sémantiques courantes :
<header>: Contenu introductif, généralement situé en haut.<nav>: Contient des liens de navigation.
<main>: Contenu principal de la page.<article>: Élément autonome tel qu’un article de blog.
<section>: Regroupe le contenu associé, souvent avec un titre.<footer>: Section inférieure contenant des informations telles que 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>Cette structure fournit une mise en page claire et pertinente pour le contenu.
Défi
FacileCréez une page de critiques de films en utilisant le HTML sémantique. Elle doit inclure :
1. <header> avec :
<h1>"Movie Reviews"<nav>avec les liens : "Home", "Reviews", “Top Picks”
2. <main> avec :
<article>pour une critique contenant :<h2>avec le nom du film<p>avec une courte critique
3. <footer> avec :
<p>"Copyright 2023 Movie Reviews"
Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez le code ici -->
</body>
</html>Cette 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ête2Texte 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ête3Travailler 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 pageEntraînez-vous par vous-même : Playground Web