Exercices sur la manipulation des sections en HTML 5

Affichage d'un texte avec tête, sections, navigation et pied de page en xHTML 5.0

Écrire une page HTML 5 qui affiche :

un bloc d'entête header,
un titre de premier niveau h1,
un groupe d'entête hgroup,
un bloc de navigation permettant d'accéder aux section définies ci-après.
au moins deux sections génériques (section) pouvant correspondre aux chapitres d'un livre.
un bloc de pied footer,

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Test des tête et pied de page HTML 5</title>
</head>
<body>
  <header>
    <hgroup>
      <h1>Test des tête et pied de page HTML 5</h1>
      <h2>presentation HTML 5.0</h2>
    </hgroup>
  </header>
 
  <nav>
    <dl>
      <dt><a href="#chap1">Chapitres I</a> :</dt>
      <dd>le matin.</dd>
      <dt><a href="#chap1">Chapitres II</a> :</dt>
      <dd>le soir.</dd>
      <dt><a href="#chap1">Chapitres III</a> :</dt>
      <dd>la nuit.</dd>
    </dl>
  </nav>
 
  <section id="chap1">
    <h1>Chapitre I</h1>
    <p>Aujourd'hui le jour se lève, le début d'une nouvelle aventure, celle de la vie durant un jour.</p>
  </section>
  <section id="chap2">
    <h1>Chapitre II</h1>
    <p>Maintenant le soir arrive, la fin de cette aventure extraordinaire qui se déroula aujourd'hui.</p>
  </section>
  <section id="chap3">
    <h1>Chapitre III</h1>
    <p>Au cœur de la nuit les esprits se reposent, préparant ainsi une nouvelle expérience de la vie,
      celle qui se déroulera demain. Ne <strong>vivons pas sans le projet du landemain !</strong></p>
  </section>
  <footer>
    <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
  </footer>
</body>
</html>

voir le résultat

Affichage d'une zone de navigation dans une page HTML 5

Écrire une page HTML 5 qui affiche :

un titre de premier niveau h1,
un bloc de contenu de type aside,
un bloc de navigation nav,
le bloc de navigation contiendra 4 liens internes,

Fichier à produire :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
  <title>Test des blocs de navigation en HTML 5</title>
</head>
<body>
  <h1 id="titre">Test des blocs de navigation en HTML 5</h1>
  <aside><q>Cette page présente un menu</q></aside>
  <nav>
  <ul>
    <li id="lien1"><a href="#titre">page 1</a></li>
    <li id="lien2"><a href="#validation">page 2</a></li>
    <li id="lien3"><a href="#lien1">page 3</a></li>
    <li id="lien4"><a href="#lien2">page 4</a></li>
  </ul>
  </nav>
 <footer>
   <p id="validation"><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
 </footer>
</body>
</html>