cours/docs/dev/fragments/html/01-titres.md

# Titres

## Description

Les titres en HTML sont essentiels. Ils servent à structurer le contenu de la page en sections logiques. Tels la table des matières d'un livre, les titres doivent être organisés du plus important au moins important.

Il existe 6 niveaux de titres, nommés `hX` de 1 à 6:

- `<h1>` est le titre le plus important de la page. Il est indispensable. Il ne peut y en avoir qu'un seul par page. Il doit permettre d'identifier le contenu de la page.
- `<h2>`
- `<h3>`
- `<h4>`
- `<h5>`
- `<h6>`

Les titres doivent se succéder de manière logique. Un `h2` doit succéder à un `h1`, un `h3` doit succéder à un `h2` et ainsi de suite.

On ne peut pas utiliser un `h4` après un `h2` si aucun `h3` n'est présent entre eux.

## Exemples

### Structure incorrecte

```html
<h1>Titre principal</h1>
<h2>Titre secondaire</h2>
<h4>Sous-titre</h4> // [!code error]
```

### Structure correcte
```html
<h1>Titre principal</h1>
<h2>Titre secondaire</h2>
<h3>Sous-titre</h3>
<h2>Titre secondaire</h2>
<h3>Sous-titre</h3>
<h4>Sous-titre</h4>
<h2>Titre secondaire</h2>
```

### Structure complexe correcte

```html
<h1>Sandwich PB&J</h1>
<h2>Les ingrédients</h2> // [!code hl]
<h3>Le frais</h3> // [!code hl]
<ul>
  <li>confiture</li>
</ul>
<h3>Le sec</h3> // [!code hl]
<ul>
  <li>pain</li>
  <li>beurre de cacahuette</li>
</ul>
<h2>Les étapes</h2> // [!code hl]
<ol>
  <li>couper deux tartines de pain</li>
  <li>étaler la confiture sur une tartine</li>
  <li>étaler le beurre de cacahuette sur l’autre tartine</li>
  <li>faire un sandwich</li>
</ol>
```

Il est possible de revenir à un titre de niveau supérieur à n'importe quel moment.

:::warning Styles et titres
Il est fréquent de voir des titres importants utiliser un niveau inférieur pour des raisons de styles. Ce n'est pas une bonne pratique, il faudra préférer utiliser une classe plutôt que de modifier la structure du document.
:::