Aller au contenu

Structure de la page

Une page bien structurée communique du sens aux navigateurs, aux moteurs de recherche et aux technologies d'assistance.

Les balises HTML décrivent ce que le contenu signifie, pas seulement à quoi il ressemble. Quand vous utilisez header pour le haut, nav pour la navigation, main pour le contenu principal et footer pour le bas, vous créez des pages qui ont du sens même sans style visuel. Cette structure sémantique est le fondement de l'accessibilité et du SEO.

Deux principes clés :

  1. Utilisez la bonne balise pour la bonne tâche. Chaque section de votre page a un objectif — marquez cet objectif avec la balise HTML appropriée.
  2. La hiérarchie des titres compte. Structurez les titres logiquement : un h1 par page, puis h2 pour les sections majeures, h3 pour les sous-sections, etc.

Structure typique d'une page

La plupart des sites web suivent ce schéma :

header
  nav (menu principal)
main
  section (par ex., héro)
  section (par ex., fonctionnalités)
  section (par ex., témoignage)
footer
  nav (liens secondaires)

C'est flexible — adaptez à votre contenu. Une simple page d'atterrissage pourrait n'avoir que main et footer. Une page à sections multiples pourrait imbriquer des sections dans des articles. L'important est d'utiliser les balises sémantiques intentionnellement.

Balises de conteneur sémantiques

Changez la balise de n'importe quel conteneur en utilisant le menu déroulant Tag Name dans le panneau Attributs. Voici quand utiliser chaque balise sémantique.

Header est le contenu d'introduction, généralement en haut d'une page ou d'une section.

En-tête de page : Contient le logo du site, le titre du site, le slogan et la navigation principale. Apparaît généralement sur chaque page.

header
  img (logo)
  h1 (titre du site)
  nav

En-tête de section : À l'intérieur d'une section ou d'un article pour l'introduire.

section
  header
    h2 (titre de la section)
    p (description)
  (contenu de la section)

Vous pouvez avoir plusieurs en-têtes sur une page — un pour la page, un par section, un par article. Utilisez-en autant que nécessaire pour votre structure.

Nav regroupe les liens de navigation.

Quand l'utiliser : Les blocs de navigation majeurs — menu principal, fil d'Ariane, table des matières, navigation secondaire.

Quand ne pas l'utiliser : Un simple lien ou un petit groupe de liens de barre latérale qui ne constituent pas une navigation majeure.

Modèle : Englobez les liens dans une liste pour l'accessibilité.

nav
  ul
    li
      a (lien accueil)
    li
      a (lien à propos)
    li
      a (lien contact)

Les lecteurs d'écran annoncent « liste de 3 éléments », aidant les visiteurs à comprendre la structure.

Main

Main marque le contenu principal — le contenu unique à cette page, non répété sur le site.

Règles : - À utiliser une seule fois par page - Ne doit pas être imbriqué dans header, footer, nav ou aside — c'est un repère de premier niveau - Englobez tout le contenu spécifique à la page à l'intérieur

header (partagé)
nav (partagé)
main (spécifique à la page)
  section
  section
  article
footer (partagé)

Section

Section regroupe du contenu thématiquement lié.

Règles : - Devrait avoir un titre comme premier enfant ou parmi les premiers - Sans titre, utilisez div à la place — une section sans titre perd son intérêt

Exemples : - Section fonctionnalités sur une page d'accueil - Section témoignages - Grille tarifaire - Articles de blog groupés par catégorie

section
  h2 (titre de la section)
  (contenu de la section)

Article

Article marque un contenu autonome qui pourrait exister seul.

Exemples : - Article de blog - Actualité - Fiche produit - Publication de forum - Commentaire

