Chapitre 1710 minDébutant
Aide-mémoire : balises HTML et propriétés CSS
Par Josselyn C., prof de BTS SIO. Mis à jour le .
À la fin de ce chapitre, tu sauras
- retrouver en un coup d'œil une balise, une propriété ou un sélecteur ;
- vérifier les seuils et les obligations légales d'un site ;
- éviter les erreurs les plus fréquentes.
Cet aide-mémoire rassemble sur une page les balises HTML, les sélecteurs et les propriétés CSS du cours, avec leur rôle en une ligne et le chapitre qui les explique. Garde-le ouvert à côté de ton éditeur, ou relis-le la veille d'une évaluation.
Le squelette d'une page
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sujet de la page – Nom du site</title>
<meta name="description" content="Résumé de la page en 140 à 160 caractères.">
<link rel="canonical" href="https://www.exemple.fr/page.html">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a class="lien-evitement" href="#contenu">Aller au contenu</a>
<header>…<nav aria-label="Menu principal">…</nav></header>
<main id="contenu"><h1>…</h1>…</main>
<footer>…</footer>
</body>
</html>
Les balises HTML essentielles
| Catégorie | Balises | Chapitre |
|---|---|---|
| Titres | <h1> à <h6> : un seul <h1>, pas de saut de niveau | 2 |
| Texte | <p>, <br>, <hr>, <strong>, <em>, <mark>, <small>, <abbr>, <code>, <q>, <blockquote>, <cite>, <sup>, <sub>, <time> | 2 |
| Listes | <ul>, <ol>, <li> ; <dl>, <dt>, <dd> | 2 |
| Conteneurs sans sens | <div> (bloc), <span> (en ligne) | 2 |
| Liens et médias | <a href>, <img src alt width height>, <picture>, <source>, <figure>, <figcaption>, <video>, <audio>, <track>, <iframe title> | 3 |
| Tableaux | <table>, <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th scope>, <td>, colspan, rowspan | 3 |
| Structure | <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <address>, <search> | 4 |
| Interactifs | <details>, <summary>, <dialog>, <button> | 4 |
| Formulaires | <form action method>, <label for>, <input type name>, <textarea>, <select>, <option>, <optgroup>, <fieldset>, <legend>, <button type> | 5 |
Les attributs à connaître
| Attribut | Sur | Rôle |
|---|---|---|
id, class | tout élément | identifiant unique ; classes pour le CSS |
lang | <html>, ou un passage en langue étrangère | langue du contenu |
href, target, rel | <a>, <link> | destination ; nouvel onglet ; relation (noreferrer, stylesheet, canonical) |
src, alt, width, height, loading, srcset, sizes | <img> | fichier ; alternative ; dimensions ; chargement différé ; tailles proposées |
name, value, type, required, pattern, min, max, minlength, maxlength, autocomplete, inputmode | champs de formulaire | nom envoyé ; valeur ; type ; contraintes de validation ; remplissage automatique ; clavier mobile |
aria-label, aria-current, aria-expanded, aria-describedby, aria-invalid, aria-hidden | tout élément | compléments d'accessibilité, quand le HTML natif ne suffit pas |
Les entités
| Entité | Caractère |
|---|---|
< > | < > |
& | & |
" | " |
| espace insécable |
Les sélecteurs CSS
| Sélecteur | Cible | Spécificité |
|---|---|---|
* | tout | (0,0,0) |
p | les <p> | (0,0,1) |
.carte | la classe carte | (0,1,0) |
#contenu | l'id contenu | (1,0,0) |
nav a | les a descendants de nav | (0,0,2) |
ul > li | les li enfants directs de ul | (0,0,2) |
h2 + p | le p juste après un h2 | (0,0,2) |
h2 ~ p | les p qui suivent un h2 | (0,0,2) |
[type="email"], a[href^="https"], a[href$=".pdf"] | par attribut | (0,1,0) pour l'attribut |
:hover, :focus-visible, :nth-child(odd), :not(…), :checked, :user-invalid | pseudo-classes | (0,1,0), sauf :not(), :is(), :has() (leur argument le plus fort) et :where() (zéro) |
::before, ::after, ::marker, ::placeholder | pseudo-éléments | (0,0,1) |
.carte:has(img) | les cartes qui contiennent une image | (0,1,1) |
Ordre de la cascade : importance (!important) > attribut style > couches @layer > spécificité > ordre d'écriture (chapitre 7).
Les propriétés CSS courantes
| Famille | Propriétés |
|---|---|
| Texte | color, font-family, font-size, font-weight, font-style, line-height, text-align, text-decoration, text-transform, letter-spacing, text-wrap |
| Fond | background-color, background-image, background-size, background-position, background-repeat |
| Boîte | width, height, min-*, max-*, padding, border, border-radius, margin, box-sizing, box-shadow, outline, overflow, aspect-ratio, object-fit |
| Affichage | display, visibility, opacity |
| Position | position, top, right, bottom, left, inset, z-index |
| Flexbox (conteneur) | display: flex, flex-direction, flex-wrap, justify-content, align-items, gap |
| Flexbox (éléments) | flex (flex-grow, flex-shrink, flex-basis), align-self, order |
| Grid (conteneur) | display: grid, grid-template-columns, grid-template-rows, grid-template-areas, grid-auto-rows, gap, place-items |
| Grid (éléments) | grid-column, grid-row, grid-area |
| Logiques | margin-inline, padding-block, inline-size, border-inline-start, text-align: start |
| Animation | transition, transform, animation, @keyframes |
Les unités et les fonctions
| Unité ou fonction | Valeur |
|---|---|
px | taille fixe |
% | part du parent |
em | taille de police de l'élément (du parent pour font-size) ; se multiplie en cascade |
rem | taille de police de <html>, 16 px par défaut : pour le texte |
vw, vh, dvh | 1 % de la largeur, de la hauteur, de la hauteur visible de la fenêtre |
ch | largeur du chiffre 0 : max-width: 65ch |
fr | fraction de l'espace libre d'une grille |
calc(), min(), max(), clamp(min, idéal, max) | calculs et bornes |
var(--nom, secours) | lecture d'une variable CSS |
Le box model en une ligne
Largeur visible = width + padding gauche et droit + bordures gauche et droite, en content-box (par défaut) ; = width en border-box. La marge n'est jamais comprise. Les marges verticales voisines fusionnent (la plus grande reste), sauf dans Flexbox et Grid.
Flexbox et Grid en un coup d'œil
/* Une rangée qui passe à la ligne, éléments centrés verticalement */
.rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
/* Un élément poussé à droite dans une rangée flex */
.a-droite { margin-left: auto; }
/* Centrer un élément dans son parent */
.parent { display: grid; place-items: center; }
/* Une grille de cartes responsive sans media query */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 1.5rem; }
/* Une mise en page complète */
body {
display: grid;
grid-template-columns: 1fr 18rem;
grid-template-areas: "entete entete" "contenu lateral" "pied pied";
}
Les media queries utiles
@media (width >= 48rem) { … } /* à partir de 768 px (mobile first) */
@media (prefers-color-scheme: dark) { … } /* thème sombre */
@media (prefers-reduced-motion: reduce) { … } /* moins d'animations */
@media (hover: hover) { … } /* appareil avec survol */
@media print { … } /* impression */
@container (width >= 30rem) { … } /* selon la largeur du conteneur */
Les seuils à connaître
| Sujet | Valeur |
|---|---|
| Contraste du texte courant (WCAG AA) | 4,5:1 |
| Contraste du grand texte et des composants d'interface | 3:1 |
| Grand texte | 24 px, ou 18,66 px en gras |
| Taille minimale d'une cible (WCAG 2.2 AA) | 24 × 24 px CSS, ou assez d'espace autour |
| Largeur sans défilement horizontal | 320 px |
| Zoom à supporter | 200 % |
| LCP « bon » | ≤ 2,5 s |
| INP « bon » | ≤ 200 ms |
| CLS « bon » | ≤ 0,1 |
Longueur indicative d'un <title> | 50 à 60 caractères |
| Longueur indicative d'une meta description | 140 à 160 caractères |
| RGAA 4.1.2 | 106 critères, 13 thématiques |
Les obligations légales d'un site
| Obligation | Texte | Chapitre |
|---|---|---|
| Mentions légales : éditeur, directeur de la publication, hébergeur | LCEN, article 1-1 (depuis la loi SREN de 2024) | 14 |
| Information des personnes sur leurs données | RGPD, article 13 | 14 |
| Consentement avant les traceurs non essentiels | loi Informatique et Libertés, article 82 ; lignes directrices de la CNIL | 14 |
| Accessibilité des sites publics et des grandes entreprises | loi du 11 février 2005, article 47 ; RGAA | 12 |
| Accessibilité de services privés (commerce en ligne, banque…) depuis le 28 juin 2025 | directive (UE) 2019/882, loi n° 2023-171 | 12 |
Les erreurs les plus fréquentes
| Symptôme | Cause probable |
|---|---|
Les accents s'affichent é | <meta charset="utf-8"> manquant |
| La page est minuscule sur téléphone | balise viewport manquante |
| Le CSS ne s'applique pas du tout | mauvais chemin dans <link href> (404 dans l'onglet Réseau) |
| Une règle CSS est barrée dans l'inspecteur | une autre règle plus spécifique ou écrite après gagne |
| Une image ne s'affiche pas en ligne mais marche sur ton poste | différence de majuscules dans le nom du fichier, ou chemin de ton disque |
| Une boîte est plus large que prévu | box-sizing: content-box : padding et bordure s'ajoutent |
Un élément absolute part dans le coin de la page | le parent n'a pas position: relative |
| Une rangée flex déborde | un contenu long sans min-width: 0 sur l'élément flex |
| Le formulaire n'envoie pas une valeur | attribut name manquant sur le champ |
| La page « saute » pendant le chargement | images sans width et height |