Construire le web : balises, sens, imbrication

Construire sa page

Une page web est faite de balises qui décrivent le sens de ce qu’elles contiennent, et qui s’imbriquent les unes dans les autres pour former le contenu.

La balise

Les balises servent à indiquer le type d’un contenu et à circonscrire sa portée.

s’ouvre,
contient quelque chose,
et se referme.

<p>Bonjour, monde.</p>

<p> signifie paragraphe. Le navigateur lit cette balise et comprend que le texte qu’elle contient est un paragraphe.

L’anatomie minimale d’une page

Toute page HTML repose sur trois balises imbriquées :

<html>
  <head>
    <title>Le titre de la page</title>
  </head>
  <body>
    <p>Le contenu visible.</p>
  </body>
</html>

<html> enveloppe l’ensemble du document.
<head> contient les informations de la page (titre dans l’onglet, langue, encodage, liens vers les styles), utiles pour le navigateur mais invisibles à l’utilisateur.
<body> contient ce que le visiteur voit réellement.

Les balises sémantiques

HTML propose un vocabulaire de balises qui nomment précisément ce que contient une page. Les principales :

<header> — l’en-tête d’une page ou d’une section
<nav> — la navigation principale
<main> — le contenu principal de la page
<article> — un contenu autonome (un billet, un article, une notice)
<section> — une section thématique
<aside> — un contenu en marge, secondaire
<footer> — le pied de page ou de section
<figure> / <figcaption> — une image avec sa légende

À côté, deux balises non sémantiques existent et restent utiles quand aucune balise précise ne convient :

<div> — un bloc générique
<span> — un fragment de texte générique

Le bon réflexe est de commencer par chercher la balise sémantique qui existe, puis recourir à <div> quand rien d’autre ne convient.

Les balises autofermantes

Il y a quelques cas particuliers de balises qui n’ont pas de balise ouvrante et fermantes. On les appelle aussi éléments vides car ce ce qu’ils sont : ils ne contiennent pas de contenu en soi.

Les principales :

<img> : ne contient pas de contenu en soi, mais sert de référence à une image externe. on écrit ainsi <img src="lien-vers-limage.jpg"/>
<br> : indique un retour à la ligne
<hr> : créer une ligne horizontale

On peut écrire <img> ou <img/> indifféremment.

L’imbrication

Les balises se contiennent les unes les autres. C’est ce qu’on appelle l’imbrication (ou nesting en anglais).

<article>
  <header>
    <h1>Promenade au bord du Trieux</h1>
    <p>Publié le 14 mai 2026</p>
  </header>
  <p>Le matin était frais et la lumière oblique.</p>
  <figure>
    <img src="bord-trieux.jpg" alt="Le Trieux à marée basse">
    <figcaption>Le Trieux à marée basse, 8h.</figcaption>
  </figure>
</article>

L’<article> contient un <header>, qui contient un titre et une date. Plus loin, une <figure> contient une image et sa légende. Une page est un emboîtement de boîtes — chaque boîte a un sens, et peut en contenir d’autres.

Une bonne imbrication :

 <p>Voici un paragraphe composé de quelques mots. Celui-ci est en <strong>gras</strong> pour présenter l’imbrication</p>

Une mauvaise imbrication :

 <p>Voici un paragraphe composé de quelques mots. Celui-ci est en <strong>gras</p> pour présenter l’imbrication</strong>

Une structure en arbre

Cette imbrication forme un arbre (tree). Chaque balise est un nœud (node) ; les balises qu’elle contient sont ses enfants (child) ; celle qui la contient est son parent (parent).

html
├── head
│   └── title
└── body
    └── article
        ├── header
        │   ├── h1
        │   └── p
        ├── p
        └── figure
            ├── img
            └── figcaption

L’arbre n’est pas une métaphore choisie au hasard : c’est la même structure que les arbres généalogiques, les arborescences de fichiers, les sommaires hiérarchiques. C’est une forme de pensée bien antérieure au web.

Pourquoi le sens compte

Accessibilité : les lecteurs d’écran (utilisés par les personnes aveugles ou malvoyantes) annoncent à voix haute « titre de niveau 1 », « navigation », « article ». Une page sans balises sémantiques devient illisible pour ces outils.
Référencement : les moteurs de recherche utilisent la structure pour comprendre ce qui est important sur une page.
Pérennité : un document bien balisé peut être relu, transformé, archivé par d’autres outils que le navigateur (lecteurs de flux, archiveurs, traducteurs automatiques).
Maintenance : un code dont les balises portent le sens se relit plus facilement, des mois ou des années plus tard.

Pour s’exercer

Sur n’importe quelle page web, clic droit → Inspecter l’élément. Vous verrez l’arbre des balises qui structure la page.
Sur une page bien faite (Wikipédia, par exemple), repérez <article>, <header>, <nav>.

Documentation

MDN Web Docs

Référence des éléments HTML

Eliott Cost, https://polinsski.digitale-grafik.com, encre sur papier, 2025