HTML : ce que tu dois savoir

Introduction — Pourquoi le HTML est le pilier du web

Avant d'écrire une seule ligne de CSS ou de JavaScript, tout développeur web commence par le HTML — HyperText Markup Language. Créé par Tim Berners-Lee en 1991, ce langage de balisage est la fondation sur laquelle repose l'intégralité du web. Il décrit la structure et le sens du contenu d'une page : ce qui est un titre, un paragraphe, une image, un lien ou un formulaire.

CSS s'occupe de l'apparence, JavaScript de l'interactivité, mais c'est le HTML qui donne sa forme logique au document. Un HTML mal écrit produit des pages inaccessibles, mal référencées et difficiles à maintenir. Comprendre HTML en profondeur est donc indispensable, même si on travaille principalement côté JavaScript.

À retenir : HTML n'est pas un langage de programmation — c'est un langage de balisage. Il ne contient pas de logique conditionnelle ni de boucles. Son rôle est de décrire le contenu, pas de le manipuler.

La version actuelle est HTML5, standardisée par le W3C et le WHATWG. Elle apporte des balises sémantiques puissantes, la gestion des médias natifs (<audio>, <video>), les formulaires enrichis, et bien d'autres améliorations par rapport aux versions précédentes.

La structure de base d'une page HTML

Toute page HTML valide respecte une structure minimale. Voici le squelette de départ que vous retrouverez dans chaque projet web :

<!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 le SEO">
    <title>Titre de la page — Mon site</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Bienvenue sur mon site</h1>
    <p>Contenu principal de la page.</p>
    <script src="main.js" defer></script>
  </body>
</html>

Décryptage ligne par ligne

