Remplacer les div — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 7)

Remplacer les div

HTML sémantique · niveau 1 (application)

Énoncé

Réécrire cette page de recette avec des éléments sémantiques. Les ingrédients et les étapes doivent devenir des listes, et la date une date lisible par une machine.


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Recette</title>
</head>
<body>
  <div id="haut">
    <div class="site">Cuisine étudiante</div>
  </div>
  <div id="recette">
    <div class="titre">Pâtes au pesto</div>
    <div class="partie">
      <div class="sous-titre">Ingrédients</div>
      <div>200 g de pâtes, 3 cuillères de pesto, du parmesan.</div>
    </div>
    <div class="partie">
      <div class="sous-titre">Préparation</div>
      <div>Cuire les pâtes, égoutter, mélanger au pesto.</div>
    </div>
  </div>
  <div id="bas">Recette publiée le 2 octobre 2026</div>
</body>
</html>

Corrigé


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Recette</title>
</head>
<body>
  <header>
    <p>Cuisine étudiante</p>
  </header>
  <main>
    <article>
      <h1>Pâtes au pesto</h1>
      <section>
        <h2>Ingrédients</h2>
        <ul>
          <li>200 g de pâtes</li>
          <li>3 cuillères de pesto</li>
          <li>du parmesan</li>
        </ul>
      </section>
      <section>
        <h2>Préparation</h2>
        <ol>
          <li>Cuire les pâtes.</li>
          <li>Égoutter.</li>
          <li>Mélanger au pesto.</li>
        </ol>
      </section>
      <footer>
        <p>Recette publiée le <time datetime="2026-10-02">2 octobre 2026</time></p>
      </footer>
    </article>
  </main>
</body>
</html>

Le nom du site est dans le <header> de la page ; la recette, autonome, est un <article> dans le <main>.
« Pâtes au pesto » devient le <h1> ; les deux parties deviennent des <section> titrées en <h2>.
Les ingrédients, sans ordre, forment une <ul> ; les étapes, ordonnées, une <ol>.
La date de publication va dans le <footer> de l'article, dans un élément <time> dont l'attribut datetime vaut 2026-10-02 : le texte reste lisible, et la valeur datetime est compréhensible par une machine (un moteur de recherche, un agenda).