MODULE H01

HTML Fondamentaux

Maîtrisez HyperText Markup Language — structure, balises, formulaires, sémantique HTML5 et accessibilité.

Durée ~3h 10 exercices Mini-projet CV QCM 10 questions

1. Introduction au HTML

HTML (HyperText Markup Language) est le langage de balisage standard du Web, inventé par Tim Berners-Lee en 1991. Il décrit la structure et le contenu d'une page web à l'aide de balises (tags) qui indiquent au navigateur comment afficher chaque élément.

Concrètement, chaque page que vous visitez sur Internet — Google, YouTube, Wikipedia — est construite avec du HTML. C'est le squelette de tout site web.

<!-- HTML = balises qui décrivent le contenu -->
<h1>Titre principal</h1>
<p>Un paragraphe de texte.</p>
<a href="https://example.com">Un lien cliquable</a>
<img src="photo.jpg" alt="Description de l'image">

Les 3 langages du Web : HTML = structure et contenu | CSS = apparence et mise en page | JavaScript = comportement et interactions. Dans ce module, vous apprenez HTML — la base indispensable de tout le reste.

⚙ Préparer son environnement de travail

Pour suivre ce cours et tester votre code en direct, nous utilisons Visual Studio Code (VS Code) — l'éditeur de code le plus utilisé au monde, gratuit et open source.

Étape 1

📥 Installer VS Code

Rendez-vous sur code.visualstudio.com, téléchargez la version pour votre système (Windows / Mac / Linux) et installez-la. Une fois ouvert, VS Code vous accueille avec une interface sombre et un explorateur de fichiers sur la gauche.

Étape 2

🔌 Installer l'extension Live Server

Live Server affiche votre page dans le navigateur et la rafraîchit automatiquement à chaque fois que vous sauvegardez un fichier — indispensable pour voir vos modifications en temps réel.

Dans VS Code, cliquez sur l'icône Extensions dans la barre latérale gauche (ou Ctrl + Shift + X)
Recherchez Live Server (auteur : Ritwick Dey)
Cliquez sur Install
Ouvrez un fichier .html, puis cliquez sur Go Live en bas à droite de VS Code — votre page s'ouvre dans le navigateur !

Étape 3

📁 Créer votre premier fichier HTML

Dans VS Code, créez un nouveau fichier index.html. Tapez ! puis appuyez sur Tab — VS Code génère automatiquement la structure HTML5 complète grâce à Emmet (intégré par défaut).

Sauvegardez (Ctrl+S) et lancez Live Server — vous êtes prêt à coder !

✓ Vous êtes prêt ! VS Code installé, Live Server actif — vous pouvez maintenant suivre tous les exemples de ce cours en les testant directement dans votre navigateur.

2. Structure de base d'une page

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Description de la page pour les moteurs de recherche">
  <title>Titre visible dans l'onglet</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Contenu visible de la page -->
  <h1>Mon titre</h1>
  <p>Mon paragraphe</p>

  <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html> — Déclare la version HTML5
lang="fr" — Langue pour l'accessibilité et le SEO
charset="UTF-8" — Encodage universel (accents, emojis...)
viewport — Indispensable pour le responsive
<head> — Métadonnées invisibles
<body> — Contenu visible

3. Balises texte sémantiques

<!-- Titres : h1 à h6 (un seul h1 par page) -->
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

<!-- Paragraphes et formatage -->
<p>Texte normal. <strong>Important (gras sémantique).</strong>
   <em>Emphase (italique sémantique).</em></p>

<!-- Balises inline utiles -->
<abbr title="HyperText Markup Language">HTML</abbr>
<code>console.log('hello')</code>
<mark>Texte surligné</mark>
<time datetime="2024-01-15">15 janvier 2024</time>
<del>Texte supprimé</del> <ins>Texte inséré</ins>
<sup>exposant</sup> <sub>indice</sub>

<!-- Citations -->
<blockquote cite="https://www.w3.org">
  "La puissance du Web réside dans son universalité." — Tim Berners-Lee
</blockquote>
<q>Citation inline courte</q>

<!-- Préformaté -->
<pre><code>Code multilignes
  avec indentation</code></pre>

<!-- Ligne horizontale -->
<hr>

strong vs b, em vs i Préférez <strong> à <b> et <em> à <i> — ils ont une valeur sémantique lue par les lecteurs d'écran.

4. Listes

<!-- Liste non ordonnée (puces) -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Liste ordonnée (numéros) -->
<ol>
  <li>Apprendre HTML</li>
  <li>Apprendre CSS</li>
  <li>Apprendre JS</li>
</ol>

<!-- Listes imbriquées -->
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

