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

Créer un titre

Les titres établissent des niveaux hiérarchiques qui organisent le contenu d'une page.

Codage 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 la valeur character-limit par défaut pour chaque ligne de titre en réglant l'attribut à true pour une expérience 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.

Utilisez 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 :
  • Par défaut margin-bottom: 300 pour tous les niveaux
  • Par défaut margin-top: 0 pour H1 et 600 pour H2 et 3

Obtenez votre code

Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.

1. Choisissez des valeurs de code pour obtenir l'élément que vous voulez.

2. Obtenez le code et intégrez-le dans votre environnement.

3. Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).

Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code.