Front-end · 6 mondes · 18 étapes

HTML & CSS

Structurer et styliser une page web, directement dans le navigateur.

Progression

0 %

0/18 étapes terminées

← Décryptages

Fondamental · 8 min de lecture

Le HTML sémantique

Le sens d'abord, l'apparence ensuite

1Définition

Le HTML décrit la nature de chaque contenu : un titre, un paragraphe, une navigation, un pied de page. Le choix d'une balise se fait selon ce qu'est le contenu, jamais selon l'apparence voulue — l'apparence, c'est le travail du CSS.

2Principes fondamentaux

Une balise, un sens

<h1> est le titre de la page, pas « du texte en gros ». <button> est une action, <a> une destination.

Des titres dans l'ordre

Un h1, puis des h2, puis des h3 sous eux. Les lecteurs d'écran naviguent par titres : un plan bancal est une page illisible.

Des régions nommées

header, nav, main, footer n'ont aucun style par défaut, et ils permettent de sauter directement au contenu.

Chaque image décrite

alt décrit l'image utile, alt="" signale l'image décorative. L'omettre est une faute.

3Exemples pratiques

Une page bien découpée

Exemple

1<header>2  <h1>Sys-Code</h1>3  <nav><a href="/cours">Cours</a></nav>4</header>5<main>6  <h2>Mission du jour</h2>7  <p>Variables et mot de passe.</p>8</main>9<footer><p>2026</p></footer>

Même sans CSS, un lecteur d'écran annonce « bannière, navigation, contenu principal, informations » : la page a un plan.

Lien ou bouton

Exemple

1<a href="/profil">Voir mon profil</a>   <!-- va quelque part -->2<button type="button">Rejouer</button>   <!-- fait quelque chose -->

Un lien change de page, un bouton déclenche une action. Les confondre casse la navigation au clavier et les attentes des utilisateurs.

4Erreurs courantes

Choisir un titre pour sa taille

À éviter

<h3>Petite remarque</h3>

À faire

<p class="remarque">Petite remarque</p>

Pourquoi : Un titre crée une entrée dans le plan de la page. Pour un texte simplement plus petit, c'est du CSS.

Des div cliquables

À éviter

<div class="bouton">Valider</div>

À faire

<button type="button">Valider</button>

Pourquoi : Une div n'est ni atteignable au clavier ni annoncée comme un bouton. <button> fait tout cela gratuitement.

Des liens muets

À éviter

<a href="/doc">Cliquez ici</a>

À faire

<a href="/doc">Lire la documentation</a>

Pourquoi : Hors contexte, « cliquez ici » ne dit rien. Un lien doit annoncer sa destination.

5Subtilités à connaître

◆Le navigateur corrige silencieusement beaucoup d'erreurs d'imbrication : une page peut s'afficher correctement et être malgré tout mal structurée.
◆<section> et <article> structurent le contenu du main : un article se comprend seul, une section regroupe un thème.
◆lang="fr" sur <html> choisit la voix et la prononciation des lecteurs d'écran : sans lui, une page française est lue avec un accent anglais.

6Vérifie ta compréhension

Question 1/3

Score 0

Combien de h1 dans une page ?

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.