Mini-défi : un CV en HTML pur
Un CV complet en HTML sémantique pur.
Objectifs
Construire une page complète — votre CV ou portfolio — en utilisant exclusivement ce que le chapitre a couvert. Pas de CSS : la structure seule doit porter la page.
Énoncé
Créez cv.html contenant :
- Squelette complet (DOCTYPE, lang, charset, viewport, title).
- Un header avec votre nom (
h1) et un paragraphe d'accroche. - Une section « Compétences » : liste non ordonnée de 5 compétences.
- Une section « Expériences » : deux articles, chacun avec titre en h3, dates et description.
- Une section « Formation » : tableau (année / diplôme / établissement).
- Un footer avec un lien mailto et un lien externe vers GitHub.
Contraintes
- HTML sémantique uniquement : pas de
<div>, pas de style. - Tous les textes alternatifs présents si vous ajoutez une photo.
- La hiérarchie des titres doit être cohérente (un seul h1).
Indices
Sur les sections : chaque section peut porter son propre h2 ; les articles internes passent en h3.
Sur le tableau : pensez thead/tbody et th pour les cellules d'en-tête.
Pour vérifier la structure : ouvrez la page, puis dans DevTools (F12) l'onglet Elements montre votre arbre — c'est le DOM que JavaScript manipulera au chapitre suivant.
Correction disponibleCherchez d’abord par vous-même.Voir la correction
Correction
Solution complète
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CV — Paul Exemple</title>
</head>
<body>
<header>
<h1>Paul Exemple</h1>
<p>Développeur web en formation — curieux, méthodique, persévérant.</p>
</header>
<main>
<section>
<h2>Compétences</h2>
<ul>
<li>Terminal Linux</li>
<li>Git</li>
<li>JavaScript</li>
<li>HTML / CSS</li>
<li>SQL</li>
</ul>
</section>
<section>
<h2>Expériences</h2>
<article>
<h3>Projet Todo full-stack</h3>
<p><time>2026</time> — Application de gestion de tâches en Node.js et PostgreSQL.</p>
</article>
<article>
<h3>Stage support informatique</h3>
<p><time>2025</time> — Diagnostic matériel, rédaction de procédures.</p>
</article>
</section>
<section>
<h2>Formation</h2>
<table>
<thead>
<tr><th>Année</th><th>Diplôme</th><th>Établissement</th></tr>
</thead>
<tbody>
<tr><td>2026</td><td>Cursus développement web</td><td>Autodidacte encadré</td></tr>
<tr><td>2023</td><td>Baccalauréat</td><td>Lycée Exemple</td></tr>
</tbody>
</table>
</section>
</main>
<footer>
<p>
<a href="mailto:paul@exemple.fr">Me contacter</a> ·
<a href="https://github.com/paul-exemple" target="_blank">GitHub</a>
</p>
</footer>
</body>
</html>
Grille d'auto-vérification
- Un seul
h1, hiérarchie descendante sans saut. -
mainunique englobant les trois sections. - Tableau avec thead/tbody et th.
- Aucune balise de présentation détournée (pas de
<br>pour espacer, pas de<b>pour titrer). - Le fichier s'ouvre correctement depuis le disque ET affiche un title propre dans l'onglet.
Ce document est la matière première du défi CSS du chapitre suivant : vous le rendrez responsive sans toucher à sa structure — c'est précisément l'intérêt du HTML sémantique.