Menu
Coddy logo textTech

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.

challenge icon

Défi

Facile

Cré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>
quiz iconTestez-vous

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

Entraînez-vous par vous-même : Playground Web