PhpBB Lab Académie

Organiser le contenu principal d’une page avec section et article, comprendre la différence entre un regroupement thématique et un contenu autonome, puis conserver une hiérarchie de titres cohérente lorsque ces éléments sont imbriqués.

Nous allons organiser l’intérieur de main sans transformer chaque bloc en section

Dans la leçon précédente, vous avez structuré votre page avec :

header
nav
main
footer

Vous savez maintenant que

main

contient le contenu principal propre à la page.

Mais

main

peut lui-même contenir plusieurs parties.

Par exemple, une page d’accueil peut présenter :

- une introduction ;
- ce que vous apprenez ;
- vos dernières notes de progression ;
- plusieurs contenus indépendants.

Nous allons apprendre à structurer ces parties avec :

section
article

La difficulté n’est pas d’apprendre deux nouvelles balises.

La difficulté est de savoir quand elles ont réellement un sens.

1. Reprendre notre page actuelle

Après la leçon précédente, votre contenu principal peut ressembler à ceci :

<main>
    <h1>Accueil</h1>
    <p>Bienvenue sur mon premier site HTML.</p>

    <h2>Ce que j’apprends</h2>
    <p>Je découvre progressivement comment structurer des pages web avec HTML.</p>
</main>

Cette structure est déjà correcte.

Nous n’allons pas ajouter

section

simplement parce que la balise existe.

Nous allons d’abord comprendre ce qu’elle représente.

2. Qu’est-ce qu’une section ?

Une

section

représente une partie thématique d’un document.

Autrement dit, plusieurs contenus appartiennent à un même sujet précis.

Par exemple :

Ce que j’apprends

peut être une véritable section de notre page.

Nous pouvons écrire :

<section>
    <h2>Ce que j’apprends</h2>
    <p>Je découvre progressivement comment structurer des pages web avec HTML.</p>
</section>

Ici, le titre et le paragraphe parlent du même thème.

La

section

regroupe donc un ensemble cohérent.

3. Dans ce cours, une section aura un titre

Pour garder une structure claire, nous utiliserons

section

lorsque la partie peut être identifiée par un véritable titre.

Par exemple :

<section>
    <h2>Mes objectifs</h2>
    <p>Je veux apprendre à construire des pages HTML accessibles.</p>
</section>

Le titre :

Mes objectifs

explique immédiatement le sujet de la section.

Cette habitude améliore la lisibilité du code et la compréhension de la page.

Retenez pour le moment :

section = partie thématique identifiable par un titre

4. Ne pas créer une section uniquement pour entourer un paragraphe

Regardez :

<section>
    <p>Bienvenue sur mon site.</p>
</section>

Cette écriture n’est pas forcément utile.

Nous avons entouré un paragraphe avec

section

, mais nous n’avons pas identifié de véritable thème ou partie du document.

Dans un cas aussi simple, le paragraphe peut rester directement dans

main

:

<main>
    <h1>Accueil</h1>
    <p>Bienvenue sur mon premier site HTML.</p>
</main>

Le principe est important :

nous n’ajoutons pas une balise sémantique uniquement pour avoir davantage de balises

5. Transformer une grande partie en section

Reprenons :

<h2>Ce que j’apprends</h2>
<p>Je découvre progressivement comment structurer des pages web avec HTML.</p>

Comme ces contenus forment une partie thématique claire, nous pouvons écrire :

<section>
    <h2>Ce que j’apprends</h2>
    <p>Je découvre progressivement comment structurer des pages web avec HTML.</p>
</section>

Nous n’avons pas changé le niveau du titre.

Le

h1

reste le titre principal de la page.

Le

h2

reste une grande partie placée sous ce

h1

.

6. section ne choisit pas le niveau du titre

Une erreur fréquente serait de penser :

J’utilise section, donc je dois toujours mettre h1 à l’intérieur.

Ce n’est pas notre règle.

Le niveau du titre dépend de la hiérarchie du contenu.

Dans notre page :

h1 : Accueil
    h2 : Ce que j’apprends

Le titre de la section reste donc :

