Débutant15 min de lecture

Titres & Paragraphes

Maîtrise les six niveaux de titres HTML, apprends à écrire des paragraphes, et comprends comment organiser le contenu textuel d'une page web.

La Hiérarchie des Titres

HTML fournit six niveaux de titres, de <h1> (le plus important) à <h6> (le moins important). Les titres créent une hiérarchie qui aide à la fois les utilisateurs et les moteurs de recherche à comprendre la structure de ta page.

  • <h1> — Titre principal. Il ne devrait généralement y en avoir qu'un seul par page.
  • <h2> — Titres de section sous le sujet principal.
  • <h3> — Titres de sous-section sous un <h2>.
  • <h4> à <h6> — Niveaux plus profonds de sous-sections.

Pense aux titres comme au plan d'un livre : le <h1> est le titre du livre, les balises <h2> sont les titres de chapitres, et les balises <h3> sont les sections au sein des chapitres.

Important : Ne saute pas de niveaux de titres. Par exemple, ne passe pas directement de <h1> à <h4>. Cela perturbe les lecteurs d'écran et nuit à l'accessibilité.

Les Titres en Action

html
<h1>The Solar System</h1>

<h2>Inner Planets</h2>
<h3>Mercury</h3>
<p>Mercury is the closest planet to the Sun.</p>
<h3>Venus</h3>
<p>Venus is the hottest planet in our solar system.</p>

<h2>Outer Planets</h2>
<h3>Jupiter</h3>
<p>Jupiter is the largest planet.</p>

Paragraphes et Espaces Blancs

La balise <p> définit un paragraphe de texte. Les navigateurs ajoutent automatiquement un espacement vertical (marge) avant et après chaque paragraphe, ce qui sépare visuellement les blocs de texte.

Un concept important à comprendre est la compression des espaces blancs. Peu importe le nombre d'espaces ou de sauts de ligne que tu tapes à l'intérieur d'un paragraphe, le navigateur les compresse en un seul espace. Pour forcer un saut de ligne à l'intérieur d'un paragraphe, tu peux utiliser la balise auto-fermante <br>.

html
<p>Ceci    a    des   espaces   supplémentaires.</p>
<!-- S'affiche comme : "Ceci a des espaces supplémentaires." -->

<p>Première ligne.<br>Deuxième ligne.</p>
<!-- S'affiche sur deux lignes séparées -->

Utilise <br> avec parcimonie. Si tu as besoin de deux blocs de texte distincts, utilise plutôt deux éléments <p> séparés.

Quel est l'ordre correct d'importance des titres ?

Prêt à pratiquer ?

Crée ton compte gratuit pour accéder à l'éditeur de code interactif, lancer les défis et suivre ta progression.