HTML donne du sens au contenu avant même qu’il soit stylé.

1. La structure minimale

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mon projet</title>
  </head>
  <body>
    <h1>Titre principal</h1>
    <p>Mon premier contenu.</p>
  </body>
</html>

<!doctype html> indique un document HTML moderne. L’attribut lang="fr" aide notamment les lecteurs d’écran à prononcer correctement le contenu. Le head contient les métadonnées ; le body, le contenu affiché.

2. La sémantique : le bon élément pour le bon rôle

Un élément HTML doit décrire ce que représente le contenu. Un bouton doit être un <button>, un lien une balise <a>, un titre un élément <h1> à <h6>. Cette discipline apporte gratuitement une partie du comportement clavier, de l’accessibilité et de la compréhension machine.

3. Titres, paragraphes et hiérarchie

Les titres structurent le document. Le plus important n’est pas leur taille visuelle mais leur relation logique. Utilise généralement un h1 principal puis des h2 pour les grandes sections, et descends de niveau lorsque le contenu est réellement imbriqué.

4. Liens et images

Un bon texte de lien doit annoncer la destination : « Lire le guide CSS » est plus utile que « cliquez ici ». Pour les images, l’attribut alt décrit la fonction ou l’information portée par l’image.

<a href="/cours/css.html">Lire le cours CSS</a>
<img src="diagramme.png" alt="Schéma des couches d’une application web">

Une image purement décorative peut avoir alt="" afin de ne pas ajouter du bruit aux technologies d’assistance.

5. Listes et tableaux

Utilise <ul> pour une liste sans ordre, <ol> lorsqu’il existe une séquence, et les éléments de tableau uniquement pour de vraies données tabulaires.

<table>
  <caption>Résultats</caption>
  <thead>
    <tr><th scope="col">Nom</th><th scope="col">Score</th></tr>
  </thead>
  <tbody>...</tbody>
</table>

6. Formulaires accessibles

Chaque champ doit avoir un libellé compréhensible. Le name identifie la donnée envoyée, le type décrit le type d’entrée, et les attributs natifs comme required, minlength ou autocomplete peuvent améliorer l’expérience.

<label for="email">Adresse e-mail</label>
<input id="email" name="email" type="email" autocomplete="email" required>

Un placeholder ne doit pas remplacer un vrai label : il disparaît pendant la saisie et peut être difficile à interpréter.

7. Le <head> : titre, viewport et métadonnées

Le titre de page doit être spécifique. La métadonnée viewport évite un rendu desktop réduit sur mobile. Une description peut aider à présenter la page dans certains moteurs de recherche, même si elle ne garantit pas l’extrait affiché.

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Cours HTML pour débuter.">

8. Accessibilité : commencer par le HTML natif

• conserver un ordre de source logique ;
• rendre les actions utilisables au clavier ;
• utiliser de vrais boutons et liens ;
• associer les labels aux champs ;
• écrire des textes alternatifs pertinents ;
• ne pas dépendre uniquement de la couleur pour transmettre une information.

MDN insiste sur ce principe : un HTML sémantique apporte déjà de nombreux mécanismes d’accessibilité intégrés au navigateur.

9. Déboguer son HTML

Lis d’abord la structure dans les outils développeur du navigateur. Vérifie les balises mal imbriquées, les liens cassés, les images sans alternative et l’ordre des titres. Les validateurs HTML peuvent ensuite compléter cette vérification.