---
title: Découverte des balises HTML courantes pour structurer une page web
description: Parlons un peu de HTML, l'incontournable langage de balisage utilisé pour créer des pages web.
tags: []
---

import Callout from "@/components/Callout";
import tabs from "./tabs";

Dans l'article précédent, nous avons exploré la balise `<head>` et son rôle important dans une page HTML.
Maintenant, concentrons-nous sur les balises situées dans le corps de la page, c'est-à-dire dans la balise `<body>`.

## 🏗️ La balise \<body\>

La balise `<body>` est l'endroit où se trouve tout le contenu visible de la page... ou presque !  
Elle contient tous les éléments que l'utilisateur peut voir et interagir avec, comme le texte, les images, les liens, etc.

Voici un exemple de code HTML simple avec la balise `<body>` :

<tabs.htmlBasicBody />

On peut voir que la balise `<body>` contient plusieurs éléments :
- `<h1>` : Un titre de premier niveau.
- `<p>` : Un paragraphe de texte.
- `<img>` : Une image.
- `<a>` : Un lien hypertexte.

Mais on y reviendra un peu après !

## 📝 Balises de textes et mise en forme

### 1. Titres et sous-titres

Les titres et les sous-titres sont des éléments importants _(pour ne pas dire essentiels)_ pour structurer le contenu d'une page web.
Le langage HTML fournit six niveaux de titres, du plus important au moins important :

- `<h1>` : Titre de premier niveau _(le plus important)_.
- `<h2>` : Titre de deuxième niveau.
- `<h3>` : Titre de troisième niveau.
- `<h4>` : Titre de quatrième niveau.
- `<h5>` : Titre de cinquième niveau.
- `<h6>` : Titre de sixième niveau _(le moins important)_.

Il est important de prendre en compte plusieurs éléments lors de l'utilisation des titres :

- **Accessibilité** : Les titres aident les lecteurs d'écran à comprendre la structure de la page.
- **SEO** : Les moteurs de recherche utilisent les titres pour comprendre le contenu de la page.
- **Lisibilité** : Les titres aident les utilisateurs à parcourir rapidement le contenu de la page.
- **Sémantique** : Les titres donnent du sens au contenu et aident à organiser l'information.

<Callout type="warning" title="Styles par défaut des titres et sous-titres">
  La plupart du temps _(selon le navigateur)_, les titres sont affichés avec une taille de police plus grande que le texte normal.

  Il est donc important de ne pas utiliser les balises de titres uniquement pour changer la taille du texte.  
  Si ton titre est le titre principal de la page, utilise la balise `<h1>` et applique-lui un style CSS pour le personnaliser.
</Callout>

Il est recommandé d'utiliser une seule balise `<h1>` par page pour le titre principal.  
Ni plus, ni moins !

En revanche, tu peux utiliser plusieurs balises `<h2>`, `<h3>`, etc. pour les sous-titres.

Les balises `<h2>` jusqu'à `<h6>` sont utilisées pour les sous-titres et les titres de sections.  
Elles permettent de structurer le contenu de la page et de créer une hiérarchie d'information.

<Callout type="warning" title="Hierarchie des titres">
  Il est préférable d'utiliser une balise `<h2>` pour un sous-titre qui suit un `<h1>`, et de ne pas sauter directement à un `<h3>` ou `<h4>`.  
  Cependant, tu peux totalement passer d'un `<h6>` à un `<h2>` si tu le souhaites et que ça a du sens pour toi !
  
  Il est important de respecter cette hiérarchie pour que le contenu soit facilement compréhensible par les utilisateurs et les moteurs de recherche.
</Callout>