← Retour au sommaire TSRS 1 · Jour 1 · Lundi
Cours · Jour 1

Fondations & Structure HTML5

Tout ce qu'il faut comprendre avant d'attaquer le TP 1 — La Page de Doc Technique.

1 Ce qui est demandé

Le TP 1 te demande de construire une page de documentation technique (par exemple un rapport d'incident ou une doc serveur) en utilisant correctement la structure sémantique HTML5.

Autrement dit : l'objectif n'est pas de faire « joli », mais d'organiser le contenu avec les bonnes balises, celles qui décrivent le rôle de chaque partie de la page. C'est ce point qui est évalué.

En une phrase Structurer un document clair et lisible avec des balises qui ont du sens, et déclarer correctement le viewport pour que la page s'affiche bien sur mobile.

2 Le squelette d'une page HTML5

Toute page commence par cette base. Dans Sublime/VSCode, tu peux la générer en tapant html puis la touche Tab.

<!-- déclare que c'est du HTML5 -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
</head>
<body>
    <!-- le contenu visible va ici -->
</body>
</html>

Le rôle de chaque ligne du <head>

  • <!DOCTYPE html> : indique au navigateur que la page utilise HTML5.
  • lang="fr" : précise la langue du document (utile pour l'accessibilité et le référencement).
  • charset="UTF-8" : gère l'encodage, pour que les accents (é, à, ç…) s'affichent correctement.
  • viewport : la ligne clé du responsive (détaillée juste en dessous).
  • <title> : le texte affiché dans l'onglet du navigateur.

3 La balise viewport en détail

C'est la spécificité mise en avant dans le cours. Sans elle, un téléphone affiche la page comme un mini-écran d'ordinateur : tout est minuscule et l'utilisateur doit zoomer.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width : la largeur de la page = la largeur réelle de l'écran de l'appareil.
  • initial-scale=1.0 : niveau de zoom de départ à 100 % (pas de dézoom automatique).
À retenir Sans cette ligne, aucun site ne peut être vraiment « responsive ». C'est le tout premier réflexe de l'adaptatif.

4 Les balises sémantiques (le cœur du TP)

Une balise « sémantique » porte un sens. Au lieu d'empiler des <div> anonymes, on nomme chaque zone selon son rôle. Le navigateur, les moteurs de recherche et les lecteurs d'écran comprennent alors la structure.

BaliseRôle
<header>En-tête de la page ou d'une section (titre, logo).
<nav>Zone de navigation (menu, sommaire de liens).
<main>Contenu principal, unique, de la page.
<article>Un contenu autonome (ici : le rapport lui-même).
<section>Une partie thématique du contenu (résumé, diagnostic…).
<aside>Contenu secondaire (encadré, infos de synthèse).
<footer>Pied de page (mentions, auteur, date).

Exemple de structure complète

<body>
    <header> <!-- titre du document --> </header>
    <nav>    <!-- sommaire cliquable --> </nav>
    <main>
        <article>
            <section> <!-- une partie --> </section>
            <section> <!-- une autre --> </section>
        </article>
        <aside> <!-- encadré annexe --> </aside>
    </main>
    <footer> <!-- bas de page --> </footer>
</body>
Le piège à éviter Tout faire avec des <div>. Ça « marche » visuellement, mais ça vide la page de tout sens — et c'est précisément ce que le TP veut t'apprendre à ne pas faire.

5 Les balises de contenu utiles

À l'intérieur des sections, tu organises le texte avec :

  • <h1> à <h6> : les titres, par ordre d'importance. Un seul <h1> par page.
  • <p> : un paragraphe de texte.
  • <ul> / <ol> / <li> : listes à puces ou numérotées.
  • <table> : un tableau (pratique pour les infos clés d'un incident).
  • <time> : une date ou heure (sémantique, pour une chronologie).
  • <pre> et <code> : afficher du code ou des logs sans déformer la mise en forme.

6 Checklist avant de rendre

  • Le <!DOCTYPE html> est présent en première ligne.
  • La balise viewport est dans le <head>.
  • La page utilise header, nav, main, article, section, aside, footer.
  • Un seul <h1>, puis une hiérarchie de titres cohérente.
  • Aucune zone importante n'est un simple <div> alors qu'une balise sémantique existe.
  • Le contenu (rapport d'incident) est clair, complet et bien découpé.
  • La page s'affiche correctement en réduisant la fenêtre (test mobile).