<!-- Liste de définitions -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — langage de balisage du Web</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets — feuilles de style</dd>
</dl>

5. Liens & Images

<!-- ── Liens ── -->

<!-- Lien simple -->
<a href="page.html">Lien interne</a>

<!-- Lien externe — toujours rel="noopener" pour la sécurité -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Site externe
</a>

<!-- Ancre interne -->
<a href="#section-contact">Aller au contact</a>
<section id="section-contact">...</section>

<!-- Liens spéciaux -->
<a href="mailto:contact@example.com">Envoyer un email</a>
<a href="tel:+33612345678">Appeler</a>
<a href="fichier.pdf" download>Télécharger</a>

<!-- ── Images ── -->

<!-- Image informative : alt descriptif obligatoire -->
<img src="photo.jpg"
     alt="Équipe de développeurs en réunion"
     width="800"
     height="450"
     loading="lazy">

<!-- Image décorative : alt vide -->
<img src="separator.png" alt="">

<!-- Figure avec légende -->
<figure>
  <img src="diagram.png" alt="Schéma du DOM HTML" width="600" height="400">
  <figcaption>Fig. 1 — Structure arborescente du DOM</figcaption>
</figure>

<!-- Image responsive -->
<picture>
  <source srcset="image-large.webp" media="(min-width: 1024px)">
  <source srcset="image-medium.webp" media="(min-width: 768px)">
  <img src="image-small.jpg" alt="Description">
</picture>

Sécurité — target="_blank" Sans rel="noopener", la page ouverte peut accéder à votre page via window.opener. Toujours ajouter rel="noopener noreferrer".

6. Tableaux

<table>
  <caption>Comparatif des langages Web</caption>

  <thead>
    <tr>
      <th scope="col">Langage</th>
      <th scope="col">Rôle</th>
      <th scope="col">Difficulté</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>HTML</td>
      <td>Structure</td>
      <td>Facile</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Présentation</td>
      <td>Moyen</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Comportement</td>
      <td>Avancé</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">Total langages front-end</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

Accessibilité des tableaux Utilisez toujours <caption> pour décrire le tableau et scope="col" ou scope="row" sur les <th> pour les lecteurs d'écran.

7. Formulaires

<form action="/submit" method="POST" novalidate>

  <!-- Champ texte avec label associé -->
  <label for="nom">Nom *</label>
  <input type="text" id="nom" name="nom"
         required minlength="2" maxlength="50"
         placeholder="Votre nom complet"
         autocomplete="name">

  <!-- Types d'input courants -->
  <input type="email"    id="email"   name="email"   required>
  <input type="tel"      id="tel"     name="tel"     pattern="[0-9]{10}">
  <input type="password" id="pwd"     name="pwd"     minlength="8">
  <input type="number"   id="age"     name="age"     min="18" max="100">
  <input type="date"     id="date"    name="date"    min="2024-01-01">
  <input type="url"      id="site"    name="site">
  <input type="search"   id="q"       name="q"       role="search">
  <input type="file"     id="avatar"  name="avatar"  accept="image/*">
  <input type="range"    id="note"    name="note"    min="0" max="10">
  <input type="color"    id="couleur" name="couleur">
  <input type="checkbox" id="cgu"     name="cgu"     required>
  <input type="radio"    id="oui"     name="choix"   value="oui">
  <input type="hidden"   name="token" value="abc123">

  <!-- Select -->
  <select id="pays" name="pays">
    <option value="">-- Choisir --</option>
    <optgroup label="Europe">
      <option value="fr">France</option>
      <option value="be">Belgique</option>
    </optgroup>
  </select>

  <!-- Textarea -->
  <textarea id="message" name="message"
            rows="5" cols="40"
            required maxlength="500"
            placeholder="Votre message..."></textarea>

  <!-- Fieldset pour grouper -->
  <fieldset>
    <legend>Centres d'intérêt</legend>
    <label><input type="checkbox" name="int" value="html"> HTML</label>
    <label><input type="checkbox" name="int" value="css"> CSS</label>
  </fieldset>

  <!-- Boutons -->
  <button type="submit">Envoyer</button>
  <button type="reset">Effacer</button>
  <button type="button" onclick="doSomething()">Action</button>

</form>

label for/id Associez toujours chaque <input> à son <label> via les attributs for et id. Cela améliore l'accessibilité et la surface cliquable.

8. HTML Sémantique (HTML5)