<h2>Ce que j’apprends</h2>

L’élément

section

décrit le regroupement.

Le titre

h2

décrit sa place dans la hiérarchie.

7. Ajouter une deuxième section

Nous pouvons ajouter une autre grande partie au même niveau :

<section>
    <h2>Mes prochaines étapes</h2>
    <p>Je vais continuer à apprendre la structure sémantique de HTML.</p>
</section>

Nous avons maintenant :

main
    h1 : Accueil
    section
        h2 : Ce que j’apprends
    section
        h2 : Mes prochaines étapes

Les deux

h2

sont au même niveau parce que les deux sections sont deux grandes parties de la page.

8. Qu’est-ce qu’un article ?

L’élément :

article

représente un contenu qui peut être compris comme une unité relativement autonome.

Par exemple :

- un article de blog ;
- une actualité ;
- un message de forum ;
- une fiche indépendante ;
- une publication.

L’idée importante est que ce contenu pourrait garder un sens s’il était présenté séparément du reste de la page.

Retenez :

article = contenu autonome ou réutilisable comme une unité complète

9. Exemple d’article

Imaginons que notre page présente une note de progression :

<article>
    <h3>Ma première page complète</h3>
    <p>J’ai réussi à créer une page avec un en-tête, une navigation, un contenu principal et un pied de page.</p>
</article>

Ce bloc possède :

- son propre titre ;
- son propre contenu ;
- une idée complète.

Il peut donc être considéré comme un petit contenu autonome.

10. section et article ne veulent pas dire la même chose

Comparons :

section = regroupe une partie du document autour d’un thème
article = représente un contenu autonome

Prenons une section intitulée :

Mes notes de progression

Elle peut contenir plusieurs articles :

<section>
    <h2>Mes notes de progression</h2>

    <article>
        <h3>Ma première page complète</h3>
        <p>J’ai construit une page HTML complète.</p>
    </article>

    <article>
        <h3>Mes premiers liens internes</h3>
        <p>J’ai relié trois pages de mon site avec des chemins relatifs.</p>
    </article>
</section>

Ici :

section = thème général : Mes notes de progression
article = une note précise et autonome

11. Comprendre la hiérarchie des titres dans cet exemple

Notre page possède un :

<h1>Accueil</h1>

La grande section :

Mes notes de progression

utilise donc :

h2

À l’intérieur de cette section, chaque article est une subdivision de cette grande partie.

Nous utilisons :

h3

Nous obtenons :

h1 : Accueil
    h2 : Mes notes de progression
        h3 : Ma première page complète
        h3 : Mes premiers liens internes

Le choix des niveaux reste basé sur la hiérarchie.

12. article peut avoir son propre header

Vous savez maintenant qu’un

header

peut être l’en-tête d’une page, mais il peut aussi servir à introduire une partie de contenu.

Par exemple :

<article>
    <header>
        <h3>Ma première page complète</h3>
        <p>Note de progression</p>
    </header>

    <p>J’ai réussi à structurer ma page avec des éléments sémantiques.</p>
</article>

Ici, le

header

appartient à l’article.

Il ne s’agit pas du grand en-tête du site.

Vous découvrez donc qu’un élément sémantique peut parfois être utilisé dans plusieurs contextes selon son rôle.

13. Mais nous n’ajoutons pas header partout

L’exemple précédent est valide, mais nous n’avons pas besoin d’un

header

dans chaque article.

Si l’article contient simplement un titre et un paragraphe :

<article>
    <h3>Mes premiers liens internes</h3>
    <p>J’ai relié plusieurs pages avec des chemins relatifs.</p>
</article>

cette structure est déjà claire.

Nous ajoutons une balise uniquement lorsqu’elle apporte un sens utile.

14. Une section peut contenir des articles

Reprenons la structure complète :

<section>
    <h2>Mes notes de progression</h2>

    <article>
        <h3>Ma première page complète</h3>
        <p>J’ai appris à utiliser header, nav, main et footer.</p>
    </article>

    <article>
        <h3>Mes premiers liens internes</h3>
        <p>J’ai relié index.html, apropos.html et contact.html.</p>
    </article>