article
  header
    h2 (titre de l'article)
    time (date de publication)
  (contenu de l'article)
  footer
    p (biographie de l'auteur)

Les articles peuvent être imbriqués dans des section. Une page de blog pourrait être :

main
  section
    h1 (tous les articles de blog)
    article (article 1)
    article (article 2)
    article (article 3)

Footer marque le contenu de pied de page.

Pied de page de la page : Tout en bas, contient le copyright, les coordonnées, la navigation secondaire, les liens sociaux.

footer
  p (copyright)
  nav (liens secondaires)
  p (coordonnées)

Pied de page de section : À l'intérieur d'une section ou d'un article pour marquer sa conclusion.

article
  (contenu de l'article)
  footer
    p (auteur)
    time (date de mise à jour)

Vous pouvez avoir plusieurs pieds de page — un pour la page, un par section ou article.

Aside

Aside marque du contenu indirectement lié : barres latérales, encadrés, citations mises en avant, liens connexes.

main
  article (contenu principal)
aside
  h3 (titre de la barre latérale)
  (liens connexes, publicités, encadrés)

Hiérarchie des titres

Les titres structurent le contenu. Utilisez-les logiquement :

  • Un h1 par page — le sujet principal de la page
  • h2 pour les sections majeures — enfants directs du contenu principal
  • h3 pour les sous-sections — à l'intérieur des sections h2
  • h4, h5, h6 — selon les besoins pour l'imbrication plus profonde

Ne sautez pas de niveaux : h1 -> h2 -> h3 est correct. h1 -> h3 (en sautant h2) perturbe les lecteurs d'écran.

Exemple :

h1 (titre de la page : "Avis produits")
  h2 (section : "Ordinateurs portables")
    h3 (sous-section : "Portables économiques")
    h3 (sous-section : "Portables premium")
  h2 (section : "Tablettes")
    h3 (sous-section : "iPads")
    h3 (sous-section : "Tablettes Android")

Pour changer le niveau de titre d'un élément texte :

  1. Sélectionnez le texte
  2. Ouvrez le menu déroulant Tag Name dans le panneau Attributs
  3. Choisissez dans le groupe Headings

Symboles pour des en-têtes/pieds de page cohérents

Si votre en-tête ou pied de page est identique sur chaque page, utilisez un Symbole.

  1. Créez la structure de l'en-tête/pied de page sur une page (logo, nav, etc.)
  2. Sélectionnez le conteneur
  3. Faites un clic droit et choisissez Créer un Symbole
  4. Le symbole apparaît automatiquement sur toutes les pages
  5. Modifiez le symbole une fois, toutes les pages se mettent à jour

Voir Symboles pour les détails.

Exemple pratique : structure de page d'article de blog

Vous construisez une page pour afficher un seul article de blog.

header (sitewide)
  nav (menu principal)

main
  article
    header
      h1 (titre de l'article)
      p (date de publication, auteur)
    (contenu de l'article)
    footer
      p (biographie de l'auteur)

footer (sitewide)
  nav (liens secondaires)

Dans Silex :

  1. Créez l'en-tête et le pied de page de la page comme précédemment (possiblement avec des Symboles)
  2. Ajoutez un Div dans main, changez sa balise en article
  3. Ajoutez un Div dans article, changez en header
  4. Dans le header : h1 pour le titre, p pour la date/auteur
  5. Ajoutez des divs de contenu, texte, images
  6. Ajoutez un Div en bas de l'article, changez en footer
  7. Dans le footer : p avec la biographie de l'auteur

Exemple pratique : page d'accueil avec sections

Une page d'accueil a un héro, des fonctionnalités, des témoignages et un CTA.

header
  nav

main
  section (héro)
    h2 (slogan)
    p (description)
    a (bouton CTA)
  section (fonctionnalités)
    h2 (titre de la section)
    article (fonctionnalité 1 : icône + texte)
    article (fonctionnalité 2 : icône + texte)
    article (fonctionnalité 3 : icône + texte)
  section (témoignages)
    h2 (titre de la section)
    blockquote (témoignage 1)
    blockquote (témoignage 2)

footer

Erreurs courantes

  • Pas de h1 sur la page. Chaque page en a besoin. C'est le sujet principal de la page.
  • Sauter des niveaux de titres. h1 -> h3 (en sautant h2) perturbe les lecteurs d'écran. Respectez l'ordre : h1 -> h2 -> h3.
  • Utiliser les titres pour le style, pas pour la structure. Si un texte ressemble à un titre mais n'en est pas un, utilisez p et stylisez-le ; n'utilisez pas h2.
  • Plusieurs éléments main. Il n'y en a qu'un par page. Utilisez section ou article pour les regroupements de contenu supplémentaires.
  • Section sans titre. Si vous n'ajoutez pas de titre, utilisez div à la place.
  • Oublier d'utiliser les balises sémantiques. Styliser avec du CSS fait ressembler des divs à des en-têtes et pieds de page, mais seules les balises sémantiques communiquent la structure aux navigateurs et aux technologies d'assistance.

En savoir plus

Avancé : fonctionnement du sélecteur Tag Name

Le plugin sémantique ajoute un attribut « Tag name » à chaque type de composant dans l'éditeur. L'attribut se présente sous forme d'un menu déroulant groupé avec les catégories suivantes :

Groupe Balises
Containers DIV, SPAN, P
Headings H1, H2, H3, H4, H5, H6
Main document structure MAIN, SECTION, ARTICLE, NAV, ASIDE, HEADER, FOOTER
Content grouping ADDRESS, BLOCKQUOTE, PRE
Lists UL, OL, LI
Interactive/form BUTTON, LABEL, DETAILS, SUMMARY

Si l'élément actuel utilise une balise qui n'est dans aucun groupe, elle apparaît dans une catégorie « Other ». Changer la balise met à jour la propriété tagName du composant. Le changement est immédiat — l'élément se re-rend sur le canevas avec sa nouvelle balise.

Quand vous sélectionnez LABEL, un champ « For » apparaît. Entrez l'ID du champ de formulaire que ce label décrit. Cela génère l'attribut for dans le HTML, liant le label au champ pour l'accessibilité.

Référence : rôles de repère créés par les balises sémantiques
Balise HTML Rôle de repère ARIA Objectif
header (niveau page) banner En-tête global du site
nav navigation Liens de navigation
main main Contenu principal
aside complementary Contenu complémentaire
footer (niveau page) contentinfo Pied de page global du site
section (avec titre) region Groupe de contenu thématique
article article Contenu autonome
form (avec nom) form Repère de formulaire

Les lecteurs d'écran annoncent ces repères et permettent aux utilisateurs de naviguer entre eux. Plus vous utilisez les balises sémantiques avec précision, meilleure est l'expérience pour les utilisateurs de technologies d'assistance.

Quiz

Q1 : Vous avez construit une page avec div pour l'en-tête, div pour le contenu, div pour le pied de page. Un utilisateur de lecteur d'écran ne trouve pas le contenu principal. Que corrigez-vous ?

  • A) Ajouter plus de divs
  • B) Changer les divs en balises sémantiques : header, main, section, footer
  • C) Ajouter plus d'étiquettes textuelles
Réponse

B) Changer les divs en balises sémantiques : header, main, section, footer — les lecteurs d'écran annoncent les repères et permettent aux utilisateurs de sauter directement au main.

Q2 : Votre page a un h1, puis trois sections commençant par h3 (pas de h2). Est-ce correct ?

  • A) Oui, c'est bien
  • B) Non, vous avez sauté h2 — cela devrait être h1 -> h2 -> h3
  • C) Non, il ne devrait pas y avoir de h3
