Un billet de blog — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 7)

Un billet de blog

HTML sémantique · niveau 2

Énoncé

Le blog de la librairie annonce une « Rencontre avec un auteur », publiée le 15 octobre 2026. Le billet a deux parties (« Au programme » et « Infos pratiques ») et se termine par sa rubrique (« événements »). Écrire la page, avec un en-tête de site, le billet dans un <article> doté de son propre <header> et de son propre <footer>, et un pied de page.

Corrigé


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Le blog de la librairie</title>
</head>
<body>
  <header>
    <p>Le blog de la Librairie du Campus</p>
  </header>
  <main>
    <article>
      <header>
        <h1>Rencontre avec un auteur</h1>
        <p>Publié le <time datetime="2026-10-15">15 octobre 2026</time> par l'équipe</p>
      </header>
      <section>
        <h2>Au programme</h2>
        <p>Lecture d'extraits, questions du public et séance de dédicaces.</p>
      </section>
      <section>
        <h2>Infos pratiques</h2>
        <p>Entrée libre, à 18 h, dans la salle de lecture.</p>
      </section>
      <footer>
        <p>Rubrique : <a href="evenements.html">événements</a></p>
      </footer>
    </article>
  </main>
  <footer>
    <p>© 2026 La Librairie du Campus</p>
  </footer>
</body>
</html>

Le <header> de l'article contient son titre et sa date ; il n'est pas un repère « bannière », puisqu'il est dans un article. De même, le <footer> de l'article n'est pas le pied de la page.