</section>

Cette structure a du sens parce que :

- la

section

définit le thème général ;
- chaque

article

représente une publication autonome dans ce thème.

15. Un article n’est pas simplement « un bloc avec beaucoup de texte »

La longueur du contenu ne décide pas si nous devons utiliser

article

.

Un petit contenu peut être un article s’il constitue une unité autonome.

À l’inverse, un long paragraphe n’est pas automatiquement un article.

Posez-vous cette question :

Ce contenu pourrait-il être compris comme une publication ou une unité indépendante ?

Si oui,

article

peut être pertinent.

Sinon, une

section

, un paragraphe ou une autre structure peut être plus adaptée.

16. Ne pas utiliser section comme un conteneur générique

Vous rencontrerez plus tard l’élément :

div

qui peut servir de conteneur sans apporter le même sens sémantique.

Nous ne l’étudions pas encore.

Mais retenez déjà que :

section

n’est pas une balise que l’on ajoute à chaque fois que l’on veut simplement « entourer quelque chose ».

Elle doit représenter une vraie partie thématique du document.

17. Transformer notre main

Nous pouvons maintenant faire évoluer

index.html

.

Le contenu principal devient par exemple :

<main>
    <h1>Accueil</h1>
    <p>Bienvenue sur mon premier site HTML.</p>

    <section>
        <h2>Ce que j’apprends</h2>
        <p>Je découvre progressivement comment structurer des pages web avec HTML.</p>
    </section>

    <section>
        <h2>Mes notes de progression</h2>

        <article>
            <h3>Ma première page complète</h3>
            <p>J’ai appris à utiliser header, nav, main et footer.</p>
        </article>

        <article>
            <h3>Mes premiers liens internes</h3>
            <p>J’ai relié index.html, apropos.html et contact.html.</p>
        </article>
    </section>
</main>

Cette page possède maintenant une organisation beaucoup plus expressive.

18. Observer le plan de la page

La hiérarchie est :

h1 : Accueil
    h2 : Ce que j’apprends
    h2 : Mes notes de progression
        h3 : Ma première page complète
        h3 : Mes premiers liens internes

Remarquez que l’ajout de

section

et

article

n’a pas cassé notre hiérarchie de titres.

Au contraire, les deux systèmes se complètent :

éléments sémantiques = rôle des zones
titres = hiérarchie du contenu

19. Tester avec un lecteur d’écran

Si vous utilisez un lecteur d’écran, parcourez d’abord les titres.

Vous devez retrouver une progression logique :

Accueil
Ce que j’apprends
Mes notes de progression
Ma première page complète
Mes premiers liens internes

Selon votre navigateur et votre lecteur d’écran, certains éléments sémantiques peuvent également être annoncés comme des régions ou des structures particulières.

L’essentiel reste que le document soit compréhensible même en navigation par titres.

20. section et article ne remplacent pas p, h2 ou h3

Une

section

ne remplace pas son titre.

Un

article

ne remplace pas son contenu.

Nous écrivons donc :

<section>
    <h2>Mes notes de progression</h2>
    ...
</section>

et :

<article>
    <h3>Ma première page complète</h3>
    <p>J’ai construit une page HTML complète.</p>
</article>

Chaque élément possède un rôle précis.

21. Une question simple pour choisir

Lorsque vous hésitez, utilisez ce raisonnement :

Est-ce une grande partie thématique de la page ?
-> section peut être adaptée.

Est-ce une unité de contenu qui pourrait être comprise séparément ?
-> article peut être adapté.

Est-ce simplement un paragraphe ?
-> p suffit peut-être.

Est-ce uniquement un regroupement sans signification particulière ?
-> n’utilisez pas section uniquement pour ajouter une balise.

22. Ce que nous ne faisons pas encore

Il existe d’autres éléments sémantiques comme :

aside
figure
figcaption

Ils ont leur propre rôle.

Nous ne les ajoutons pas maintenant.

Notre objectif est de maîtriser correctement :

section
article
hiérarchie des titres

avant de continuer.

