Le Web en une ligne
Le client (navigateur) envoie une requête HTTP ; le serveur renvoie les fichiers (HTML, CSS, JS) ; le navigateur affiche.
| HTML | structure — le squelette |
| CSS | style — les vêtements |
| JS | interactivité — les muscles |
Structure minimale
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<title>Titre</title>
</head>
<body>
<!-- visible ici -->
</body>
</html>head = invisible · body = visible.
Le texte
<h1>…<h6>— titres, un seul h1, hiérarchie continue<p>paragraphe ·<br>saut ·<hr>ligne<strong>important ·<em>emphase ·<mark>surligné
Sémantique (strong/em) > visuel (b/i).
Les liens — <a href>
| page | href="p.html" |
| ancre | href="#id" |
| onglet | target="_blank" rel="noopener" |
| fichier | href="f.pdf" download |
href="mailto:…" | |
| tél. | href="tel:…" |
Les images
<img src="…" alt="…"> — auto-fermante, alt
obligatoire.
Types : normale · cliquable (dans un <a>) · mappée
(<map>/<area>) · responsive (srcset).
Légende : <figure> + <figcaption>.
Les listes
<ol> | ordonnée (ordre important) |
<ul> | non ordonnée (puces) |
<dl> | définitions : <dt> terme +
<dd> définition |
<ol> : start, type, reversed
(inverse les numéros, pas les items). Imbrication dans un <li>.
Les tableaux
<table> | le tableau |
<caption> | légende |
<tr> | ligne |
<th> / <td> | en-tête / donnée |
<thead>…<tbody> | sections |
Fusion : colspan (colonnes), rowspan (lignes). Apparence → CSS.
Les formulaires
<form method="POST" action="…">
GET= dans l'URL (recherche) ·POST= caché (sensible)- Champs :
input(text, password, email, number, radio, checkbox, file, date, color),textarea,select/option name= obligatoire pour l'envoi<label>+<fieldset>/<legend>
Attributs booléens
required · autofocus · readonly ·
multiple · checked · selected — présence = actif,
pas de valeur.
Avec valeur : placeholder="…", maxlength, minlength.
⚡ À NE PLUS écrire (HTML5)
| Obsolète | À la place |
|---|---|
<font> | CSS color, font-size |
align, valign | CSS text-align |
border="1" | CSS border |
hspace, vspace | CSS margin |
| tableau pour la mise en page | CSS Flexbox / Grid |
Le réflexe débogage
Ça ne s'affiche pas comme prévu ? Cherchez d'abord une balise non fermée — c'est 9 fois sur 10 la cause. Puis vérifiez les guillemets des attributs et l'imbrication.