PhpBB Lab Académie

Structurer le contenu visible d’une page avec un titre principal, des sous-titres et des paragraphes, comprendre la hiérarchie des niveaux h1 à h6 et apprendre à choisir un niveau de titre pour son rôle dans le document plutôt que pour son apparence.

Nous allons maintenant organiser le contenu visible de la page

Dans la leçon précédente, vous avez construit un document HTML complet avec :

-

<!doctype html>

;
-

html

;
-

head

;
-

meta charset="utf-8"

;
-

title

;
-

body

.

Vous savez également que le contenu principal visible se place dans :

body

Jusqu’à présent, ce contenu se limitait à un paragraphe.

Nous allons maintenant apprendre à organiser une vraie page avec :

- un titre principal ;
- des sections ;
- des sous-sections ;
- des paragraphes.

Cette organisation est importante pour tous les utilisateurs, mais aussi pour les moteurs de recherche et les technologies d’assistance comme les lecteurs d’écran.

1. Reprendre le fichier index.html

Ouvrez le fichier

index.html

utilisé depuis le début du cours.

Conservez toute la structure créée dans la leçon précédente.

Nous allons uniquement modifier ce qui se trouve dans :

<body>
    ...
</body>

Votre document peut donc commencer ainsi :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Mon apprentissage du HTML</title>
</head>
<body>

</body>
</html>

Ne modifiez pas

head

pour cet exercice.

2. Le titre principal avec h1

HTML possède plusieurs niveaux de titres.

Le titre principal de notre page sera écrit avec :

<h1>

Par exemple :

<h1>Mon apprentissage du HTML</h1>

L’élément

h1

représente le titre principal du contenu de la page.

Dans ce cours, nous utiliserons un seul

h1

pour identifier clairement le sujet principal de chaque page.

Ajoutez donc dans

body

:

<h1>Mon apprentissage du HTML</h1>

Enregistrez puis actualisez la page.

Le titre apparaît généralement plus grand que le texte ordinaire.

Mais cette apparence n’est pas la raison pour laquelle nous avons choisi

h1

.

Nous avons choisi

h1

parce que ce texte est le titre principal de la page.

3. Le chiffre indique un niveau, pas une taille

HTML propose six niveaux de titres :

h1
h2
h3
h4
h5
h6

Le chiffre indique le niveau du titre dans la structure du document.

Il ne signifie pas :

h1 = très grand
h2 = un peu moins grand
h3 = petit

Les navigateurs appliquent souvent des tailles différentes par défaut, mais cette apparence pourra être modifiée plus tard avec CSS.

En HTML, ce qui compte est la hiérarchie.

Retenez :

h1 = titre principal
h2 = section importante du contenu
h3 = sous-section d’un h2
h4 = sous-section d’un h3
...

4. Ajouter un premier paragraphe

Vous connaissez déjà l’élément :

p

Il représente un paragraphe.

Sous votre

h1

, ajoutez :

<p>Je découvre progressivement comment structurer une page web avec HTML.</p>

Vous avez maintenant :

<h1>Mon apprentissage du HTML</h1>
<p>Je découvre progressivement comment structurer une page web avec HTML.</p>

Le titre annonce le sujet principal.

Le paragraphe développe une idée complète sous ce titre.

5. Créer une première section avec h2

Nous voulons maintenant ajouter une partie consacrée à ce que nous avons déjà appris.

Cette partie appartient au contenu principal de la page, mais elle n’est pas le titre principal.

Nous utilisons donc un titre de niveau 2 :

<h2>Ce que je sais déjà</h2>

Puis un paragraphe :

<p>Je sais créer un fichier HTML, utiliser des balises et construire la structure de base d’un document.</p>

Le contenu devient :

<h1>Mon apprentissage du HTML</h1>
<p>Je découvre progressivement comment structurer une page web avec HTML.</p>

<h2>Ce que je sais déjà</h2>
<p>Je sais créer un fichier HTML, utiliser des balises et construire la structure de base d’un document.</p>

Nous avons maintenant une hiérarchie simple :

h1 : sujet principal
    h2 : première grande section

6. Ajouter une deuxième section de même niveau

Nous voulons ensuite une autre grande partie de la page :

<h2>Ce que je vais apprendre</h2>

Elle est au même niveau que :

Ce que je sais déjà

Nous utilisons donc encore

h2

.

Ajoutez :

<h2>Ce que je vais apprendre</h2>
<p>Je vais apprendre à organiser du texte, créer des liens, ajouter des images et construire des formulaires.</p>

La structure devient :

h1 : Mon apprentissage du HTML
    h2 : Ce que je sais déjà
    h2 : Ce que je vais apprendre

