← Mois 1 — Fondations du Web & HTMLSemaine 228 min

Document HTML5 complet

Objectifs

Écrire un squelette HTML5 valide
Utiliser head, meta, title
Structurer body avec header/main/footer

Cours

Tout document moderne commence par <!DOCTYPE html>. La balise <html lang="fr"> annonce la langue — essentielle pour l’accessibilité et le SEO.

<head> contient les métadonnées : charset UTF-8, viewport pour le mobile, title, description, liens CSS, favicon. Rien de tout cela n’apparaît directement dans la page.

<body> contient le contenu visible. Les balises sémantiques header, nav, main, article, section, aside, footer décrivent le rôle des zones — pas seulement leur apparence.

Un seul <h1> par page (en général), puis une hiérarchie logique h2 → h3. Ne saute pas les niveaux pour « faire joli » : le CSS s’occupe du style.

Valide mentalement : chaque balise ouverte est fermée (sauf void elements : img, br, hr, input, meta, link…).

Atelier pratique

Ajoute une nav dans header et un paragraphe dans main.

○ <nav○ <p

<!DOCTYPE html>
    <html lang="fr">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>Académie</title>
    </head>
    <body>
      <header></header>
      <main>
        <h1>Code Academy Alfred</h1>
      </main>
      <footer></footer>
    </body>
    </html>

Évaluation

1. Où place-t-on la balise <title> ?

2. Pourquoi lang="fr" sur <html> ?

Précédente Suivante