Réponse

B) Non, vous avez sauté h2 — cela devrait être h1 -> h2 -> h3 — sauter des niveaux de titres casse la structure pour les lecteurs d'écran.

Q3 : Vous voulez une barre latérale « Articles connexes » à côté d'un article de blog. Faut-il utiliser section ou aside ?

  • A) section
  • B) aside
  • C) div
Réponse

B) aside — les articles connexes sont un contenu indirectement lié au contenu principal, pas une section primaire. aside communique cela aux navigateurs et lecteurs d'écran.

Q4 : Même en-tête sur cinq pages. Vous le modifiez sur la page d'accueil, mais les quatre autres pages ne se mettent pas à jour. Qu'auriez-vous dû faire ?

  • A) Copier-coller sur toutes les pages
  • B) Créer un Symbole et le placer sur chaque page
  • C) Utiliser du CSS pour partager les styles
Réponse

B) Créer un Symbole et le placer sur chaque page — les symboles sont des composants partagés. En modifier un met à jour toutes les instances.

Q5 : Vous voulez une FAQ où les questions sont cliquables pour révéler les réponses. Quelles balises ?

  • A) article pour chaque question
  • B) details pour chaque élément, summary pour le texte de la question
  • C) De simples paragraphes stylisés
Réponse

B) details pour chaque élément, summary pour le texte de la question — details/summary crée un contenu dépliable sans JavaScript nécessaire.

Éditer cette page sur GitLab