Les deux

h2

sont deux sections différentes placées directement sous le même titre principal.

7. Ajouter une sous-section avec h3

Dans la section :

Ce que je vais apprendre

nous voulons maintenant ajouter une partie plus précise consacrée à l’accessibilité.

Comme cette partie dépend du

h2

précédent, nous utilisons un

h3

:

<h3>L’accessibilité</h3>

Ajoutez ensuite :

<p>Je vais apprendre à utiliser HTML de manière à donner une structure claire aux utilisateurs et aux technologies d’assistance.</p>

Nous obtenons :

h1 : Mon apprentissage du HTML
    h2 : Ce que je sais déjà
    h2 : Ce que je vais apprendre
        h3 : L’accessibilité

Cette représentation permet de voir immédiatement les relations entre les titres.

8. Pourquoi ne pas utiliser h3 directement après h1 ?

Supposons que vous écriviez :

<h1>Mon apprentissage du HTML</h1>
<h3>L’accessibilité</h3>

Le navigateur affichera probablement les deux titres.

Mais la structure saute directement du niveau 1 au niveau 3.

Pour une page simple comme la nôtre, cela rend la hiérarchie moins claire.

Nous préférons construire une progression logique :

h1
    h2
        h3

Le niveau d’un titre doit correspondre à sa place dans l’organisation du contenu.

9. Ne pas choisir un titre pour son apparence

Imaginons que vous trouvez le texte d’un

h2

trop grand.

Il serait incorrect de remplacer simplement :

<h2>Ce que je sais déjà</h2>

par :

<h4>Ce que je sais déjà</h4>

uniquement parce que

h4

apparaît plus petit dans le navigateur.

Vous changeriez alors le sens de la structure.

Plus tard, CSS permettra de modifier l’apparence sans changer le niveau du titre.

Retenez :

HTML choisit le rôle du titre.
CSS modifiera son apparence.

10. Un titre doit décrire ce qui suit

Un bon titre aide l’utilisateur à comprendre immédiatement le contenu de la section.

Par exemple :

<h2>Ce que je sais déjà</h2>

est plus utile que :

<h2>Informations</h2>

Pourquoi ?

Parce que le premier titre annonce précisément ce que contient la section.

Cette précision est utile pour une personne qui parcourt rapidement la page et pour un utilisateur de lecteur d’écran qui navigue de titre en titre.

11. L’importance de la hiérarchie pour les lecteurs d’écran

Les lecteurs d’écran peuvent proposer une navigation par titres.

Un utilisateur peut donc parcourir rapidement une page et entendre quelque chose comme :

Titre niveau 1 : Mon apprentissage du HTML
Titre niveau 2 : Ce que je sais déjà
Titre niveau 2 : Ce que je vais apprendre
Titre niveau 3 : L’accessibilité

La hiérarchie HTML devient donc une véritable carte du contenu.

C’est une raison importante pour ne pas choisir les niveaux de titres uniquement selon leur apparence visuelle.

12. Un paragraphe contient une idée développée

L’élément

p

sert à représenter un paragraphe.

Par exemple :

<p>Je sais maintenant créer un document HTML complet.</p>

Lorsque vous commencez une nouvelle idée distincte, vous pouvez créer un nouveau paragraphe :

<p>Je sais maintenant créer un document HTML complet.</p>
<p>Je vais ensuite apprendre à organiser plusieurs types de contenu.</p>

Deux paragraphes ne doivent pas être créés simplement en ajoutant plusieurs espaces ou plusieurs retours à la ligne dans le texte.

Nous utilisons deux éléments

p

parce qu’il s’agit de deux paragraphes distincts.

13. Construire la page complète

Remplacez maintenant le contenu de

body

par :

<body>
    <h1>Mon apprentissage du HTML</h1>
    <p>Je découvre progressivement comment structurer une page web avec HTML.</p>

    <h2>Ce que je sais déjà</h2>
    <p>Je sais créer un fichier HTML, utiliser des balises et construire la structure de base d’un document.</p>

    <h2>Ce que je vais apprendre</h2>
    <p>Je vais apprendre à organiser du texte, créer des liens, ajouter des images et construire des formulaires.</p>

    <h3>L’accessibilité</h3>
    <p>Je vais apprendre à utiliser HTML de manière à donner une structure claire aux utilisateurs et aux technologies d’assistance.</p>
</body>

Enregistrez puis actualisez.

Vous devez voir plusieurs titres et paragraphes.

Mais surtout, vous devez être capable d’expliquer pourquoi chaque niveau de titre a été choisi.

14. Vérifier la structure sans regarder uniquement le rendu

