Système de design GC Composants
Accueil Démarrer Aperçu des modèles de page Page de base Aperçu des composants Avis Barre de navigation latérale Barre de navigation supérieure Bascule de langue Bouton Boutons radio Carte Cases à cocher Champ de date Champ de saisie Chemin de navigation Conteneur Date de modification Détails En-tête Grille Icône Indicateur d'étape Jeu de champs Lien Masquage accessible Menu thématique Message d'erreur Pagination Pied de page Recherche Résumé des erreurs Signature Sélection Texte Titre Téléverseur de fichiers Zone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactive État Affichage Dimensionnement de la boîte Dimensionnement du conteneur Débordement Position Visibilité Alignement de texte Couleur de lien Couleur de texte Débordement de texte Décoration de texte de lien Famille de police Hauteur de ligne Police Saut de mot Style de liste Style de police Taille de lien Taille de police Transformation de texte Épaisseur de police Marge Marge intérieure Agencement de contenu Agencement des éléments Agencement individuel Alignement de contenu Alignement des éléments Alignement individuel Colonnes de grille Direction de l’élément flexible Dégagement Habillage de l’élément flexible Justification de contenu Justification des éléments Justification individuelle Lignes de grille Ordre Rétrécissement de l’élément flexible Élargissement de l’élément flexible Élément flexible Couleur de la bordure Couleur de l’arrière-plan Largeur de la bordure Rayon de la bordure Style de la bordure Image Noms des icônes Taille de l'icône Curseur Transition Événements de pointeur Aperçu des styles Unités de style Unités de style de couleur Unités de style d'espacement Unités de style typographie Contactez-nous Impliquez-vous Trouvez 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

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.

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-02-02