<!-- ── Structure de page typique ── -->
<body>
  <header>          <!-- En-tête : logo, nav principale -->
    <nav>...</nav>
  </header>

  <main>             <!-- Contenu principal (un seul par page) -->

    <article>        <!-- Contenu autonome (article de blog, news...) -->
      <header>
        <h1>Titre de l'article</h1>
        <time datetime="2024-01-15">15 janvier 2024</time>
      </header>
      <section>      <!-- Section thématique avec titre h2/h3 -->
        <h2>Introduction</h2>
        <p>...</p>
      </section>
      <footer>       <!-- Pied d'article : auteur, tags -->
        <p>Par <address>Jean Dupont</address></p>
      </footer>
    </article>

    <aside>          <!-- Contenu complémentaire, sidebar -->
      <nav aria-label="Articles récents">...</nav>
    </aside>

  </main>

  <footer>           <!-- Pied de page global -->
    <address>
      <a href="mailto:contact@site.fr">contact@site.fr</a>
    </address>
    <p>&copy; 2024 Mon Site</p>
  </footer>
</body>

<!-- ── Autres balises sémantiques ── -->
<figure><img ...><figcaption>Légende</figcaption></figure>
<details><summary>Titre cliquable</summary>Contenu caché</details>
<dialog open>Boîte de dialogue</dialog>
<progress value="70" max="100">70%</progress>
<meter value="0.6">60%</meter>

Pourquoi la sémantique ? Les balises sémantiques aident les moteurs de recherche (SEO), les lecteurs d'écran (accessibilité) et les autres développeurs à comprendre votre code.

9. Accessibilité (a11y)

<!-- ── ARIA (Accessible Rich Internet Applications) ── -->

<!-- Rôles ARIA -->
<nav aria-label="Navigation principale">...</nav>
<div role="alert">Message d'erreur important</div>
<button aria-expanded="false" aria-controls="menu">Menu</button>

<!-- Propriétés ARIA -->
<img src="..." aria-hidden="true">          <!-- Caché aux lecteurs d'écran -->
<span aria-live="polite">Mise à jour...</span>
<input aria-describedby="aide-email">
<p id="aide-email">Format : prenom@domaine.fr</p>

<!-- Skip link (accès rapide) -->
<a href="#main-content" class="skip-link">
  Aller au contenu principal
</a>

<!-- Focus visible -->
<!-- Ne jamais supprimer outline sans alternative ! -->
<button>Toujours focusable au clavier</button>

<!-- Texte alternatif -->
<img src="logo.png" alt="Formation Web — Retour accueil">  <!-- informatif -->
<img src="deco.png" alt="">                                 <!-- décoratif -->

<!-- lang sur les passages en langue étrangère -->
<p lang="en">This is an English paragraph.</p>

Règle WCAG Au minimum : 1 seul H1 par page, contraste 4.5:1, navigation clavier, alt sur toutes les images, labels sur tous les champs.

10. SEO basique

<!-- ── Balises meta essentielles ── -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Title : 50-60 caractères -->
  <title>Apprendre HTML — Formation Web Complète | MonSite</title>

  <!-- Description : 150-160 caractères -->
  <meta name="description"
        content="Formation HTML gratuite : structures, balises, formulaires, sémantique HTML5. Exercices pratiques et projets réels.">

  <!-- Open Graph (partage réseaux sociaux) -->
  <meta property="og:title"       content="Formation HTML">
  <meta property="og:description" content="Apprenez HTML de zéro à expert">
  <meta property="og:image"       content="https://monsite.fr/og-image.jpg">
  <meta property="og:url"         content="https://monsite.fr/html">
  <meta property="og:type"        content="website">

  <!-- Twitter Card -->
  <meta name="twitter:card"        content="summary_large_image">
  <meta name="twitter:title"       content="Formation HTML">
  <meta name="twitter:description" content="Apprenez HTML de zéro à expert">

  <!-- Canonical URL (évite le contenu dupliqué) -->
  <link rel="canonical" href="https://monsite.fr/html">

  <!-- Robots -->
  <meta name="robots" content="index, follow">
</head>

<!-- ── Bonnes pratiques SEO dans le body ── -->
<!-- 1 seul h1 par page, hiérarchie h2 > h3 > h4 -->
<h1>Formation HTML — Apprenez HTML de A à Z</h1>

<!-- Images avec alt descriptifs et chargement lazy -->
<img src="html5.webp" alt="Logo HTML5 officiel" loading="lazy">

<!-- Liens avec texte descriptif -->
<a href="/html/formulaires">Guide complet des formulaires HTML</a>
<!-- Évitez : <a href="/html/formulaires">Cliquer ici</a> -->

Core Web Vitals Google mesure LCP (chargement), FID (interactivité) et CLS (stabilité visuelle). HTML sémantique, images lazy et structure correcte améliorent ces métriques.