Mini-défi : un CV en HTML pur

Un CV complet en HTML sémantique pur.

◷ 35 minutesTravail sur votre machine

Objectifs

Construire une page complète — votre CV ou portfolio — en mobilisant TOUT le chapitre : régions sémantiques, hiérarchie de titres, listes, tableaux, liens. Pas de CSS : la structure seule doit porter la page.

🔗 Pour vous rafraîchir la mémoire : éléments sémantiques · liens, images et formulaires

É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.

Critères d'acceptation

Un seul h1, hiérarchie descendante sans saut (h1 → h2 → h3).
main unique englobant les trois sections.
Tableau avec thead/tbody et cellules d'en-tête 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 ; l'onglet affiche un title propre.
Le validateur W3C (validator.w3.org) ne signale aucune erreur.

Contraintes

HTML sémantique uniquement : pas de <div>, pas de style.
Tout texte alternatif présent si vous ajoutez une photo.
Chaque section porte son propre h2.

Indices

Sur les sections : la hiérarchie des titres EST votre plan : h1 = votre nom (sujet de la page), h2 = chaque grande rubrique, h3 = chaque expérience DANS sa rubrique. Si vous vous retrouvez à écrire deux h1, relisez « un seul sujet par page ».

Sur le tableau : pensez thead/tbody et th pour la ligne d'en-tête — souvenez-vous du contrat : lecteurs d'écran annoncent l'en-tête à chaque ligne.

Sur les dates : l'élément <time datetime="2026">2026</time> donne un sens machine au texte humain.

Pour vérifier la structure : DevTools (F12) → onglet Elements montre l'arbre réellement construit — c'est littéralement le DOM que JavaScript manipulera dès le chapitre 16. Comparez-le mentalement au dessin d'arbre de la leçon 13-01 : même structure.

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 datetime="2026">2026</time> — Application de gestion de tâches
           en Node.js et PostgreSQL.</p>
      </article>
      <article>
        <h3>Stage support informatique</h3>
        <p><time datetime="2025">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" rel="noopener">GitHub</a>
    </p>
  </footer>
</body>
</html>

Lecture critique de cette solution

Chaque choix mérite d'être justifié — c'est ça, la sémantique :

header/main/footer délimitent les trois régions canoniques ; main est unique ;
un h1 (votre nom) puis h2/h3 sans saut : le plan du document se lit dans les titres seuls ;
<article> pour chaque expérience : chacune est autonome, détachable ;
mailto: ouvre le client mail — quatrième type de destination après absolu/relatif/ancre ;
rel="noopener" accompagne _blank, réflexe installé hier ;
zéro <div> : rien ici n'exige de conteneur neutre — tout a un sens natif.

Pièges fréquents

Deux h1 (« Mon CV » + votre nom) : redondance — le title d'onglet suffit pour le contexte ;