HTML — Structure d'une page web

Section 11.1.8 : HTML — Structure d'une page web

🎯 Objectif pédagogique

Comprendre et écrire du HTML pour structurer une page web. Vous serez capable de créer la structure complète d'un site avec les balises sémantiques, d'organiser du contenu avec des titres, paragraphes, listes, liens et images.

Le squelette de toute page web

Marc a ouvert les DevTools (F12) sur learn-prompting.fr et cliqué sur "Elements". Il a vu des centaines de lignes de... code bizarre avec des chevrons. C'est du HTML — le langage de structure du web. Chaque page web, de Google à Wikipedia, est du HTML.

HTML (HyperText Markup Language) n'est pas un langage de programmation — c'est un langage de balisage. Il décrit ce que contient la page (titres, paragraphes, images), pas comment elle est stylée (c'est le CSS) ni ses comportements (c'est le JavaScript).

Structure d'un document HTML

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon Premier Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Bienvenue sur mon site</h1>
  <p>Ce site est construit en HTML.</p>
</body>
</html>

Les balises essentielles

Titres et texte

<h1>Titre principal (un seul par page)</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
<h4>Niveau 4</h4>
<h5>Niveau 5</h5>
<h6>Niveau 6</h6>

<p>Un paragraphe de texte. Peut contenir du <strong>gras</strong>
et de l'<em>italique</em>.</p>

<br> <!-- Saut de ligne -->
<hr> <!-- Ligne horizontale -->

Liens et images

<!-- Liens -->
<a href="https://learn-prompting.fr">Visiter LearnIA</a>
<a href="/contact">Page contact</a>
<a href="mailto:marc@email.com">M'écrire</a>
<a href="https://github.com" target="_blank">GitHub (nouvel onglet)</a>

<!-- Images -->
<img src="photo.jpg" alt="Description de l'image" width="400">
<img src="https://example.com/image.png" alt="Image externe">

Listes

<!-- Liste non-ordonnée (points) -->
<ul>
  <li>HTML — Structure</li>
  <li>CSS — Style</li>
  <li>JavaScript — Comportement</li>
</ul>

<!-- Liste ordonnée (numérotée) -->
<ol>
  <li>Écrire le HTML</li>
  <li>Ajouter le CSS</li>
  <li>Ajouter le JavaScript</li>
</ol>

Tableaux

<table>
  <thead>
    <tr>
      <th>Langage</th>
      <th>Rôle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Structure</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Style</td>
    </tr>
  </tbody>
</table>

Balises sémantiques HTML5

Les balises sémantiques donnent du sens au contenu (au lieu de tout mettre dans des <div>) :

<header>   <!-- En-tête du site/section -->
<nav>      <!-- Navigation -->
<main>     <!-- Contenu principal (un seul par page) -->
<article>  <!-- Contenu autonome (article, post) -->
<section>  <!-- Section thématique -->
<aside>    <!-- Contenu secondaire (sidebar) -->
<footer>   <!-- Pied de page -->

<body>
  <header>
    <nav>
      <a href="/">Accueil</a>
      <a href="/about">À propos</a>
    </nav>
  </header>
  
  <main>
    <article>
      <h1>Mon article</h1>
      <p>Contenu de l'article...</p>
    </article>
    
    <aside>
      <h2>Articles similaires</h2>
      <ul>
        <li><a href="/post-2">Autre article</a></li>
      </ul>
    </aside>
  </main>
  
  <footer>
    <p>&copy; 2026 Marc Dupont</p>
  </footer>
</body>

🏋️ Exercice pratique (25 minutes)

Créez le fichier index.html d'un portfolio personnel :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marc Dupont — Portfolio</title>
</head>
<body>
  <header>
    <nav>
      <a href="#about">À propos</a>
      <a href="#skills">Compétences</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h1>Marc Dupont</h1>
      <p>Ex-analyste financier en reconversion tech &amp; IA.</p>
      <img src="https://via.placeholder.com/200" alt="Photo de Marc">
    </section>

    <section id="skills">
      <h2>Compétences en cours</h2>
      <ul>
        <li>HTML &amp; CSS</li>
        <li>JavaScript</li>
        <li>Python</li>
        <li>Git &amp; GitHub</li>
      </ul>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>Email : <a href="mailto:marc@example.com">marc@example.com</a></p>
      <p>GitHub : <a href="https://github.com/marc-dupont" target="_blank">github.com/marc-dupont</a></p>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Marc Dupont. Créé pendant le bootcamp Tech &amp; IA.</p>
  </footer>
</body>
</html>

Ouvrez-le avec Live Server (clic droit → "Open with Live Server") et observez le résultat.