Avant de passer à la suite

Vous devez maintenant savoir expliquer :

- ce qu’est une

section

;
- pourquoi nous cherchons à lui donner un titre clair dans ce cours ;
- pourquoi

section

n’est pas un simple emballage générique ;
- ce qu’est un

article

;
- pourquoi un article doit avoir un sens relativement autonome ;
- comment une section peut contenir plusieurs articles ;
- pourquoi un

h2

peut titrer la section et des

h3

titrer les articles qu’elle contient ;
- pourquoi les éléments sémantiques et les titres jouent des rôles complémentaires.

Dans la prochaine leçon, nous apprendrons à créer un tableau uniquement lorsque les données ont réellement besoin de lignes et de colonnes.

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

Le contenu principal pourrait être :

<main>
    <h1>Club de randonnée</h1>
    <p>Découvrez nos activités et nos dernières sorties.</p>

    <section>
        <h2>Nos activités</h2>
        <p>Le club organise des randonnées toute l’année.</p>
    </section>

    <section>
        <h2>Dernières sorties</h2>

        <article>
            <h3>Randonnée à Spa</h3>
            <p>Une sortie de 12 kilomètres organisée dimanche dernier.</p>
        </article>

        <article>
            <h3>Balade dans les Hautes Fagnes</h3>
            <p>Une sortie accessible aux débutants.</p>
        </article>
    </section>
</main>

Nos activités

est une partie thématique : elle utilise

section

.

Dernières sorties

est également une grande partie thématique.

Chaque sortie peut être comprise comme une publication distincte : chacune utilise donc

article

.

La hiérarchie des titres reste :

h1 : Club de randonnée
    h2 : Nos activités
    h2 : Dernières sorties
        h3 : Randonnée à Spa
        h3 : Balade dans les Hautes Fagnes

Reprenez votre fichier

index.html

après la leçon précédente.

Conservez :

-

header

;
-

nav

;
-

main

;
-

footer

.

Travaillez uniquement à l’intérieur de

main

.

1. Conservez :

<h1>Accueil</h1>

2. Ajoutez un paragraphe d’introduction.

3. Créez une

section

intitulée :

Ce que j’apprends

4. À l’intérieur, ajoutez un paragraphe expliquant votre progression en HTML.

5. Créez une deuxième

section

intitulée :

Mes notes de progression

6. Dans cette deuxième section, créez deux

article

.

Le premier doit avoir pour titre :

Ma première page complète

Le second :

Mes premiers liens internes

7. Ajoutez un paragraphe dans chaque article.

8. Choisissez les niveaux de titres adaptés en respectant la hiérarchie déjà apprise.

9. Enregistrez puis actualisez la page.

10. Parcourez les titres dans l’ordre et vérifiez que vous obtenez une hiérarchie logique.

Pour terminer, expliquez pourquoi :

Mes notes de progression

est une

section

, tandis que :

Ma première page complète

peut être placé dans un

article

.

section

représente une partie thématique d’un document.

Dans ce cours, nous l’utiliserons pour des parties clairement identifiables par un titre.

Exemple :

<section>
    <h2>Mes objectifs</h2>
    <p>...</p>
</section>

article

représente un contenu relativement autonome, par exemple une publication, une actualité ou une note pouvant être comprise comme une unité complète.

Exemple :

<article>
    <h3>Ma première page complète</h3>
    <p>...</p>
</article>

Une section peut contenir plusieurs articles :

<section>
    <h2>Mes notes</h2>

    <article>
        <h3>Première note</h3>
        ...
    </article>

    <article>
        <h3>Deuxième note</h3>
        ...
    </article>
</section>

Les éléments sémantiques et les titres ont des rôles complémentaires.

section

et

article

décrivent le rôle des regroupements.

h1

,

h2

,

h3

décrivent la hiérarchie des titres.

Nous n’utilisons pas

section

uniquement pour ajouter un conteneur autour de n’importe quel contenu.

Dans la prochaine leçon, nous apprendrons à créer un tableau uniquement lorsque les données ont réellement une structure en lignes et en colonnes.