Ne vous contentez pas de dire :

Le plus grand texte est h1.
Le plus petit est h3.

Ce raisonnement serait visuel.

Vérifiez plutôt :

- Quel est le sujet principal de la page ?
- Quelles sont les grandes sections de ce sujet ?
- Existe-t-il une sous-section appartenant à l’une de ces sections ?

Dans notre page :

Sujet principal
-> Mon apprentissage du HTML

Grandes sections
-> Ce que je sais déjà
-> Ce que je vais apprendre

Sous-section de "Ce que je vais apprendre"
-> L’accessibilité

C’est cette logique qui doit déterminer les niveaux.

15. Les niveaux h4, h5 et h6 existent aussi

HTML propose également :

h4
h5
h6

Ils permettent de poursuivre une hiérarchie lorsque le contenu devient très détaillé.

Nous n’allons pas les utiliser artificiellement dans notre petite page.

Un bon document n’a pas besoin d’utiliser tous les niveaux.

Il utilise uniquement les niveaux nécessaires à son organisation.

16. Ce que vous devez savoir avant de poursuivre

Vous devez maintenant comprendre que :

-

h1

représente le titre principal de notre page ;
-

h2

représente une grande section sous ce titre ;
-

h3

représente une sous-section d’un

h2

;
- les niveaux indiquent une hiérarchie, pas une taille visuelle ;
-

p

représente un paragraphe ;
- les titres doivent décrire clairement le contenu qui suit ;
- une structure logique améliore notamment la navigation avec les technologies d’assistance.

Dans la prochaine leçon, nous allons continuer à organiser le contenu en créant des listes HTML.

Imaginons une page consacrée à un club de randonnée.

Une structure logique pourrait être :

<h1>Club de randonnée des Ardennes</h1>
<p>Bienvenue sur le site de notre club.</p>

<h2>Nos activités</h2>
<p>Nous organisons des sorties tout au long de l’année.</p>

<h3>Randonnées du week-end</h3>
<p>Ces sorties sont ouvertes aux membres débutants et expérimentés.</p>

<h2>Nous rejoindre</h2>
<p>Vous pouvez nous contacter pour participer à une première sortie.</p>

La hiérarchie est :

h1 : Club de randonnée des Ardennes
    h2 : Nos activités
        h3 : Randonnées du week-end
    h2 : Nous rejoindre

Randonnées du week-end

utilise

h3

parce qu’il s’agit d’une partie de la section

Nos activités

.

Nous rejoindre

revient au niveau

h2

parce qu’il s’agit d’une nouvelle grande section de la page.

Reprenez votre fichier

index.html

.

Conservez toute la structure du document étudiée dans la leçon précédente.

Dans

body

, créez le contenu suivant :

1. Un titre principal :

Mon premier site HTML

2. Un paragraphe d’introduction expliquant en une phrase que vous apprenez HTML.

3. Une première grande section :

Ce que j’ai appris

4. Un paragraphe qui résume ce que vous connaissez déjà.

5. Une deuxième grande section :

La suite de mon apprentissage

6. Un paragraphe expliquant ce que vous souhaitez encore apprendre.

7. À l’intérieur de cette deuxième section, créez une sous-section :

L’accessibilité

8. Ajoutez un paragraphe sous cette sous-section.

Choisissez vous-même les éléments

h1

,

h2

ou

h3

adaptés à chaque titre.

Ne choisissez pas les niveaux en fonction de leur taille dans le navigateur.

Pour terminer, écrivez la hiérarchie de votre page sous cette forme :

h1 : ...
    h2 : ...
    h2 : ...
        h3 : ...

et expliquez pourquoi

L’accessibilité

n’est pas au même niveau que le titre principal.

HTML propose six niveaux de titres :

h1
h2
h3
h4
h5
h6

Le chiffre représente un niveau dans la hiérarchie du contenu.

Dans notre cours :

h1 = titre principal de la page
h2 = grande section
h3 = sous-section d’un h2

Nous n’utilisons pas un niveau de titre parce que sa taille visuelle nous plaît.

L’apparence sera gérée plus tard avec CSS.

Un bon titre décrit clairement le contenu de la section qui suit.

Une hiérarchie logique aide tous les utilisateurs à comprendre la page et permet notamment aux utilisateurs de lecteurs d’écran de naviguer efficacement de titre en titre.

L’élément :

p

représente un paragraphe.

Deux idées distinctes peuvent être placées dans deux éléments

p

séparés.

À partir de maintenant, nous organiserons nos pages en réfléchissant d’abord au sens et à la hiérarchie du contenu.

Dans la prochaine leçon, nous apprendrons à créer des listes HTML.