Système de design GCComposants
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Titre
<gcds-heading>

Autres noms : titre de la section, sous-titre. Un titre établit les niveaux d’une structure hiérarchique pour organiser le contenu d’une page.
  • GitHub
  • Figma

Aperçu du composant de titre

Anatomie d’un titre

  • Le titre est une ligne de texte mis en évidence qui introduit le paragraphe ou tout autre contenu du corps qui le suit immédiatement. La proéminence visuelle du titre diminue en fonction de son niveau dans l’ordre hiérarchique. L’accent est davantage mis visuellement sur le premier titre, le H1, que sur un titre subordonné comme un H5 ou un H6. Les technologies d’assistance, telles que les lecteurs d’écran, identifient les titres en fonction de leur niveau.
  • Le composant texte ne contient pas de titre. Son sujet est lié à l’idée principale du titre correspondant.
Un titre en gros caractères au-dessus d'un bloc de texte plus petit. Le texte en se lit comme suit : « Ceci est un titre. » Le bloc suivant se lit comme suit : « Il s'agit de texte qui décrit plus en détail le sujet ou l'action indiqués dans la section qui suit. Le texte est généralement constitué d'une ou de plusieurs lignes ou paragraphes de contenu pour la section. On peut aussi s'en servir pour introduire une liste à puces, un tableau ou d'autres contenus, comme une image ou une vidéo. » Il y a une étiquette pointant vers le plus grand texte indiquant « 1 » et il y a une étiquette pointant vers le plus petit bloc de texte qui indique « 2 ».

Conception et accessibilité du composant titre

Classez les niveaux de titre de manière hiérarchique

Les niveaux de titre suivent un ordre séquentiel et hiérarchique : les niveaux supérieurs ont un texte d’affichage plus grand que les niveaux inférieurs.
  • Définissez des niveaux de titre corrects et cohérents pour aligner les titres codés et visuels sur une page. Des titres cohérents favorisent une expérience équitable pour les personnes qui utilisent des technologies d’assistance.
  • Classez les titres de manière séquentielle, du plus bas au plus élevé (H1 à H6).
  • Évitez de sauter des niveaux de titre. Restructurez plutôt le contenu de manière à ce que les titres soient utilisés de manière séquentielle, du plus grand (H1) au plus petit (H6).
  • N’utilisez un titre H1 qu’une seule fois sur une page. D’autres types de titres peuvent être utilisés plusieurs fois.
  • Utilisez les titres H2 pour décrire les sections individuelles. Chaque section doit avoir un titre H2.
  • Utilisez les titres H3 à H6 dans les sections. Les sections peuvent contenir plusieurs titres H3-H6, à condition qu’ils soient placés dans l’ordre hiérarchique.

Maintenez des limites de caractères accessibles

  • Conservez les limites de caractères par défaut pour chaque ligne de titre afin d’obtenir une longueur de lecture agréable et accessible. Ces valeurs par défaut créent une longueur de ligne équilibrée et cohérente entre les tailles de police des titres.
  • Limitez les limites de caractères aux longueurs suivantes pour maintenir un équilibre visuel entre les titres d’une page :
    • 31 caractères pour H1.
    • 35 caractères pour H2.
    • 40 caractères pour H3.
    • 45 caractères pour H4.
    • 50 caractères pour H5.
    • 57 caractères pour H6.

Rédigez des titres clairs et cohérents

  • Utilisez la majuscule initiale.
  • Incluez un seul titre H1 descriptif pour chaque page afin de communiquer le contenu et l’objectif de la page — le titre de la page.
  • Utilisez des sous-titres pour diviser le contenu. Divisez le contenu en plus petites sections et regroupez les éléments communs.
  • Faites en sorte que chaque titre soit distinctif et indiquez clairement le contenu que l’on trouve dans cette section.
  • Lorsque vous avez épuisé les titres et autres éléments de style disponibles, envisagez d’utiliser des épaisseurs de police pour mettre en évidence les mots dans le corps du texte.
  • Lorsque vous passez de l’anglais au français, gardez à l’esprit que les titres seront environ 30 % plus longs en français.

Utiliser un espacement cohérent

  • Conservez l’espacement par défaut pour une expérience de lecture agréable et accessible. Ces valeurs par défaut créent des espaces visuels et des séparations entre les différentes sections.
  • Conservez les valeurs d’espacement suivantes pour maintenir un équilibre visuel entre les titres d’une page :
    • Marge inférieure : 300 pour tous les niveaux.
    • Marge supérieure : 0 pour H1 et 600 pour H2 à H6.
Aidez-nous à nous améliorer Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact. Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes. Fournir des commentaires Signaler un problème sur GitHub
2026-09-14