BaliseTonSite

Texte et titres

Titres, paragraphes, sauts de ligne, emphases...

Imagine : tu présentes ton projet de construction à une équipe. Tu ne vas pas tout écrire en vrac : tu as un grand titre pour annoncer le thème, des sous-titres pour chaque partie, et des notes plus petites pour les détails.

C’est exactement ce que font les balises HTML de texte : elles structurent l’information pour qu’elle soit claire et lisible.

2.1<h1> à <h6>

Les titres servent à hiérarchiser ton contenu.
<h1> = le titre principal (utilisé une seule fois par page).
Ensuite viennent les <h2>, <h3>, etc., comme des sous-chapitres.

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Détail du sous-chapitre</h3>

Titre principal

Sous-titre

Détail du sous-chapitre

2.2<p>

La balise <p> sert pour les paragraphes. Chaque paragraphe est séparé du précédent par un espace vertical (comme des blocs de texte bien alignés sur ton plan).

<p>Ceci est un paragraphe.</p>

Ceci est un paragraphe.

2.3<br> et <hr>

  • <br> : saute une ligne (comme un petit retour à la ligne dans une note).
  • <hr> : trace une ligne horizontale (comme un séparateur sur ton plan).
Texte ligne 1<br>Texte ligne 2
<hr>
Paragraphe après une ligne
Texte ligne 1
Texte ligne 2
Paragraphe après une ligne

2.4<strong>, <em>, <b>, <i>

Pour mettre certains mots en valeur :

  • <strong> = important (gras avec du sens)
  • <em> = accentué (italique avec du sens)
  • <b> = gras visuel uniquement
  • <i> = italique visuel uniquement
<p>Texte <strong>important</strong> et <em>accentué</em>.</p>

Texte important et accentué.

2.5<blockquote>, <q>, <cite>

Pour citer une phrase ou une source :

  • <q> : citation courte (dans une phrase)
  • <blockquote> : citation longue (affichée en bloc)
  • <cite> : auteur ou source
<p>Un architecte a dit : <q>Un plan bien structuré fait gagner du temps.</q></p>

<blockquote>
  <p>Construire sans plan, c’est comme coder sans HTML.</p>
  <cite>Architecte inconnu</cite>
</blockquote>

Un architecte a dit : Un plan bien structuré fait gagner du temps.

Construire sans plan, c’est comme coder sans HTML.

- Architecte inconnu

Attention

N'utilise pas les balises de titre <h1> à <h6> juste pour grossir le texte. Utilise CSS pour ça. Les titres servent à la structure !

Verifie tes acquis

3 questions pour valider ce chapitre

1. Combien de niveaux de titre existent en HTML ?

HTML propose 6 niveaux de titres, de <h1> (le plus important) a <h6> (le moins important).