frontend / html

Texte et sémantique de base

Leçon 21 exercice

Explication

Ce que vous allez apprendre

Choisir une balise de titre (h1-h6) selon la hiérarchie logique du document, jamais selon la taille voulue
Distinguer les balises sémantiques (strong, em) des balises purement visuelles (b, i)
Utiliser les balises de texte technique adaptées (code, pre, kbd, samp)
Citer correctement une source avec blockquote/cite ou q
Expliquer pourquoi un lecteur d'écran traite différemment <strong> et <b>

Dans quel contexte ?

Pendant une revue de code, un collègue pointe une ligne dans article.html : <span style="font-weight:bold">Attention</span> là où un <strong> aurait suffi. Le composant s'affiche correctement à l'écran, mais l'audit d'accessibilité Lighthouse du projet tombe à 78/100 parce qu'aucune information sémantique n'est portée par ce texte pourtant important. Ce genre de détail, invisible visuellement, est justement ce que cette leçon apprend à repérer.

Étape 1 : oublier les réflexes de Word

Dans un traitement de texte, on sélectionne du texte et on clique "gras" ou "grand" pour le mettre en valeur. En HTML, ce réflexe est un piège : chaque balise doit d'abord exprimer un sens, pas un style visuel.

Étape 2 : un même rendu, deux sens différents

Prenons un exemple concret. <strong> et <b> peuvent tous les deux afficher du texte en gras — à l'écran, c'est identique. Pourtant <strong> dit "ce texte est important", tandis que <b> dit juste "affiche ça en gras", sans aucune signification particulière.

Étape 3 : pourquoi cette différence compte vraiment

Un lecteur d'écran insiste vocalement sur <strong>, alors qu'il ignore complètement le style de <b>. Un moteur de recherche accorde aussi plus de poids au contenu marqué sémantiquement. Choisir la bonne balise rend donc le contenu compréhensible à la fois pour les humains ET pour les machines qui le lisent.

Piège fréquent

Utiliser <h1> à <h6> uniquement pour leur taille de police par défaut est l'erreur numéro un des débutants. Si un <h3> est trop petit visuellement, on ne le remplace jamais par un <h2> : on ajuste sa taille en CSS (font-size) tout en gardant la balise qui reflète sa vraie place dans la hiérarchie du document.

Étape 4 : la hiérarchie des titres, comme le plan d'un livre

Passons aux titres. Les balises <h1> à <h6> ne sont pas un outil pour "faire plus gros" : elles forment une hiérarchie logique, exactement comme le sommaire d'un livre.

Une page ne doit avoir qu'un seul <h1> (le titre principal), puis des <h2> pour les grandes sections, des <h3> pour les sous-sections. Sauter un niveau — passer d'un <h2> à un <h4> sans <h3> entre les deux — casse cette logique, même si visuellement personne ne le remarque.

Balise	Sens porté	Rendu visuel par défaut
`<strong>`	Importance forte	Gras
`<b>`	Aucun (purement visuel)	Gras
`<em>`	Emphase / nuance de ton	Italique
`<i>`	Aucun (purement visuel)	Italique
`<mark>`	Pertinence dans un contexte donné	Surligné

Bonne pratique

Demandez-vous toujours "que VEUT DIRE ce texte" avant de choisir sa balise. Si la réponse est "il est important", c'est <strong> ; si la réponse est "je veux juste qu'il soit en gras pour la déco", c'est <b> — et souvent, un simple <span> stylé en CSS convient encore mieux.

Étape 5 : et pour le texte technique ou spécial ?

Il reste des cas particuliers : une citation, un extrait de code, une abréviation. Chacun a sa balise dédiée, que vous découvrirez dans le code de cette leçon, toujours selon la même logique : le sens avant l'apparence.

Le piège à éviter

Le réflexe le plus courant chez un débutant reste de choisir une balise pour son rendu par défaut, puis de "corriger" l'apparence avec du CSS après coup. Prenez la bonne habitude dès maintenant : demandez-vous toujours "qu'est-ce que ce texte EST" avant de vous demander "à quoi il doit ressembler".

Et la suite ?

Une fois à l'aise avec le texte isolé, la prochaine étape logique consiste à structurer des ensembles de contenus : liens, images, listes et tableaux, dans les leçons qui suivent.

Commandes & code

Texte et sémantique de base

Les balises de contenu textuel les plus courantes, choisies pour leur sens plutôt que pour leur apparence.

<!-- Titres : hiérarchie stricte, jamais choisie pour la taille de police -->
<h1>Titre principal de la page (un seul par page)</h1>
<h2>Section</h2>
<h3>Sous-section</h3>
<h4>Sous-sous-section</h4>
<!-- h5 / h6 : rarement nécessaires, signe possible d'une structure trop profonde -->

<!-- Paragraphes -->
<p>Un paragraphe de texte classique.</p>

<!-- Emphase sémantique, pas juste visuelle -->
<p>Ce point est <strong>vraiment important</strong> (gras, portée sémantique forte).</p>
<p>Ce mot est <em>légèrement accentué</em> à l'oral (italique, nuance de ton).</p>

<!-- b / i : purement visuels, sans portée sémantique -->
<p>Le mot-clé <b>API</b> apparaît en gras sans importance particulière.</p>
<p><i>Nom scientifique</i> d'une espèce, en italique par convention typographique.</p>

<!-- Texte technique et éléments spécialisés -->
<p>La commande <code>npm install</code> installe les dépendances.</p>

<pre>
function hello() {
    console.log("indentation préservée");
}
</pre>

<p>Prix : <del>49€</del> <ins>29€</ins> (ancien / nouveau)</p>

<p>H<sub>2</sub>O et E=mc<sup>2</sup></p>

<p>Citation courte : <q>la simplicité est la sophistication suprême</q></p>

<blockquote cite="https://exemple.com/source">
    <p>Citation longue extraite d'une autre source, mise en retrait.</p>
</blockquote>

<p><abbr title="HyperText Markup Language">HTML</abbr> structure le Web.</p>

<p>Raccourci : <kbd>Ctrl</kbd> + <kbd>C</kbd></p>

<p>Résultat du programme : <samp>Fichier introuvable</samp></p>

<mark>Texte surligné</mark> pour attirer l'attention visuellement.

<hr>
<!-- ↑ rupture thématique, pas une simple ligne de séparation -->

<br>
<!-- ↑ retour à la ligne forcé, à utiliser avec parcimonie (adresses, poèmes) -->

Résumé

La hiérarchie h1→h6 reflète la structure logique, jamais la taille visuelle désirée.
strong/em portent du sens ; b/i sont purement visuels.
blockquote + cite pour une citation longue, q pour une citation en ligne.
code, kbd, samp, pre couvrent les cas techniques (code, saisie, sortie).

Exercices pratiques

1 disponible

Mission : corriger l'audit d'accessibilité d'article.html

Objectif : Corriger un texte qui mélange faux gras et hiérarchie de titres cassée, repérés par un audit Lighthouse tombé à 78/100.

Contexte

L'audit Lighthouse d'article.html pointe deux problèmes : un <span style="font-weight:bold">Attention</span> utilisé à la place d'une vraie balise sémantique, et une structure de titres qui saute directement de <h2>Présentation</h2> à <h4>Détails techniques</h4>, sans aucun <h3> entre les deux.

Ta mission : corriger ces deux défauts sans changer l'apparence visuelle voulue par le designer.

Résoudre l’exercice →