HTML — Structure sémantique et formulaires
Balises sémantiques HTML5, formulaires et tableaux
Concepts Théoriques
Jusqu'ici, tout votre contenu est dans le <body> sans organisation. Ce chapitre introduit les balises qui donnent du sens à la structure de votre page et les formulaires qui permettent à l'utilisateur d'interagir avec votre site.
Les balises sémantiques HTML5
Avant HTML5, les développeurs utilisaient des <div> pour tout : <div class="header">, <div class="nav">, <div class="footer">. Le problème : un <div> ne dit rien sur le contenu qu'il contient. C'est une boîte vide sans signification.
HTML5 a introduit des balises sémantiques — elles décrivent le RÔLE de leur contenu :
<header> — L'en-tête de la page ou d'une section. Contient typiquement le logo, le titre du site et la navigation. Ne pas confondre avec <head> (qui contient les métadonnées invisibles).
<nav> — La navigation. Contient les liens de menu principaux. Un site peut avoir plusieurs <nav> (menu principal, menu du footer, fil d'Ariane).
<main> — Le contenu principal de la page. Un seul <main> par page. Il contient le contenu unique à cette page (pas le header, pas le footer, pas la sidebar — ce qui change d'une page à l'autre).
<section> — Un groupe de contenu thématiquement lié. Chaque section a généralement un titre (<h2>). Exemples : section "À propos", section "Projets", section "Contact".
<article> — Un contenu autonome et indépendant. Il pourrait être extrait de la page et avoir du sens seul. Exemples : un article de blog, une carte de produit, un commentaire.
<aside> — Un contenu secondaire, annexe. Exemples : une sidebar, des liens connexes, une publicité.
<footer> — Le pied de page. Contient le copyright, les liens légaux, les réseaux sociaux, les informations de contact.
Pourquoi utiliser les balises sémantiques au lieu de <div> ?
- SEO — Google comprend mieux votre page. Un <nav> lui dit "voici le menu", un <main> lui dit "voici le contenu important".
- Accessibilité — Les lecteurs d'écran (pour les malvoyants) utilisent ces balises pour naviguer. Un utilisateur peut sauter directement au <main> ou au <nav>.
- Maintenabilité — En relisant votre code 6 mois plus tard, <header> est immédiatement compréhensible. <div class="header"> demande de lire la classe.
> Règle : Si une balise sémantique existe pour ce que vous voulez exprimer, utilisez-la. Réservez <div> pour les cas où aucune balise sémantique ne correspond — quand vous avez besoin d'un conteneur purement visuel pour le CSS.
Le conteneur générique — <div>
<div> est un conteneur bloc sans signification sémantique. Il sert uniquement à grouper des éléments pour leur appliquer du CSS ou du JavaScript. Exemples : <div class="card-body">, <div class="projects-grid">.
<div> vs <section> : utilisez <section> quand le groupe a un thème et un titre. Utilisez <div> quand c'est juste un conteneur de mise en page.
Les formulaires
Les formulaires permettent à l'utilisateur d'envoyer des données : s'inscrire, se connecter, envoyer un message, chercher un produit.
La balise <form> englobe tous les champs du formulaire. Attributs importants :
- action — L'URL vers laquelle les données sont envoyées
- method — La méthode HTTP : "GET" (données dans l'URL) ou "POST" (données dans le corps de la requête, plus sécurisé)
Les champs de saisie — <input> : La balise la plus polyvalente du HTML. Son comportement change selon l'attribut type :
- type="text" — Champ texte classique
- type="email" — Champ email (le navigateur vérifie le format)
- type="password" — Les caractères sont masqués
- type="number" — N'accepte que des chiffres
- type="tel" — Clavier numérique sur mobile
- type="url" — Vérifie le format URL
- type="date" — Affiche un sélecteur de date
- type="checkbox" — Case à cocher
- type="radio" — Bouton radio (choix unique dans un groupe)
- type="file" — Sélecteur de fichier
- type="submit" — Bouton d'envoi du formulaire
La zone de texte — <textarea> : Pour les textes longs (messages, commentaires). L'attribut rows définit la hauteur.
Le menu déroulant — <select> avec <option> : Pour choisir parmi une liste prédéfinie.
L'étiquette — <label> : Associe un texte descriptif à un champ. Obligatoire pour l'accessibilité. L'attribut for doit correspondre à l'id du champ. Cliquer sur le label active le champ.
Le bouton — <button> : Toujours préférer <button type="submit"> à <input type="submit"> — le <button> peut contenir du HTML (icône + texte).
Les attributs de validation natifs (le navigateur vérifie automatiquement) :
- required — Le champ ne peut pas être vide
- minlength="5" / maxlength="100" — Longueur minimum / maximum
- min="0" / max="100" — Valeur minimum / maximum (pour les nombres)
- pattern="[0-9]{9}" — Expression régulière personnalisée
- placeholder="Exemple..." — Texte indicatif qui disparaît quand on tape
Les tableaux HTML — <table>
Les tableaux servent à afficher des données tabulaires (prix, horaires, comparaisons). N'utilisez JAMAIS un tableau pour la mise en page — c'est une pratique obsolète des années 2000.
Structure d'un tableau :
- <table> — Le conteneur du tableau
- <thead> — L'en-tête (titres des colonnes)
- <tbody> — Le corps (les données)
- <tr> — Une ligne (table row)
- <th> — Une cellule d'en-tête (en gras par défaut)
- <td> — Une cellule de données
Balises utiles que les débutants ignorent
<details> et <summary> — Un accordéon natif sans JavaScript. <summary> est le titre cliquable, le reste du contenu de <details> apparaît/disparaît au clic.
<figure> et <figcaption> — Associe une image (ou un graphique, une vidéo) à sa légende.
<time datetime="2026-03-21"> — Rend les dates compréhensibles par Google et les machines.
<abbr title="HyperText Markup Language">HTML</abbr> — Explique une abréviation au survol.