<!DOCTYPE html> — N'est pas une balise HTML mais une déclaration. Elle indique au navigateur d'utiliser le mode standards (HTML5). À toujours placer en toute première ligne.
<html lang="fr"> — Élément racine du document. L'attribut lang est crucial pour l'accessibilité (lecteurs d'écran) et pour le SEO.
<head> — Contient les métadonnées : jeu de caractères, viewport, description, titre, liens vers les feuilles de style. Son contenu n'est pas affiché visuellement.
<meta charset="UTF-8"> — Définit l'encodage du document. UTF-8 gère les accents, emojis et caractères spéciaux. Toujours en premier dans <head>.
<meta name="viewport"> — Indispensable pour le responsive design. Sans cela, les mobiles zooment et affichent une version réduite du site desktop.
<body> — Contient tout le contenu visible de la page : textes, images, formulaires, scripts…
<script defer> — L'attribut defer charge le script de manière asynchrone et l'exécute après le parsing du HTML, sans bloquer le rendu.

Note : Placer les balises <script> en bas du <body> (ou utiliser defer) garantit que le DOM est entièrement chargé avant l'exécution du JavaScript.

Les balises sémantiques HTML5

Avant HTML5, on construisait les mises en page avec des <div> partout, sans signification particulière. HTML5 introduit des balises sémantiques : des balises dont le nom indique clairement leur rôle. Elles améliorent la lisibilité du code, le référencement naturel (SEO) et l'accessibilité.

<!-- Structure sémantique complète d'une page -->
<header>
  <nav aria-label="Navigation principale">
    <ul>
      <li><a href="/">Accueil</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main id="main-content">

  <article>
    <header>
      <h1>Titre de l'article</h1>
      <time datetime="2026-04-14">14 avril 2026</time>
    </header>

    <section>
      <h2>Première partie</h2>
      <p>Contenu de la section...</p>
    </section>

    <section>
      <h2>Deuxième partie</h2>
      <p>Autre contenu...</p>
    </section>
  </article>

  <aside aria-label="Articles connexes">
    <h2>À lire aussi</h2>
    <ul>
      <li><a href="/css-flexbox">Maîtriser Flexbox</a></li>
    </ul>
  </aside>

</main>

<footer>
  <p>&copy; 2026 AngularForAll — Tous droits réservés</p>
</footer>

Rôle de chaque balise sémantique

<header> — En-tête de la page ou d'une section. Contient généralement le logo, le titre, la navigation.
<nav> — Bloc de navigation. Ne s'utilise que pour les ensembles de liens de navigation principaux ou secondaires.
<main> — Contenu principal de la page, unique par document. Les moteurs de recherche lui accordent un poids important.
<article> — Contenu autonome et redistribuable indépendamment (article de blog, carte produit, commentaire).
<section> — Regroupe du contenu thématiquement lié. Doit idéalement contenir un titre.
<aside> — Contenu secondaire ou complémentaire (sidebar, encart, publicité, biographie de l'auteur).
<footer> — Pied de page de la page ou d'une section. Contient mentions légales, liens utiles, copyright.
<time> — Représente une date ou heure. L'attribut datetime fournit le format machine (ISO 8601).
<figure> / <figcaption> — Encapsule une image, un schéma ou du code avec sa légende associée.

À retenir : <div> et <span> n'ont aucune signification sémantique. Utilisez-les uniquement comme conteneurs de mise en forme CSS/JS, jamais à la place de balises sémantiques.

Les balises de texte essentielles

Le texte est le contenu principal de la majorité des pages web. HTML propose un ensemble de balises pour structurer et mettre en valeur le contenu textuel.

Titres : h1 à h6

Les titres créent une hiérarchie de contenu. Chaque page doit avoir un seul <h1> (le titre principal), puis des <h2> pour les grandes sections, des <h3> pour les sous-sections, etc.

<h1>Titre principal de la page (unique)</h1>
  <h2>Grande section</h2>
    <h3>Sous-section</h3>
      <h4>Sous-sous-section</h4>
  <h2>Autre grande section</h2>
    <h3>Nouvelle sous-section</h3>

Note SEO : Ne sautez jamais de niveaux (ex. h1 → h3 sans h2). Les moteurs de recherche et les lecteurs d'écran parcourent la hiérarchie des titres pour comprendre la structure du document.

Paragraphes, emphase et mise en valeur

<!-- Paragraphe basique -->
<p>HTML est le langage de base du web.</p>

<!-- Texte important (gras sémantique) -->
<p>Appuyez sur <strong>Ctrl + S</strong> pour sauvegarder.</p>

<!-- Emphase (italique sémantique) -->
<p>Ce terme <em>doit être compris</em> avant de continuer.</p>

<!-- Texte inline sans signification sémantique -->
<p>Modifier la <span class="highlight">couleur</span> via CSS.</p>

<!-- Saut de ligne (rare, éviter pour la mise en page) -->
<p>Première ligne.<br>Deuxième ligne.</p>

<!-- Séparateur thématique -->
<hr>

<!-- Citation -->
<blockquote cite="https://www.w3.org/">
  <p>Le Web est pour tous.</p>
  <footer>— Tim Berners-Lee, <cite>W3C</cite></footer>
</blockquote>

<!-- Code inline -->
<p>Utilisez <code>console.log()</code> pour déboguer.</p>

<!-- Texte barré / mis en valeur -->
<p>Prix : <s>29,99 €</s> <mark>19,99 €</mark></p>

<!-- Exposant et indice -->
<p>H<sub>2</sub>O — E = mc<sup>2</sup></p>

À retenir : <strong> et <b> rendent tous deux le texte en gras visuellement, mais <strong> indique une importance sémantique (lu avec une emphase par les lecteurs d'écran), alors que <b> est purement stylistique. Même logique entre <em> et <i>.

Les liens et les images

Les liens et les images sont au cœur du web. La balise <a> crée des hyperliens — c'est ce qui rend le web "hyper" — et <img> intègre des images dans le document.

La balise <a> — les liens

<!-- Lien interne (même site) -->
<a href="/blog/html-fondamentaux">Lire l'article sur le HTML</a>

<!-- Lien externe (autre site) -->
<a href="https://developer.mozilla.org/fr/" target="_blank" rel="noopener noreferrer">
  MDN Web Docs
</a>

<!-- Lien vers une ancre dans la même page -->
<a href="#introduction">Aller à l'introduction</a>

<!-- Lien email -->
<a href="mailto:contact@angularforall.com">Nous contacter</a>

<!-- Lien téléphone (mobile) -->
<a href="tel:+33612345678">+33 6 12 34 56 78</a>

<!-- Lien de téléchargement -->
<a href="/assets/cv.pdf" download="CV-Dev-Web.pdf">
  Télécharger le CV (PDF)
</a>

Sécurité : Toujours ajouter rel="noopener noreferrer" sur les liens target="_blank". Sans cela, la page cible peut accéder à window.opener et rediriger votre page — une faille de sécurité connue sous le nom de reverse tabnapping.

La balise <img> — les images

<!-- Image basique avec alt obligatoire -->
<img src="assets/images/logo.png" alt="Logo AngularForAll">

<!-- Image responsive -->
<img
  src="assets/images/hero.jpg"
  alt="Développeur web travaillant sur du code HTML"
  width="800"
  height="450"
  loading="lazy"
  decoding="async"
>

<!-- Image avec srcset pour différentes résolutions -->
<img
  src="photo.jpg"
  srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
  alt="Illustration d'une page web"
>

<!-- Image avec légende via figure/figcaption -->
<figure>
  <img src="schema-html.png" alt="Schéma de la structure HTML">
  <figcaption>Structure hiérarchique d'un document HTML5</figcaption>
</figure>

<!-- Image décorative (alt vide = ignorée par les lecteurs d'écran) -->
<img src="separateur-decoratif.svg" alt="">

Performance : Toujours spécifier width et height sur les images. Le navigateur peut réserver l'espace avant le chargement, évitant le Cumulative Layout Shift (CLS) — un critère important pour les Core Web Vitals de Google.

Les listes : ul, ol, dl

HTML propose trois types de listes. Choisir le bon type améliore la sémantique et l'accessibilité du contenu.

Liste non ordonnée — ul (unordered list)

Utilisez <ul> quand l'ordre des éléments n'a pas d'importance.

<!-- Menu de navigation, liste de fonctionnalités, tags -->
<ul>
  <li>HTML — Structure</li>
  <li>CSS — Apparence</li>
  <li>JavaScript — Comportement</li>
</ul>

Liste ordonnée — ol (ordered list)

Utilisez <ol> quand l'ordre est important (étapes, classement, procédures).

<!-- Étapes d'une procédure -->
<ol>
  <li>Installer Node.js</li>
  <li>Créer un nouveau projet Angular</li>
  <li>Lancer le serveur de développement</li>
</ol>

<!-- Commencer à un autre numéro -->
<ol start="5">
  <li>Cinquième étape</li>
  <li>Sixième étape</li>
</ol>

<!-- Liste inversée -->
<ol reversed>
  <li>Troisième (affiché comme 3)</li>
  <li>Deuxième (affiché comme 2)</li>
  <li>Premier (affiché comme 1)</li>
</ol>

Liste de définition — dl, dt, dd

Moins connue mais très utile pour les glossaires, les métadonnées, les FAQ ou les paires clé/valeur.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — langage de structure des pages web.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — langage de mise en forme.</dd>

  <dt>JavaScript</dt>
  <dd>Langage de script côté client pour l'interactivité.</dd>
  <dd>Peut aussi être utilisé côté serveur avec Node.js.</dd>
</dl>

À retenir : Les listes peuvent être imbriquées. Un <li> peut contenir un <ul> ou <ol> enfant pour créer des listes à plusieurs niveaux. Mais attention à ne pas abuser des niveaux d'imbrication — 3 niveaux maximum est une bonne règle.

Les formulaires et leur accessibilité

Les formulaires sont le principal moyen par lequel les utilisateurs interagissent avec une application web : connexion, inscription, recherche, contact. Un formulaire bien construit est à la fois fonctionnel et accessible.

Structure complète d'un formulaire accessible

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

  <!-- Champ texte simple -->
  <div class="form-group">
    <label for="nom">Nom complet <span aria-hidden="true">*</span></label>
    <input
      type="text"
      id="nom"
      name="nom"
      placeholder="ex: Marie Dupont"
      required
      autocomplete="name"
      aria-required="true"
    >
  </div>

  <!-- Champ email -->
  <div class="form-group">
    <label for="email">Adresse email</label>
    <input
      type="email"
      id="email"
      name="email"
      placeholder="exemple@domaine.fr"
      required
      autocomplete="email"
    >
  </div>

  <!-- Champ mot de passe -->
  <div class="form-group">
    <label for="mdp">Mot de passe</label>
    <input
      type="password"
      id="mdp"
      name="password"
      minlength="8"
      aria-describedby="mdp-aide"
      autocomplete="new-password"
    >
    <small id="mdp-aide">Au moins 8 caractères, une majuscule, un chiffre.</small>
  </div>

  <!-- Liste déroulante -->
  <div class="form-group">
    <label for="sujet">Sujet</label>
    <select id="sujet" name="sujet">
      <option value="">-- Choisissez --</option>
      <option value="question">Question technique</option>
      <option value="bug">Signaler un bug</option>
      <option value="autre">Autre</option>
    </select>
  </div>

  <!-- Zone de texte -->
  <div class="form-group">
    <label for="message">Message</label>
    <textarea
      id="message"
      name="message"
      rows="5"
      maxlength="1000"
      placeholder="Votre message..."
    ></textarea>
  </div>

  <!-- Cases à cocher -->
  <fieldset>
    <legend>Technologies maîtrisées</legend>
    <label>
      <input type="checkbox" name="techno" value="html"> HTML
    </label>
    <label>
      <input type="checkbox" name="techno" value="css"> CSS
    </label>
    <label>
      <input type="checkbox" name="techno" value="js"> JavaScript
    </label>
  </fieldset>

  <!-- Boutons -->
  <button type="submit">Envoyer le message</button>
  <button type="reset">Réinitialiser</button>

</form>

Types d'inputs HTML5 importants

type="text" — Champ texte libre
type="email" — Valide le format email + ouvre un clavier adapté sur mobile
type="password" — Masque le texte saisi
type="number" — Champ numérique avec min, max, step
type="date" — Sélecteur de date natif du navigateur
type="tel" — Ouvre le clavier téléphone sur mobile
type="search" — Champ de recherche avec bouton d'effacement
type="range" — Curseur pour une valeur dans une plage
type="color" — Sélecteur de couleur natif
type="file" — Sélection de fichier avec accept et multiple
type="hidden" — Valeur invisible envoyée avec le formulaire (token CSRF, etc.)
type="radio" — Choix unique parmi plusieurs options (groupés par name)
type="checkbox" — Choix multiple

Accessibilité formulaires : Chaque <input> doit avoir un <label> associé via l'attribut for (correspondant à l'id de l'input). Ne jamais utiliser uniquement le placeholder comme label — il disparaît dès que l'utilisateur tape, ce qui est problématique pour les personnes ayant des troubles cognitifs.

Les tableaux HTML

Les tableaux HTML servent à afficher des données tabulaires : tarifs, comparatifs, emplois du temps, résultats financiers. Ils ne doivent jamais être utilisés pour la mise en page — c'est le rôle du CSS.

<table>
  <caption>Comparatif des technologies front-end</caption>

  <thead>
    <tr>
      <th scope="col">Technologie</th>
      <th scope="col">Courbe d'apprentissage</th>
      <th scope="col">Popularité 2026</th>
      <th scope="col">Écosystème</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Angular</th>
      <td>Élevée</td>
      <td>★★★★☆</td>
      <td>Très riche</td>
    </tr>
    <tr>
      <th scope="row">React</th>
      <td>Moyenne</td>
      <td>★★★★★</td>
      <td>Très riche</td>
    </tr>
    <tr>
      <th scope="row">Vue.js</th>
      <td>Faible</td>
      <td>★★★★☆</td>
      <td>Riche</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="4">Source : State of JS 2026</td>
    </tr>
  </tfoot>

</table>

Attributs importants

<caption> — Titre du tableau, indispensable pour l'accessibilité.
scope="col" — Sur un <th>, indique que la cellule est un en-tête de colonne.
scope="row" — Sur un <th>, indique que la cellule est un en-tête de ligne.
colspan — Fusionne des cellules sur plusieurs colonnes.
rowspan — Fusionne des cellules sur plusieurs lignes.

Accessibilité : L'association des cellules <td> avec leurs en-têtes <th> via scope ou headers est essentielle pour les utilisateurs de lecteurs d'écran. Sans cela, les données tabulaires deviennent incompréhensibles.

Accessibilité en HTML

L'accessibilité web (a11y) consiste à rendre les pages utilisables par tous, y compris les personnes en situation de handicap (visuel, moteur, cognitif, auditif). Un bon HTML est déjà la première étape vers un web accessible.

Les ARIA roles et attributs

ARIA (Accessible Rich Internet Applications) ajoute de la sémantique là où HTML seul ne suffit pas. La règle d'or : n'utilisez ARIA que si aucune balise HTML native ne peut faire le travail.

<!-- Role landmark (redondant si on utilise <nav>, mais utile pour des <div>) -->
<div role="navigation" aria-label="Menu principal">...</div>

<!-- Bouton déclenché dynamiquement (état) -->
<button
  aria-expanded="false"
  aria-controls="menu-id"
  onclick="toggleMenu()"
>
  Menu
</button>
<ul id="menu-id" hidden>
  <li><a href="/">Accueil</a></li>
</ul>

<!-- Lien avec description supplémentaire -->
<a href="/article-html" aria-label="Lire l'article : Ce que tu dois comprendre sur le HTML">
  Lire la suite
</a>

<!-- Zone mise à jour dynamiquement (SPA, notifications) -->
<div aria-live="polite" aria-atomic="true" id="notification">
  <!-- Les lecteurs d'écran annoncent les changements ici -->
</div>

<!-- Masquer visuellement mais garder accessible aux lecteurs d'écran -->
<span class="sr-only">Chargement en cours...</span>

<!-- Ignorer un élément décoratif par les lecteurs d'écran -->
<svg aria-hidden="true" focusable="false">...</svg>

Ordre de tabulation et focus

<!-- Navigation au clavier — tab suit l'ordre naturel du DOM -->
<a href="/accueil">Accueil</a>   <!-- tabindex="0" implicite -->
<button type="submit">Valider</button>   <!-- tabindex="0" implicite -->

<!-- Forcer un élément non interactif à être focusable -->
<div tabindex="0" role="button" onclick="doSomething()">
  Élément focusable
</div>

<!-- Exclure un élément de la navigation clavier -->
<div tabindex="-1" id="modal">
  <!-- Focus géré programmatiquement via JS : modal.focus() -->
</div>

<!-- Lien d'évitement (skip link) pour sauter la nav -->
<a href="#main-content" class="skip-link">
  Aller au contenu principal
</a>

Toutes les images ont un attribut alt (vide si décorative)
Chaque input a un <label> associé
Contraste couleurs minimum 4.5:1 (texte normal) ou 3:1 (grand texte)
La page est navigable entièrement au clavier
Pas de contenu uniquement basé sur la couleur
Les liens ont un texte descriptif (pas "cliquez ici")
L'attribut lang est défini sur <html>
Valider avec WAVE ou axe DevTools

Erreurs fréquentes à éviter

Même avec de l'expérience, certaines erreurs HTML persistent. Les identifier permet de les corriger proactivement et de produire un code plus robuste.

1. Mauvais imbrication des éléments

<!-- ❌ Incorrect : les balises de bloc ne peuvent pas être dans des balises inline -->
<span>
  <div>Texte</div>
</span>

<!-- ❌ Incorrect : <p> ne peut pas contenir de <div> -->
<p>
  Texte
  <div>Contenu</div>
</p>

<!-- ✅ Correct -->
<div>
  <p>Texte valide dans un paragraphe.</p>
</div>

2. Utiliser <br> pour la mise en page

<!-- ❌ Incorrect : utiliser <br> pour créer de l'espace -->
<p>Paragraphe un.</p>
<br>
<br>
<p>Paragraphe deux.</p>

<!-- ✅ Correct : utiliser CSS (margin, padding) pour l'espacement -->
<p style="margin-bottom: 2rem;">Paragraphe un.</p>
<p>Paragraphe deux.</p>

3. Plusieurs <h1> sur la même page

<!-- ❌ Incorrect : plusieurs h1 brisent la hiérarchie SEO -->
<h1>Titre principal</h1>
<h1>Autre titre important</h1>

<!-- ✅ Correct : un seul h1, utiliser h2 pour les sections -->
<h1>Titre principal de la page</h1>
<h2>Première section importante</h2>
<h2>Deuxième section importante</h2>

4. Images sans attribut alt

<!-- ❌ Incorrect : alt manquant -->
<img src="photo.jpg">

<!-- ❌ Incorrect : alt non descriptif -->
<img src="photo.jpg" alt="image">

<!-- ✅ Correct : alt descriptif -->
<img src="photo.jpg" alt="Développeur consultant du code sur deux écrans">

<!-- ✅ Correct : image décorative (alt vide) -->
<img src="ligne-decorative.svg" alt="">

5. Balises dépréciées ou à éviter

<center> → utiliser CSS text-align: center ou margin: auto
<font> → utiliser CSS font-family, color, font-size
<marquee> → utiliser CSS animations
<blink> → supprimé des navigateurs modernes
<frame> / <frameset> → utiliser <iframe> si nécessaire
<table> pour la mise en page → utiliser CSS Grid ou Flexbox

6. Oublier les balises fermantes ou auto-fermantes

<!-- ❌ Oublier de fermer une balise -->
<ul>
  <li>Élément 1
  <li>Élément 2
</ul>

<!-- ✅ Correct -->
<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
</ul>

<!-- Balises auto-fermantes (void elements) : pas de tag de fermeture -->
<img src="..." alt="...">   <!-- pas de </img> -->
<br>   <!-- pas de </br> -->
<hr>   <!-- pas de </hr> -->
<input type="text">   <!-- pas de </input> -->
<meta charset="UTF-8">   <!-- pas de </meta> -->
<link rel="stylesheet" href="style.css">   <!-- pas de </link> -->

Outil recommandé : Utilisez le validateur officiel du W3C — validator.w3.org — pour détecter automatiquement toutes les erreurs HTML de votre page. C'est gratuit, précis et indispensable avant toute mise en production.

Conclusion et ressources

Le HTML est souvent perçu comme "simple" parce qu'on peut obtenir quelque chose de visible rapidement. Mais sa maîtrise profonde — sémantique, accessibilité, performance, validité — est ce qui sépare un code moyen d'un code professionnel. Chaque balise a un sens. Chaque attribut a un rôle.

Retenez ces principes fondamentaux :

Toujours commencer par <!DOCTYPE html> et définir lang sur <html>
Utiliser les balises sémantiques HTML5 (header, main, article, section…)
Respecter la hiérarchie des titres (un seul <h1> par page)
Toujours associer <label> à chaque <input>
Ne jamais omettre l'attribut alt sur les images
Ajouter rel="noopener noreferrer" sur les liens externes en target="_blank"
Valider son HTML avec le W3C Validator avant de mettre en ligne
Tester la navigation au clavier et avec un lecteur d'écran

Ressources pour aller plus loin

MDN Web Docs — developer.mozilla.org/fr/docs/Web/HTML — La référence absolue, maintenue par Mozilla, disponible en français.
W3C Validator — validator.w3.org — Validez la conformité de votre HTML en ligne.
HTML Living Standard (WHATWG) — html.spec.whatwg.org — La spécification officielle et vivante de HTML.
WebAIM — webaim.org — Ressources dédiées à l'accessibilité web.
Can I Use — caniuse.com — Vérifiez la compatibilité navigateurs de chaque fonctionnalité HTML/CSS.
WAVE Accessibility Tool — wave.webaim.org — Extension navigateur pour auditer l'accessibilité de vos pages.

La suite logique : Après avoir maîtrisé HTML, l'étape suivante est le CSS pour la mise en forme, puis JavaScript pour l'interactivité. Ces trois technologies forment le trio indissociable du développement front-end moderne.