HTML : structurer le Web (école d'ingénieur) · Chapitre 7 · Exercice de TD
Le catalogue en cartes
HTML sémantique · niveau 3 (difficile)
Énoncé
Le tableau du chapitre 5 convient pour comparer des prix. Pour une vitrine, on préfère des « cartes » : chaque livre est un bloc avec son titre, son auteur et son prix, et un lien vers sa fiche. Écrire un catalogue en cartes, regroupé par rayon (« Informatique » : l'algorithmique et Java ; « Littérature » : le Petit Prince et l'Étranger). Justifier le choix de chaque élément (liste ? article ? section ? niveau de titre ?).
Corrigé
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Catalogue — La Librairie du Campus</title>
</head>
<body>
<header>
<p><a href="index.html">La Librairie du Campus</a></p>
</header>
<main>
<h1>Catalogue</h1>
<section>
<h2>Informatique</h2>
<ul>
<li>
<article>
<h3>Introduction à l'algorithmique</h3>
<p>Cormen et al. — 89,00 €</p>
<p><a href="livre.html">Voir la fiche</a></p>
</article>
</li>
<li>
<article>
<h3>Programmation Java</h3>
<p>I. Alame — 32,00 €</p>
<p><a href="livre.html">Voir la fiche</a></p>
</article>
</li>
</ul>
</section>
<section>
<h2>Littérature</h2>
<ul>
<li>
<article>
<h3>Le Petit Prince</h3>
<p>Saint-Exupéry — 8,50 €</p>
<p><a href="livre.html">Voir la fiche</a></p>
</article>
</li>
<li>
<article>
<h3>L'Étranger</h3>
<p>Camus — 7,90 €</p>
<p><a href="livre.html">Voir la fiche</a></p>
</article>
</li>
</ul>
</section>
</main>
<footer>
<p>© 2026 La Librairie du Campus</p>
</footer>
</body>
</html>- Chaque rayon est une
<section>titrée en<h2>: une partie thématique du catalogue. - Les cartes d'un rayon forment une
<ul>: c'est une liste de livres, et un lecteur d'écran annonce « liste de 2 éléments », ce qui aide à se repérer. - Chaque carte est un
<article>(contenu autonome), titré en<h3>, sous le<h2>du rayon. - Le lien « Voir la fiche » serait plus explicite s'il contenait le titre du livre : quatre liens au même libellé se confondent quand un lecteur d'écran les liste. On y reviendra au chapitre 8.
Le livre CSS disposera ces cartes en grille ; la structure, elle, est déjà prête.
100 % gratuit
La suite du chapitre est sur Adloun
- 9 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.