HTML se traduit littéralement par
« langage de balisage hypertexte ». Ce n'est pas un langage de
programmation à proprement parler : on ne lui demande pas
de calculer, mais de décrire la structure d'un document —
un peu comme un plan d'architecte décrit les pièces d'une maison sans en
dicter la décoration.
Chaque page web repose sur trois technologies complémentaires :
HTML — la structure et le contenu (le squelette) ;
CSS — la mise en forme (les vêtements) ;
JavaScript — l'interactivité (les mouvements).
La version en vigueur aujourd'hui est HTML 5. Elle
apporte des balises sémantiques modernes, la prise en charge native
de l'audio et de la vidéo, et des formulaires enrichis.
Bon à savoir :
le HTML est interprété par le navigateur — il n'est jamais compilé.
On peut donc modifier un fichier .html et le recharger
immédiatement pour voir le résultat.
Une balise est un mot-clé placé entre chevrons
(< et >) qui indique au navigateur
comment interpréter le contenu qui la suit. On distingue deux grandes
familles : les balises par paire et les balises
auto-fermantes.
Sensibles à la casse :
par convention et pour rester compatible avec tous les navigateurs,
les balises HTML s'écrivent toujours en minuscules.
2.1 Balises ouvrantes et fermantes
Ces balises fonctionnent par paire pour encadrer un contenu :
La balise ouvrante se place au début de l'élément
et contient son nom entre chevrons :
<nom>.
La balise fermante se place à la fin et reprend
le même nom précédé d'une barre oblique :
</nom>.
Exemple avec un titre de premier niveau :
<h1>Bienvenue chez AI29</h1>
Bienvenue chez AI29
Ici, <h1> ouvre l'élément,
</h1> le ferme,
et le texte entre les deux — Bienvenue chez AI29 —
est le contenu réellement affiché sur la page.
2.2 Balises auto-fermantes
Certaines balises n'entourent pas de contenu : elles se suffisent à
elles-mêmes. On les appelle auto-fermantes (ou
« orphelines »). Elles servent typiquement à insérer un élément
ponctuel : une image, un saut de ligne, un séparateur horizontal.
Exemple pour insérer un saut de ligne :
<br />
Ou pour insérer une image :
<imgsrc="photo.jpg"alt="Ordinateur assemblé par AI29"/>
Note HTML 5 :
la barre oblique finale (/>) est facultative en HTML 5.
Écrire <br> ou
<br /> revient au même.
On garde la barre par cohérence visuelle avec les balises par paire.
Un attribut est une information supplémentaire que
l'on attache à une balise pour préciser son comportement ou ses
caractéristiques. Il se place toujours dans la balise
ouvrante (ou dans la balise auto-fermante), jamais dans
la balise fermante.
La syntaxe est simple :
<balisenom-attribut="valeur">
Le nom de l'attribut est en minuscules et sans espace.
La valeur est encadrée par des guillemets droits (" ").
Une balise peut avoir plusieurs attributs, séparés par une espace.
Exemple concret — un lien hypertexte qui pointe vers une adresse :
<ahref="https://ai29.tech"title="Site officiel AI29">Visiter le site</a>
Attributs universels :
certains attributs peuvent être appliqués à quasiment toutes les
balises. Les plus courants sont id (identifiant unique),
class (regroupement pour le style),
title (info-bulle) et lang (langue du contenu).
Page blanche : le <body> est encore vide.
Seul le <title> apparaît, dans l'onglet.
C'est le point de départ de toute nouvelle page :
un <head> qui contient
les métadonnées (encodage, viewport, titre de l'onglet…) et un
<body> encore vide,
prêt à recevoir le contenu visible.
Décryptage des méta :charset="UTF-8" garantit un affichage correct des
caractères accentués (é, è, à, ç…).
viewport indique au navigateur mobile qu'il doit adapter
la largeur à celle de l'écran — sans ça, les téléphones affichent
une version « bureau » réduite illisible.
Un commentaire est un texte que l'on inscrit dans
le code source pour l'expliquer ou pour laisser une note à un
collègue (ou à toi-même dans six mois). Le navigateur les ignore
complètement : ils n'apparaissent jamais dans la page rendue.
Syntaxe :
<!-- Ceci est un commentaire -->
Un commentaire peut aussi s'étendre sur plusieurs lignes :
<!--
Section « À propos » — à revoir avec Stéphane
avant la mise en ligne du site.
-->
Rien ne s'affiche : le navigateur ignore les deux commentaires.
À quoi servent-ils, concrètement ?
Documenter une zone de code non triviale ;
Désactiver temporairement un morceau de HTML sans le supprimer ;
Marquer des repères visuels dans un long fichier (séparateurs de sections).
À ne pas oublier :
les commentaires HTML sont visibles par toute personne qui affiche
la source de la page (clic droit → « Afficher la source »).
Ne jamais y écrire de mot de passe, de clé d'API
ou d'information confidentielle.
Pour structurer un texte, HTML propose six niveaux de titres et une
balise dédiée au paragraphe.
6.1 Les titres — de <h1> à <h6>
Il existe six niveaux hiérarchiques, du plus important
(<h1>) au moins important
(<h6>) :
<h1>Titre principal de la page</h1><h2>Grande section</h2><h3>Sous-section</h3><h4>Sous-sous-section</h4><h5>Niveau intermédiaire</h5><h6>Niveau le plus bas</h6>
Titre principal de la page
Grande section
Sous-section
Sous-sous-section
Niveau intermédiaire
Niveau le plus bas
Règle d'or :
un seul <h1> par page —
c'est le titre principal, celui qui résume le sujet.
Les titres suivants doivent respecter la hiérarchie logique
(on ne saute pas de h2 à h5).
Les moteurs de recherche et les lecteurs d'écran s'en servent
pour comprendre la structure du document.
6.2 Les paragraphes — <p>
Un paragraphe se déclare avec la balise <p> :
<p>Le paragraphe est l'unité de base pour organiser du texte. Le navigateur ajoute automatiquement un espacement au-dessus et en dessous.</p>
Le paragraphe est l'unité de base pour organiser du texte. Le navigateur ajoute automatiquement un espacement au-dessus et en dessous.
6.3 Le saut de ligne — <br>
Pour forcer un retour à la ligne à l'intérieur d'un
paragraphe, sans en créer un nouveau, on utilise la balise
auto-fermante <br /> :
<p>Vente, montage, réparation.<br />
Maintenance et conseil sur mesure.</p>
Vente, montage, réparation.
Maintenance et conseil sur mesure.
À éviter :
enchaîner plusieurs <br>
pour aérer une page. Cela mélange contenu et présentation.
Pour espacer, on utilisera plus tard le CSS (marges, padding).
HTML propose plusieurs balises pour enrichir le
texte : mettre en valeur un mot, souligner un extrait important,
indiquer une correction… La plupart ont une signification
sémantique (elles décrivent la nature de
l'accentuation), et non purement décorative.
7.1 Emphase et importance
<strong> — indique une
importance forte. Rendu par défaut en gras.
<em> — indique une
emphase (accent). Rendu par défaut en italique.
<mark> — surligne
un extrait pertinent (comme au feutre fluo).
<p>Le diagnostic est <strong>gratuit</strong>,
et le devis vous est remis <em>avant</em> toute intervention.</p>
Le diagnostic est gratuit,
et le devis vous est remis avant toute intervention.
7.2 Barrer, souligner, modifier
<s> — texte
barré pour indiquer qu'il n'est plus pertinent
(ancien prix, information périmée) ;
<u> — souligné
(à utiliser avec précaution : ressemble à un lien) ;
<del> — texte
supprimé par rapport à une version précédente ;
<ins> — texte
inséré par rapport à une version précédente.
Exemple :
<p>Nettoyage complet : <s>50 €</s> 40 € ce mois-ci (tarif fictif).</p><p>L'atelier ouvre le <del>lundi</del><ins>mardi</ins> à 9 h.</p>
Nettoyage complet : 50 € 40 € ce mois-ci (tarif fictif).
L'atelier ouvre le lundi mardi à 9 h.
7.3 Indices et exposants
Pour écrire une formule chimique ou mathématique, on dispose de deux
balises :
<sub> —
indice (en bas). Exemple : H2O
<sup> —
exposant (en haut). Exemple : E = mc2
<p>La formule de l'eau est H<sub>2</sub>O.</p><p>Un octet vaut 2<sup>8</sup> = 256 valeurs.</p>
La formule de l'eau est H2O.
Un octet vaut 28 = 256 valeurs.
Sémantique avant apparence :<strong> et
<b> donnent tous deux du
gras à l'affichage, mais leur sens diffère :
strong = importance réelle,
b = simple mise en avant visuelle sans importance
supplémentaire (peu utilisé aujourd'hui). Même distinction entre
em (emphase) et i (italique décoratif).
Le lien hypertexte est probablement l'élément le plus emblématique
du web : c'est lui qui permet de naviguer d'une page à
une autre, d'un site à un autre, d'une section à une autre.
Sans lui, le web ne serait qu'une collection de documents isolés.
La balise concernée est <a>
(pour anchor — ancre). Son attribut principal est
href (pour hypertext reference) : il contient
la destination du lien.
8.1 Syntaxe de base
<ahref="destination">Texte du lien</a>
Le texte du lien (entre les balises ouvrante et fermante)
est ce que l'utilisateur voit et sur quoi il clique. La
destination (dans href) est ce que le
navigateur ouvre au clic.
8.2 Les différents types de destinations
Lien vers un site externe — on utilise une URL complète :
Sécurité :
quand on utilise target="_blank", il est
fortement recommandé d'ajouter
rel="noopener". Sans ça, la page ouverte peut, dans
certains cas, prendre le contrôle de l'onglet d'origine (technique
dite du tabnabbing).
8.4 Info-bulle avec title
L'attribut title ajoute une info-bulle qui apparaît
au survol de la souris — utile pour donner un contexte
supplémentaire.
<ahref="https://ai29.tech"title="L'Atelier Informatique du Finistère">AI29</a>
👉 Laisse la souris immobile sur le lien pour voir apparaître l'info-bulle.
8.5 Bonnes pratiques
Texte explicite :
le texte du lien doit décrire sa destination. On évite les
génériques comme « cliquez ici » ou « lien » :
ils sont mauvais pour l'accessibilité (les lecteurs d'écran
listent parfois tous les liens hors contexte) et pour le
référencement.
Préfère : « Consulter nos tarifs », « Télécharger
la brochure », « Envoyer un message ».
Le web n'est pas fait que de texte : images, sons et vidéos
enrichissent l'expérience. HTML 5 propose des balises dédiées
pour chacun.
9.1 Les images — <img>
La balise <img> est
auto-fermante. Elle prend deux attributs
indispensables :
src (source) — le chemin ou l'URL vers
le fichier image ;
alt (alternative) — un texte descriptif
affiché en cas d'échec de chargement et lu par les lecteurs
d'écran.
<imgsrc="images/ordinateur.jpg"alt="PC de bureau assemblé par AI29"/>
Ici, le fichier n'existe pas : le navigateur affiche à sa place le texte de alt. C'est aussi ce texte que lit un lecteur d'écran.
L'attribut alt est obligatoire.
Il rend le contenu accessible aux personnes malvoyantes qui
utilisent un lecteur d'écran, et sert de repli quand l'image
ne charge pas. Pour une image purement décorative, on peut
laisser un alt vide (alt=""), mais
on ne l'omet jamais.
Attributs utiles supplémentaires :
width et height — dimensions en pixels.
Les préciser aide le navigateur à réserver l'espace avant même
que l'image soit chargée (moins de « saut » visuel au
chargement).
loading="lazy" — dit au navigateur de ne charger
l'image que lorsqu'elle approche de l'écran (économie de
bande passante pour les longues pages).
title — info-bulle au survol.
<imgsrc="images/atelier.jpg"alt="Vue de l'atelier AI29 à Morlaix"width="800"height="600"loading="lazy"/>
9.2 Choisir le bon format
JPG — photos, dégradés. Compression forte,
pas de transparence.
PNG — logos, captures d'écran, images avec
transparence. Poids plus élevé que le JPG.
WebP — format moderne, plus léger que JPG et
PNG, gère la transparence. Supporté par tous les navigateurs
récents.
SVG — graphique vectoriel (logo, icône,
schéma). Reste net à toutes les tailles.
9.3 Image légendée — <figure>
Quand une image est accompagnée d'une légende, on les enveloppe
dans <figure> et on
ajoute la légende dans
<figcaption>.
<figure><imgsrc="images/pc-sur-mesure.jpg"alt="Configuration gamer AI29"/><figcaption>Une configuration gamer assemblée en atelier.</figcaption></figure>
Une configuration gamer assemblée en atelier.
9.4 Le son — <audio>
Pour intégrer un fichier audio, on utilise la balise
<audio> avec
l'attribut controls pour afficher le lecteur
intégré du navigateur.
<audiocontrols><sourcesrc="medias/message.mp3"type="audio/mpeg"/>
Votre navigateur ne prend pas en charge la lecture audio.
</audio>
👉 Lance la lecture : le fichier de l'exemple est remplacé par un court bip, celui d'un PC qui démarre.
Le texte à l'intérieur de la balise (« Votre navigateur… »)
sert de message de repli pour les navigateurs qui ne
comprennent pas la balise.
9.5 La vidéo — <video>
Même logique pour la vidéo, avec la balise
<video> :
<videocontrolswidth="640"height="360"><sourcesrc="medias/presentation.mp4"type="video/mp4"/>
Votre navigateur ne prend pas en charge la lecture vidéo.
</video>
Aucune vidéo n'est chargée ici : on voit le lecteur du navigateur et une image d'attente (attribut poster).
Attributs utiles pour audio et video :
controls — affiche les boutons play, pause, volume ;
autoplay — lecture automatique (à utiliser avec parcimonie) ;
loop — lecture en boucle ;
muted — démarre en sourdine.
Plusieurs sources pour un même média :
on peut lister plusieurs balises
<source> avec des
formats différents (MP4, WebM, OGG…). Le navigateur choisit le
premier format qu'il sait lire. C'est un filet de sécurité pour
la compatibilité entre navigateurs.
Sémantique de la puce :
l'apparence de la puce (rond plein, rond vide, carré, tiret…)
sera modifiée plus tard avec le CSS
(list-style-type). En HTML pur, on garde
l'apparence par défaut du navigateur.
10.2 Liste ordonnée — <ol>
Même principe, mais les éléments sont automatiquement numérotés
par le navigateur (1, 2, 3…).
<ol><li>Réception de votre matériel</li><li>Diagnostic gratuit</li><li>Devis détaillé (20 € déductibles)</li><li>Intervention après votre accord</li><li>Restitution et explications</li></ol>
Réception de votre matériel
Diagnostic gratuit
Devis détaillé (20 € déductibles)
Intervention après votre accord
Restitution et explications
La balise <ol> accepte plusieurs attributs utiles :
start — numéro de départ (ex. start="5"
commence à 5) ;
type — style de numérotation :
"1" (défaut), "A" (A, B, C…),
"a" (a, b, c…), "I" (I, II, III…),
"i" (i, ii, iii…) ;
reversed — numérote en ordre décroissant.
<oltype="A"start="3"><li>Troisième option (affichée « C »)</li><li>Quatrième option (affichée « D »)</li></ol>
Troisième option (affichée « C »)
Quatrième option (affichée « D »)
10.3 Liste de descriptions — <dl>
Adaptée aux glossaires, définitions, spécifications techniques.
Elle repose sur trois balises :
<dl> — la liste elle-même (description list) ;
<dt> — le terme à définir (description term) ;
<dd> — sa définition (description details).
<dl><dt>SSD</dt><dd>Disque de stockage à base de mémoire flash, plus rapide qu'un disque dur classique.</dd><dt>RAM</dt><dd>Mémoire vive dans laquelle le système et les logiciels travaillent en direct.</dd><dt>GPU</dt><dd>Processeur dédié au calcul graphique, indispensable pour le jeu et la création visuelle.</dd></dl>
SSD
Disque de stockage à base de mémoire flash, plus rapide qu'un disque dur classique.
RAM
Mémoire vive dans laquelle le système et les logiciels travaillent en direct.
GPU
Processeur dédié au calcul graphique, indispensable pour le jeu et la création visuelle.
Un même terme peut être suivi de plusieurs
<dd> (plusieurs
définitions ou précisions), et inversement plusieurs
<dt> peuvent partager
une même définition.
10.4 Imbrication de listes
On peut placer une liste à l'intérieur d'un
<li> pour créer une
arborescence. Il faut simplement veiller à bien fermer les
balises dans le bon ordre.
<ul><li>Vente
<ul><li>Ordinateurs de bureau</li><li>Ordinateurs portables</li><li>Périphériques</li></ul></li><li>Réparation
<ul><li>Panne matérielle</li><li>Panne logicielle</li></ul></li></ul>
Vente
Ordinateurs de bureau
Ordinateurs portables
Périphériques
Réparation
Panne matérielle
Panne logicielle
Combiner ul et ol :
rien n'empêche d'imbriquer une liste ordonnée dans une non
ordonnée (ou l'inverse). L'indentation dans le code source
(comme dans l'exemple ci-dessus) rend la structure lisible pour
l'humain — le navigateur, lui, ne s'en occupe pas.
Piège classique :
un <li> ne peut
être direct enfant que d'un
<ul>,
<ol> ou
<menu>.
Écrire un <li> tout seul, sans conteneur,
est invalide.
Un tableau HTML sert à présenter des données organisées en
lignes et colonnes : tarifs, plannings, résultats,
comparatifs de configurations… tout ce qui se prête naturellement
à une lecture en grille.
Usage historique à éviter :
dans les années 1990-2000, les tableaux étaient détournés pour
positionner les éléments d'une page (en-tête à gauche,
menu à droite, etc.). Cette pratique est aujourd'hui obsolète :
on réservera <table> aux
vraies données tabulaires. Pour la mise en page,
on utilisera plus tard le CSS (Flexbox, Grid).
11.1 Structure de base
Un tableau se construit avec quatre balises principales :
<table> — le conteneur du tableau ;
<tr> — une ligne (table row) ;
<th> — une cellule d'en-tête (table header) ;
<td> — une cellule de données (table data).
Exemple — quelques tarifs indicatifs de dépannage :
<table><tr><th>Prestation</th><th>Durée</th><th>Tarif</th></tr><tr><td>Diagnostic en atelier</td><td>30 min</td><td>Gratuit</td></tr><tr><td>Nettoyage complet</td><td>1 h</td><td>40 €</td></tr></table>
Prestation
Durée
Tarif
Diagnostic en atelier
30 min
Gratuit
Nettoyage complet
1 h
40 €
À retenir :
les cellules se lisent ligne par ligne, pas colonne par
colonne. On déclare une <tr>,
puis les cellules qu'elle contient, puis on ferme la ligne, et
on passe à la suivante.
11.2 Structurer avec <thead>, <tbody>, <tfoot>
Pour les tableaux plus riches, on peut regrouper les lignes en
trois zones sémantiques :
<thead> — l'en-tête (titres des colonnes) ;
<tbody> — le corps du tableau (les données) ;
<tfoot> — le pied (totaux, notes…).
Visuellement, le rendu par défaut change peu — mais la structure
est bien plus claire, et les lecteurs d'écran s'y repèrent mieux.
Le CSS pourra plus tard figer l'en-tête au défilement.
<table><thead><tr><th>Composant</th><th>Quantité</th><th>Prix</th></tr></thead><tbody><tr><td>Boîtier ATX</td><td>1</td><td>75 €</td></tr><tr><td>SSD 1 To NVMe</td><td>1</td><td>90 €</td></tr></tbody><tfoot><tr><td>Total</td><td>–</td><td>165 €</td></tr></tfoot></table>
Composant
Quantité
Prix
Boîtier ATX
1
75 €
SSD 1 To NVMe
1
90 €
Total
–
165 €
11.3 La légende — <caption>
La balise <caption>
donne un titre au tableau. Elle se place
juste après l'ouverture de
<table>, avant toute
autre balise. Elle est particulièrement importante pour
l'accessibilité : c'est ce que les lecteurs d'écran annoncent
en premier.
<table><caption>Composants disponibles en atelier</caption><tr><th>Référence</th><th>État</th></tr><tr><td>Écran 24″ Full HD</td><td>Neuf</td></tr></table>
Composants disponibles en atelier
Référence
État
Écran 24″ Full HD
Neuf
11.4 Fusionner des cellules — colspan et rowspan
Deux attributs permettent d'étendre une cellule sur plusieurs
colonnes ou plusieurs lignes :
colspan="N" — la cellule s'étend sur
N colonnes ;
rowspan="N" — la cellule s'étend sur
N lignes.
Attention à ne pas « ajouter » de cellules dans les autres lignes
pour compenser la fusion : le navigateur s'en charge tout seul.
Note sur ce rendu :
remarque que « Mardi » et « Mercredi » n'ont chacun qu'une
seule cellule <td>
— la colonne « Matin » est déjà occupée par le
rowspan="2" de la cellule « Diagnostic ».
11.5 Accessibilité — l'attribut scope
Pour aider les lecteurs d'écran à associer chaque
<th> aux bonnes
cellules, on utilise l'attribut scope :
scope="col" — l'en-tête concerne toute la colonne ;
Aucune différence visible : scope sert aux lecteurs d'écran.
Bonne habitude :
combiner un <caption>,
une structure thead/tbody et des
scope sur les th garantit un tableau
correctement lu par les technologies d'assistance —
sans effort supplémentaire côté rendu visuel.
Un formulaire permet à l'utilisateur d'envoyer des
données au site : recherche, contact, inscription,
commande, demande de devis… C'est le principal point d'entrée
d'un site interactif.
À propos des exemples ci-dessous :
les formulaires présentés dans cette section sont
volontairement inertes. Ils ne sont reliés
à aucun serveur : cliquer sur « Envoyer » n'aura aucun effet.
On étudie ici la structure HTML ;
le traitement des données côté serveur relève d'un autre
chapitre (backend, PHP, Node…).
12.1 La balise <form>
Tout formulaire est enveloppé dans une balise
<form>. Elle porte
deux attributs importants :
action — l'adresse à laquelle les données
seront envoyées (généralement une URL côté serveur) ;
method — la méthode HTTP utilisée pour l'envoi :
get (données visibles dans l'URL, utile pour la
recherche) ou post (données transmises dans le
corps de la requête, plus adapté aux formulaires sensibles).
<formaction="/traiter-devis"method="post"><!-- Les champs se placent ici --></form>
GET ou POST ?
Retiens la règle simple :
GET pour lire (rechercher, filtrer),
POST pour écrire (créer, modifier, envoyer un
message, uploader un fichier).
12.2 Les champs de saisie — <input>
La balise <input> est
auto-fermante et couvre à elle seule la plupart
des champs, grâce à son attribut type.
Panorama des types les plus courants :
Types de champs <input> essentiels
type
Usage
text
Texte court sur une seule ligne (nom, prénom…)
email
Adresse email (validation basique intégrée)
password
Mot de passe (caractères masqués à la saisie)
tel
Numéro de téléphone (clavier numérique sur mobile)
L'attribut name est essentiel :
c'est ce nom qui identifie la donnée quand elle arrive au serveur.
Sans name, la valeur du champ n'est pas envoyée
du tout.
12.3 Attributs communs aux champs
La plupart des inputs partagent une palette d'attributs :
name — identifiant côté serveur (obligatoire pour transmettre) ;
id — identifiant côté HTML (pour le lier à un <label>) ;
value — valeur pré-remplie ;
placeholder — texte gris affiché tant que le champ est vide ;
required — le champ doit être rempli pour envoyer ;
disabled — champ inactif, non modifiable, non envoyé ;
readonly — champ affiché mais non modifiable, envoyé quand même ;
Attributs booléens :
certains attributs comme required, disabled,
readonly ou checked n'ont pas besoin de
valeur : leur simple présence suffit à les activer.
12.4 L'étiquette — <label>
Un champ isolé n'est pas utilisable sans indication. La balise
<label> associe un
texte descriptif à un champ, ce qui améliore l'accessibilité et
l'ergonomie (cliquer sur le label active le champ associé).
Toujours utiliser un label :
pour chaque champ de formulaire. Les lecteurs
d'écran s'en servent pour annoncer clairement chaque champ. C'est
aussi ce qui permet, sur mobile, d'agrandir la zone cliquable
(utile pour les cases à cocher et les boutons radio).
12.5 Cases à cocher et boutons radio
Les cases à cocher
(type="checkbox") permettent de sélectionner
plusieurs valeurs indépendantes.
Les boutons radio
(type="radio") permettent de choisir une seule
valeur dans un groupe. Le regroupement se fait via
l'attribut name : tous les radios qui partagent
le même name forment un groupe exclusif.
<label><inputtype="radio"name="contact"value="email"checked/> Par email</label><label><inputtype="radio"name="contact"value="tel"/> Par téléphone</label>
12.6 Zone de texte multi-ligne — <textarea>
Pour un texte long (message, description), on utilise
<textarea> — qui, elle,
n'est pas auto-fermante. La valeur pré-remplie
s'écrit entre les balises, pas dans un attribut
value.
Le menu déroulant offre un choix parmi une liste d'options
prédéfinies. Il combine trois balises :
<select> (le menu),
<option> (chaque
choix) et éventuellement
<optgroup> pour grouper
les options.
<labelfor="machine">Type de machine :</label><selectid="machine"name="machine"><optionvalue="">-- Choisir --</option><optgrouplabel="Fixe"><optionvalue="bureau">PC de bureau</option><optionvalue="gamer">PC gamer</option></optgroup><optgrouplabel="Mobile"><optionvalue="portable">Ordinateur portable</option></optgroup></select>
Sélection multiple :
ajouter l'attribut multiple à
<select> permet de
choisir plusieurs options (Ctrl / Cmd + clic).
12.8 Le bouton — <button>
Les boutons se déclarent avec la balise
<button> ou avec un
<input> de type
submit, reset ou button.
Trois types de boutons :
type="submit" — envoie le formulaire (comportement par défaut) ;
type="reset" — remet tous les champs à leur valeur initiale ;
type="button" — bouton sans action par défaut (destiné à un usage JS).
<buttontype="submit">Envoyer la demande</button><buttontype="reset">Effacer</button>
<button> vs <input type="submit"> :
les deux fonctionnent, mais <button> est plus
flexible car il peut contenir du HTML (icône + texte, mise en
forme…). On le préfère aujourd'hui.
12.9 Regrouper avec <fieldset> et <legend>
Pour organiser un long formulaire en sections logiques, on peut
envelopper des groupes de champs dans
<fieldset>, avec un
titre de groupe dans
<legend>.
Mettons tout bout à bout dans un formulaire réaliste de demande
de devis :
<formaction="/devis"method="post"><fieldset><legend>Vos coordonnées</legend><!-- Chaque div.champ regroupe une étiquette et son champ --><divclass="champ"><labelfor="nom">Nom complet <spanaria-hidden="true">*</span></label><inputtype="text"id="nom"name="nom"required /></div><divclass="champ"><labelfor="email">Adresse email <spanaria-hidden="true">*</span></label><inputtype="email"id="email"name="email"placeholder="vous@exemple.fr"required /></div><divclass="champ"><labelfor="tel">Téléphone</label><inputtype="tel"id="tel"name="telephone"placeholder="06 12 34 56 78" /></div></fieldset><fieldset><legend>Votre demande</legend><divclass="champ"><labelfor="type">Type de prestation</label><selectid="type"name="prestation"><optionvalue="">-- Choisir --</option><optionvalue="vente">Vente de matériel</option><optionvalue="montage">Montage sur mesure</option><optionvalue="reparation">Réparation</option><optionvalue="maintenance">Maintenance</option></select></div><divclass="champ"><labelfor="date">Date souhaitée</label><inputtype="date"id="date"name="date" /></div><divclass="champ"><labelfor="description">Description du besoin</label><textareaid="description"name="description"rows="4"placeholder="Détaillez ce que vous recherchez…"></textarea></div><divclass="champ"><span>Mode de contact préféré :</span><label><inputtype="radio"name="contact"value="email"checked /> Email</label><label><inputtype="radio"name="contact"value="tel" /> Téléphone</label></div><divclass="champ"><label><inputtype="checkbox"name="rgpd"required />
J'accepte que mes coordonnées soient utilisées uniquement pour traiter ma demande.
</label></div></fieldset><buttontype="submit">Envoyer la demande</button><buttontype="reset">Tout effacer</button></form>
Étapes suivantes :
le HTML ne fait que collecter les données. Pour les
traiter (envoyer un email, enregistrer en base, générer
un devis PDF…), il faut un langage côté serveur (PHP, Node.js,
Python…) ou un service tiers (Formspree, Netlify Forms…).
Cela sera abordé plus tard.
HTML 5 a apporté un ensemble de balises dont le seul rôle est
de décrire la nature d'une zone de la page.
Elles ne changent rien à l'apparence par défaut, mais elles
permettent au navigateur, aux moteurs de recherche et aux
lecteurs d'écran de comprendre la structure du document.
Sémantique = du sens :
utiliser <nav> plutôt
que <div class="menu"> ne change pas le rendu
pour un œil humain — mais un lecteur d'écran saura annoncer
« navigation », un moteur de recherche saura que la zone
contient des liens de navigation, et un développeur reprenant
ton code comprendra plus vite l'intention.
13.1 <header> — en-tête
La balise <header>
regroupe les éléments introductifs d'une page ou d'une section :
logo, titre, sous-titre, barre de navigation principale, moteur
de recherche, formule d'accueil…
<header><h1>L'Atelier Informatique du Finistère</h1><p>Vente, montage, réparation à Morlaix.</p></header>
L'Atelier Informatique du Finistère
Vente, montage, réparation à Morlaix.
Une page peut contenir plusieurs<header> :
un pour la page entière (en tête du document), et un par
<article> ou
<section> pour
les introduire.
13.2 <nav> — navigation
<nav> délimite une
zone de navigation principale — typiquement le
menu du site. Elle ne s'utilise pas pour n'importe quelle liste
de liens (par exemple les liens de bas de page peuvent tout à
fait rester dans le <footer>).
Une simple liste de liens : <nav> n'ajoute aucune mise en forme (les couleurs viennent de l'habillage du cours). Liens inactifs ici.
Plusieurs navigations sur une même page ?
Oui, c'est autorisé (menu principal + fil d'Ariane + table
des matières…). Dans ce cas, on distingue chacune avec
l'attribut aria-label pour que les lecteurs
d'écran les nomment clairement.
13.3 <main> — contenu principal
<main> délimite le
contenu unique et principal de la page — ce
qui la distingue des autres pages du site. Elle
ne doit apparaître qu'une seule fois par page, et
ne doit pas contenir de header, footer ou nav de site
(ces éléments partagés se placent en dehors).
<body><header>...</header><main><!-- Le contenu propre à cette page --></main><footer>...</footer></body>
13.4 <section> — regroupement thématique
<section> regroupe
un ensemble de contenus liés par un même thème.
Chaque section devrait naturellement pouvoir porter un titre
(<h2>,
<h3>…).
<section><h2>Nos services</h2><p>Description des services proposés…</p></section><section><h2>Notre atelier</h2><p>Situé à Morlaix, ouvert du mardi au samedi…</p></section>
Nos services
Description des services proposés…
Notre atelier
Situé à Morlaix, ouvert du mardi au samedi…
13.5 <article> — contenu autonome
<article> délimite
un contenu qui pourrait être extrait de la page
et exister par lui-même : un billet de blog, une fiche produit,
un commentaire, une actualité…
<article><header><h2>Comment nettoyer son PC de bureau</h2><p>Publié le 15 octobre par Stéphane</p></header><p>Un nettoyage régulier prolonge la durée de vie…</p><footer><p>Mots-clés : entretien, poussière, ventilateur</p></footer></article>
Comment nettoyer son PC de bureau
Publié le 15 octobre par Stéphane
Un nettoyage régulier prolonge la durée de vie…
<section> ou <article> ?
Bonne question pédagogique.
Si le contenu est lié au reste de la page et
n'a pas de sens tout seul → section
(ex. « Nos services », « Nos horaires »).
Si le contenu est autonome, publiable
indépendamment (flux RSS, republication ailleurs) →
article
(ex. billet de blog, fiche produit, actu).
Cas des blogs : la page liste des <article>,
chacun peut contenir plusieurs <section>
(introduction, développement, conclusion).
13.6 <aside> — contenu latéral
<aside> représente un
contenu connexe ou secondaire
par rapport à ce qui l'entoure : encadré, note, liens
complémentaires, publicité, biographie de l'auteur…
<article><h2>Choisir son SSD</h2><p>Le SSD est aujourd'hui incontournable…</p><aside><h3>Le saviez-vous ?</h3><p>Le premier SSD grand public est apparu en 2007.</p></aside></article>
Choisir son SSD
Le SSD est aujourd'hui incontournable…
13.7 <footer> — pied de page
<footer> regroupe les
éléments de clôture d'une page ou d'une section : mentions
légales, contact, copyright, liens secondaires, informations sur
l'auteur…
Les contours cuivre et les étiquettes sont ajoutés pour ce cours : sans CSS, ces zones sont invisibles et la page ressemble à une simple suite de titres et de paragraphes.
À retenir :
dans le doute, on privilégie toujours une balise
sémantique quand elle existe. On garde
<div> pour ce qui
n'a pas de rôle particulier (voir chapitre suivant).
Après tout ce panorama de balises spécialisées, il reste deux
« jokers » sans aucune signification : les balises
génériques. Elles sont neutres — ni titre, ni
paragraphe, ni article — mais elles servent à
regrouper des éléments pour les manipuler
ensemble, notamment pour les styler avec CSS ou les cibler avec
JavaScript.
14.1 Bloc ou en-ligne — la distinction fondamentale
Avant de plonger dans les deux balises, une notion à
comprendre : en HTML, les éléments se comportent de deux
manières.
Bloc — l'élément occupe toute la largeur
disponible et force un saut de ligne avant et après.
Exemples : <p>,
<h1>,
<section>,
<ul>.
En-ligne (inline) — l'élément
n'occupe que la place strictement nécessaire à son contenu
et s'insère dans le flux du texte, sans saut de ligne.
Exemples : <a>,
<strong>,
<em>,
<code>.
Pour bien voir la différence, ce rendu entoure chaque élément :
<h3>Réparation express</h3><p>Diagnostic <strong>gratuit</strong> et <ahref="#generiques">devis détaillé</a> avant toute intervention.</p>
Réparation express
Diagnostic gratuit et devis détaillé avant toute intervention.
Bleu : éléments bloc, qui prennent toute la largeur.
Cuivre : éléments en-ligne, qui suivent le texte.
<div> est la version
bloc du conteneur neutre.
<span> est sa version
en-ligne. C'est leur seule vraie différence.
14.2 <div> — le conteneur bloc
<div> (pour
division) regroupe plusieurs éléments dans un bloc
logique. Il n'apporte aucune information sémantique, mais il
sert de « boîte » à laquelle on peut appliquer un
style commun, une position, ou une visibilité conditionnelle.
<divclass="carte-service"><h3>Réparation</h3><p>Diagnostic gratuit, devis détaillé avant intervention.</p><ahref="/reparation">En savoir plus</a></div>
Réparation
Diagnostic gratuit, devis détaillé avant intervention.
La <div> elle-même est invisible : rien ne distingue encore la carte du reste. Le cours CSS lui donnera un fond, une bordure et une ombre.
Ici, la <div> permettra
plus tard, avec le CSS, de dessiner une vraie carte
(fond, bordure, ombre, arrondi…) autour du titre, du paragraphe
et du lien — comme un bloc unique.
14.3 <span> — le conteneur en-ligne
<span> est
l'équivalent de <div>
mais à l'intérieur du texte. Il permet de cibler un
mot, un chiffre ou un fragment sans casser la ligne.
<p>
Votre PC est prêt : nous avons remplacé le disque dur par un
<spanclass="mise-en-avant">SSD NVMe 1 To</span>
et ajouté <spanclass="mise-en-avant">16 Go de RAM</span>.
</p>
Votre PC est prêt : nous avons remplacé le disque dur par un
SSD NVMe 1 To
et ajouté 16 Go de RAM.
On pourra ensuite, avec le CSS, mettre en valeur les fragments
marqués mise-en-avant (couleur cuivre, gras…) sans
changer la structure du paragraphe.
Piège à éviter :
un <div> ne peut pas
se placer à l'intérieur d'un
<p> ou d'un
<span> — les blocs
ne s'imbriquent pas dans les éléments en-ligne. Le navigateur,
s'il rencontre ce cas, ferme automatiquement l'élément parent
avant d'ouvrir le bloc, ce qui produit un rendu inattendu.
14.4 Les attributs class et id
Une <div> ou un
<span> tout nu ne
sert pas à grand-chose : c'est un conteneur invisible. La vraie
utilité vient quand on lui attache un identifiant :
class — étiquette réutilisable ; plusieurs
éléments peuvent porter la même classe, et un même élément
peut cumuler plusieurs classes (séparées par des espaces).
id — identifiant unique dans
la page ; un seul élément peut porter un id donné.
<divid="hero"class="banniere principale"><h1>Bienvenue chez AI29</h1></div>
Bienvenue chez AI29
Ici, la <div> porte l'id unique
hero (pour la cibler avec une ancre
#hero par exemple) et deux classes,
banniere et principale, réutilisables
ailleurs.
Convention de nommage :
en général on écrit les classes et les id en minuscules,
sans accent ni espace, avec des tirets pour
séparer les mots (carte-service,
bouton-primaire). C'est ce qu'on appelle le
kebab-case. Cette convention rend le CSS plus lisible
et cohérent.
14.5 Quand utiliser <div> plutôt qu'une balise sémantique ?
Presque jamais. Le réflexe doit être :
« existe-t-il une balise sémantique qui décrit ce que je
fais ? ». Si oui, on la préfère. Le
<div> ne doit
apparaître que si aucune balise plus précise ne convient.
Réflexe sémantique avant <div>
Besoin
Balise à préférer
En-tête de page
<header>
Menu de navigation
<nav>
Contenu principal
<main>
Regroupement thématique
<section>
Billet, produit, actualité
<article>
Pied de page
<footer>
Encart latéral
<aside>
Rien de spécifique — juste grouper
<div>
La règle d'or :<div> et <span> sont des
outils de dernier recours quand le sens sémantique
importe peu. Ils prendront toute leur importance dans la partie
CSS pour organiser la mise en page.
Voilà : les fondamentaux du HTML sont couverts. Tu sais
désormais :
distinguer une balise, un attribut, une valeur ;
construire le squelette d'une page ;
structurer un contenu avec des titres, paragraphes, listes, tableaux et médias ;
tisser des liens vers d'autres pages, ancres, emails ou téléphones ;
collecter des données via des formulaires ;
organiser l'ensemble avec les balises sémantiques d'HTML 5.
La suite logique est CSS : mettre en couleur,
positionner, animer, adapter à toutes les tailles d'écran. Une
page comme celle que tu lis actuellement combine déjà HTML
(pour le contenu) et un peu de CSS (pour la lisibilité) — on
s'y attaque vraiment dans le cours CSS.
Conseil pratique :
le meilleur moyen de mémoriser le HTML n'est pas de le lire —
c'est de l'écrire. Recrée une page simple à
partir de zéro (une page « à propos », un CV, une fiche
produit) sans regarder ce cours : les blocages que tu
rencontreras t'apprendront plus que dix relectures.
