Les balises de titres

Notions théoriques

Le HTML permet de structurer le contenu d'une page Web à l'aide de balises spécifiques. Parmi ces balises, certaines sont spécialement conçues pour le texte. Elles permettent de définir les titres, les paragraphes, les sauts de ligne, les séparations, etc.

Les balises de titres

En HTML, il existe six niveaux de titres, de <h1> à <h6>. <h1> est le plus important et <h6> le moins important. Ces balises sont utilisées pour structurer le contenu et aider les moteurs de recherche à comprendre l'organisation de votre page.

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

Bonne pratique - Hierarchie des titres

Ne sautez pas de niveaux de titres (ex: <h1> → <h3> sans <h2>). Les lecteurs d'écran et les moteurs de recherche utilisent cette hiérarchie.

Les balises `<br/>` et `<hr/>`

La balise <br/> est utilisée pour insérer un saut de ligne. Elle est souvent utilisée dans des paragraphes de texte lorsque vous voulez créer une nouvelle ligne sans commencer un nouveau paragraphe.

La balise <hr/> est utilisée pour insérer une ligne horizontale, qui peut servir de séparation entre des sections de contenu.

<p>Ceci est un paragraphe avec un <br/> saut de ligne.</p>
<hr/>
<p>Ceci est un autre paragraphe séparé par une ligne horizontale.</p>

Bonne pratique - Saut de ligne

Utilisez <br/> avec modération. Pour séparer des idées distinctes, préférez créer deux éléments <p> séparés.

Exemple pratique

Imaginons que vous voulez rédiger un article sur votre jeu vidéo préféré. Vous pouvez utiliser les balises de titres pour structurer votre article, et les balises <br/> et <hr/> pour organiser votre texte.

<h1>Mon jeu vidéo préféré : The Legend of Zelda</h1>
<h2>Introduction</h2>
<p>The Legend of Zelda est un jeu d'aventure fantastique.<br/> Il a été développé par Nintendo.</p>
<hr/>
<h2>Pourquoi j'aime ce jeu</h2>
<p>J'aime ce jeu pour sa liberté d'exploration et sa richesse de contenu. <br/> De plus, les graphismes sont magnifiques.</p>

Les balises à connaître

<h1> à <h6> : Définissent les titres. <h1> est le plus important et <h6> le moins important.
<br/> : Insère un saut de ligne.
<hr/> : Insère une ligne horizontale.

Test de mémorisation/compréhension

TP pour réfléchir et résoudre des problèmes

Votre mission consiste à créer une page HTML qui présente votre parcours scolaire.

Dans votre répertoire "Documents", créez le répertoire tp_parcours_scolaire
Dans le répertoire tp_parcours_scolaire, créez le fichier index.html
Pour ce TP, votre défi sera de créer une page HTML qui présente votre parcours scolaire :
- Un titre principal <h1> qui donne votre nom :
```
<h1>Mon parcours scolaire : Jean Dupont</h1>
```
- Plusieurs sous-titres <h2> pour chaque étape de votre parcours (par exemple, "École primaire", "Collège", "Lycée", "Université", etc.) :
```
<h2>École primaire</h2>
<h2>Collège</h2>
<h2>Lycée</h2>
<h2>Université</h2>
```
- Pour chaque étape, vous pouvez ajouter des sous-parties <h3> pour les années spécifiques ou les événements marquants :
```
<h2>Lycée</h2>
<h3>Seconde</h3>
```
- Des paragraphes de texte <p> pour chaque section, avec des sauts de ligne <br/> pour séparer les idées :
```
<h3>Seconde</h3>
<p>J'ai choisi de suivre l'option sciences de l'ingénieur.<br/> 
   J'ai découvert le monde de la programmation.</p>
```
- Des lignes horizontales <hr/> pour séparer les parties de votre parcours :
```
<hr/>
<h2>Lycée</h2>
```
- N'oubliez pas de structurer votre page avec les balises <html>, <head> et <body>, et de donner un titre à votre page avec la balise <title> :
```
<head>
    <title>Mon parcours scolaire</title>
</head>
```

Bonne pratique - Balise hr

La balise <hr/> est sémantique — elle indique un changement thématique, pas juste une ligne décorative.

Une solution

Les balises de titres

Notions théoriques