Balises sémantiques
Fait partie de la section Fondamentaux 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>: Un élément autonome, comme un article de blog.
<section>: Regroupe du contenu connexe, souvent avec un titre.<footer>: Section inférieure contenant des informations telles que les droits d’auteur 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 d’avis de films en utilisant du 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 un avis qui contient :<h2>avec le nom du film<p>avec un court avis
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 Fondamentaux
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