Exercices – Balises de structure

Exercice 1 : Compléter le squelette HTML

Complète le code suivant en ajoutant les balises manquantes (head, body, header, nav, main, footer) aux bons endroits :

<!DOCTYPE html>
<html lang="fr">
  <!-- Complète ici la balise head avec un titre "Ma première page" -->

  <!-- Ajoute ici la balise body -->
    <!-- Ajoute un header avec un titre h1 : "Bienvenue" -->

    <!-- Ajoute une navigation avec 3 liens : Accueil, À propos, Contact -->

    <!-- Ajoute une section main avec un paragraphe de texte -->

    <!-- Ajoute un footer avec le texte : "© 2025 Mon site" -->
  <!-- Ferme la balise body -->
</html>

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Ma première page</title>
  </head>
  <body>
    <header>
      <h1>Bienvenue</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">À propos</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <main>
      <p>Voici un paragraphe de texte dans la section principale.</p>
    </main>
    <footer>
      © 2025 Mon site
    </footer>
  </body>
</html>

Exercice 2 : Identifier les balises structurelles

Dans ce code, surligne ou liste les balises qui définissent la structure principale de la page, puis explique leur rôle :

<html>
  <head> ... </head>
  <body>
    <header>...</header>
    <nav>...</nav>
    <main>...</main>
    <footer>...</footer>
  </body>
</html>

Les balises principales sont :
- <header> : section d’en-tête contenant titre ou logo
- <nav> : section pour la navigation principale
- <main> : section principale contenant le contenu visible
- <footer> : pied de page avec infos légales ou contact

Elles définissent la structure sémantique de la page HTML.

Exercice 3 : Réorganiser le code

Voici un extrait de code avec des balises mal ordonnées. Réorganise-les correctement pour respecter la hiérarchie HTML :

<html>
  <body>
    <main>
      <header>Titre</header>
    </main>
    <footer>Pied de page</footer>
    <nav>Menu</nav>
  </body>
</html>

<html>
  <body>
    <header>Titre</header>
    <nav>Menu</nav>
    <main>
      Contenu principal ici
    </main>
    <footer>Pied de page</footer>
  </body>
</html>

Exercice 4 : Mini-projet de page structurée

Crée une page HTML contenant :

Un <header> avec un titre et un slogan.
Une <nav> avec 4 liens.
Une section principale <main> avec un <article> (titre + paragraphes).
Un <aside> pour des informations complémentaires.
Un <footer> avec les mentions légales.

Conseil : Utilise les balises sémantiques pour bien structurer ta page.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Page structurée</title>
  </head>
  <body>
    <header>
      <h1>Titre de la page</h1>
      <p>Le slogan du site</p>
    </header>
    <nav>
      <ul>
        <li><a href="#">Lien 1</a></li>
        <li><a href="#">Lien 2</a></li>
        <li><a href="#">Lien 3</a></li>
        <li><a href="#">Lien 4</a></li>
      </ul>
    </nav>
    <main>
      <article>
        <h2>Titre de l’article</h2>
        <p>Premier paragraphe...</p>
        <p>Deuxième paragraphe...</p>
      </article>
      <aside>
        <p>Informations complémentaires</p>
      </aside>
    </main>
    <footer>
      <p>Mentions légales ici</p>
    </footer>
  </body>
</html>

HTML & CSS

Exercices pratiques – Balises de structure

Exercice 1 : Compléter le squelette HTML

Exercice 2 : Identifier les balises structurelles

Exercice 3 : Réorganiser le code

Exercice 4 : Mini-projet de page structurée

Exercice 5 : Quiz interactif