Les balises de texte et formatage

Structurer et formater du texte en HTML

HTML offre de nombreuses balises pour structurer et donner du sens à votre texte.

Les titres (h1 à h6)

Les titres vont de h1 (le plus important) à h6 (le moins important) :

<h1>Titre principal de la page</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
<h4>Section de niveau 4</h4>
<h5>Section de niveau 5</h5>
<h6>Section de niveau 6</h6>

Règle d'or : Un seul h1 par page, et respectez la hiérarchie (h1 → h2 → h3...).

Les paragraphes

<p>Ceci est un paragraphe de texte. 
Il peut contenir plusieurs lignes, mais elles seront affichées sans retour à la ligne automatique.</p>

<p>Pour créer un nouveau paragraphe, utilisez une nouvelle balise p.</p>

Le formatage de texte

<strong>Texte important (gras sémantique)</strong>
<b>Texte en gras (visuel seulement)</b>

<em>Texte accentué (italique sémantique)</em>
<i>Texte en italique (visuel seulement)</i>

<mark>Texte surligné</mark>
<small>Petit texte</small>
<del>Texte barré</del>
<ins>Texte inséré (souligné)</ins>
<sub>Indice</sub> H<sub>2</sub>O
<sup>Exposant</sup> E=mc<sup>2</sup>

Les sauts de ligne

<p>Première ligne<br>Deuxième ligne</p>

<hr> <!-- Ligne horizontale de séparation -->

Citations

<blockquote>
    <p>Citation longue qui prend plusieurs lignes.</p>
    <cite>- Auteur de la citation</cite>
</blockquote>

<q>Citation courte en ligne</q>

Code et préformaté

<code>let x = 10;</code> pour du code en ligne

<pre>
<code>
function bonjour() {
    console.log("Hello");
}
</code>
</pre>

Points clés

• Utilisez <strong> et <em> pour la sémantique
• Un seul <h1> par page
• Les paragraphes <p> structurent le texte
• <br> pour les sauts de ligne
• <code> pour afficher du code

📝 Vous avez terminé cette leçon ?

Créez un compte gratuit pour sauvegarder votre progression !