Qu'est-ce que la balise <summary> en HTML ?

Introduction à la balise <summary>

La balise <summary> est un élément HTML qui permet de créer un titre cliquable pour un contenu dépliable. Elle fonctionne toujours en association avec la balise <details> pour offrir une expérience utilisateur interactive sans avoir besoin de JavaScript.

Si vous souhaitez maîtriser HTML et créer des interfaces web modernes et accessibles, notre formation complète sur HTML vous guidera pas à pas dans l'apprentissage de toutes les balises essentielles, y compris les éléments interactifs comme <summary>.

Dans ce guide complet, nous allons explorer en profondeur le fonctionnement de la balise <summary>, ses cas d'utilisation, les bonnes pratiques à adopter et les erreurs courantes à éviter. Vous découvrirez comment créer des FAQ interactives, des menus accordéon et bien d'autres composants utiles.

Définition et syntaxe de la balise <summary>

Qu'est-ce que la balise <summary> ?

La balise <summary> définit un résumé, un titre ou une légende visible pour le contenu d'un élément <details>. Lorsque l'utilisateur clique sur le <summary>, le contenu caché dans <details> s'affiche ou se masque automatiquement.

Cette balise fait partie de la spécification HTML5 et offre une solution native pour créer des éléments d'interface dépliables, souvent appelés "disclosure widgets" ou "accordéons" en français.

Syntaxe de base

Voici la syntaxe fondamentale pour utiliser la balise <summary> :

<details>
  <summary>Cliquez pour en savoir plus</summary>
  <p>Voici le contenu caché qui s'affiche au clic.</p>
</details>

La balise <summary> doit toujours être le premier enfant de l'élément <details>. Si elle est absente, le navigateur affichera un texte par défaut (généralement "Détails" ou "Details" selon la langue du navigateur).

Caractéristiques principales

Voici les caractéristiques essentielles de la balise <summary> :

• Élément interactif natif : aucun JavaScript requis pour l'interactivité de base
• Accessible par défaut : les lecteurs d'écran reconnaissent son rôle
• Personnalisable en CSS : vous pouvez modifier l'apparence du triangle indicateur
• Contenu flexible : peut contenir du texte, des images ou d'autres éléments HTML
• Support clavier : fonctionne avec la touche Entrée et la barre d'espace

Exemples pratiques d'utilisation

Exemple simple : une FAQ interactive

L'un des cas d'utilisation les plus courants de la balise <summary> est la création de FAQ (Foire Aux Questions) interactives. Voici un exemple complet :

<section class="faq-believemy">
  <h2>Questions fréquentes sur nos formations</h2>
  
  <details>
    <summary>Combien de temps ai-je accès à la formation ?</summary>
    <p>Vous avez un accès illimité à vie à toutes les formations que vous achetez sur Believemy. Vous pouvez les consulter autant de fois que vous le souhaitez.</p>
  </details>
  
  <details>
    <summary>Puis-je obtenir un certificat ?</summary>
    <p>Oui, un certificat de complétion est délivré automatiquement une fois que vous avez terminé tous les modules de la formation.</p>
  </details>
  
  <details>
    <summary>Y a-t-il un support disponible ?</summary>
    <p>Absolument ! Notre équipe pédagogique est disponible pour répondre à toutes vos questions via le système de commentaires intégré à chaque leçon.</p>
  </details>
</section>

Ce code crée une FAQ où chaque question peut être dépliée individuellement par l'utilisateur, ce qui améliore la lisibilité et l'expérience utilisateur.

Exemple avancé : un menu accordéon stylisé

Nous pouvons aller plus loin en créant un menu accordéon avec un style personnalisé. Voici un exemple plus élaboré :

<nav class="menu-accordeon">
  <details>
    <summary>
      <span class="menu-icon">📚</span>
      Formations HTML & CSS
    </summary>
    <ul>
      <li><a href="/formations/html-debutant">HTML pour débutants</a></li>
      <li><a href="/formations/css-avance">CSS avancé</a></li>
      <li><a href="/formations/responsive-design">Design responsive</a></li>
    </ul>
  </details>
  
  <details>
    <summary>
      <span class="menu-icon">⚡</span>
      Formations JavaScript
    </summary>
    <ul>
      <li><a href="/formations/javascript-bases">Les bases de JavaScript</a></li>
      <li><a href="/formations/dom-manipulation">Manipulation du DOM</a></li>
      <li><a href="/formations/es6-moderne">JavaScript ES6+</a></li>
    </ul>
  </details>
</nav>

Le CSS associé pour styliser ce menu :

.menu-accordeon details {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.menu-accordeon summary {
  padding: 15px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-accordeon summary:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.menu-accordeon details[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-accordeon ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-accordeon li a {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.2s;
}

.menu-accordeon li a:hover {
  background-color: #f5f5f5;
}

Exemple avec l'attribut open

Vous pouvez utiliser l'attribut open sur l'élément <details> pour afficher le contenu déplié par défaut :

<details open>
  <summary>Section importante - Affichée par défaut</summary>
  <p>Ce contenu est visible dès le chargement de la page car l'attribut "open" est présent sur l'élément details.</p>
</details>

Cette technique est utile lorsque vous souhaitez mettre en avant une information importante tout en gardant la possibilité pour l'utilisateur de la masquer.

Personnalisation du style avec CSS

Modifier le triangle indicateur

Par défaut, les navigateurs affichent un petit triangle à côté du texte du <summary>. Vous pouvez personnaliser ou supprimer ce triangle avec CSS :

/* Supprimer le triangle par défaut */
summary {
  list-style: none;
}

/* Pour Safari */
summary::-webkit-details-marker {
  display: none;
}

/* Ajouter un indicateur personnalisé */
summary::before {
  content: '+';
  display: inline-block;
  width: 20px;
  font-weight: bold;
  color: #667eea;
  transition: transform 0.3s ease;
}

details[open] summary::before {
  content: '−';
}

Vous pouvez également utiliser des icônes ou des chevrons pour créer un indicateur plus moderne :

summary::after {
  content: '▶';
  float: right;
  transition: transform 0.3s ease;
}

details[open] summary::after {
  transform: rotate(90deg);
}

Créer des transitions fluides

Malheureusement, les transitions CSS ne fonctionnent pas directement sur l'ouverture/fermeture du contenu <details>. Cependant, vous pouvez créer des effets visuels sur d'autres propriétés :

details {
  border-radius: 8px;
  background-color: #f8f9fa;
  transition: box-shadow 0.3s ease;
}

details[open] {
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

details > *:not(summary) {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Bonnes pratiques d'utilisation

Accessibilité

La balise <summary> est naturellement accessible, mais voici quelques recommandations pour optimiser l'expérience :

• Texte descriptif : utilisez un texte clair et descriptif qui indique ce que contient la section
• Évitez les résumés vides : ne laissez jamais un <summary> sans contenu textuel
• Ne pas imbriquer d'éléments interactifs : évitez de placer des liens ou des boutons directement dans le <summary>
• Ordre logique : assurez-vous que le contenu caché a du sens dans le flux du document

Quand utiliser <summary> et <details>

Ces éléments sont particulièrement adaptés pour :

• Les FAQ et sections de questions-réponses
• Les menus de navigation pliables
• Les informations complémentaires ou avancées
• Les avertissements légaux ou mentions (CGV, politique de confidentialité)
• Les spoilers ou contenus à révéler
• Les paramètres avancés dans les formulaires

En revanche, évitez de les utiliser pour :

• Du contenu essentiel qui doit être visible immédiatement
• Des éléments de navigation principaux
• Des informations critiques pour la compréhension de la page

Compatibilité navigateurs

La balise <summary> bénéficie d'un excellent support dans les navigateurs modernes :

Pour les navigateurs qui ne supportent pas ces éléments (principalement Internet Explorer), le contenu sera simplement affiché en entier, ce qui constitue une dégradation gracieuse acceptable.

Erreurs fréquentes à éviter

<summary> sans <details>

La balise <summary> n'a aucun effet si elle n'est pas à l'intérieur d'un élément <details> :

<!-- ❌ Incorrect : summary seul -->
<summary>Ceci ne fonctionnera pas</summary>
<p>Contenu visible en permanence</p>

<!-- ✅ Correct : summary dans details -->
<details>
  <summary>Ceci fonctionne correctement</summary>
  <p>Contenu dépliable</p>
</details>

<summary> mal positionné

La balise <summary> doit être le premier enfant de <details> :

<!-- ❌ Incorrect : summary pas en premier -->
<details>
  <p>Du texte avant</p>
  <summary>Titre</summary>
  <p>Contenu</p>
</details>

<!-- ✅ Correct : summary en premier -->
<details>
  <summary>Titre</summary>
  <p>Contenu</p>
</details>

Contenu interactif dans <summary>

Évitez de placer des éléments interactifs comme des liens ou des boutons dans le <summary> :

<!-- ❌ À éviter : lien dans summary -->
<details>
  <summary>En savoir plus <a href="/page">ici</a></summary>
  <p>Contenu</p>
</details>

<!-- ✅ Meilleure approche : lien dans le contenu -->
<details>
  <summary>En savoir plus</summary>
  <p>Contenu avec <a href="/page">un lien vers plus d'informations</a>.</p>
</details>

Utilisation avec JavaScript

Bien que la balise <summary> fonctionne sans JavaScript, vous pouvez améliorer son comportement avec quelques lignes de code. Par exemple, pour créer un accordéon où une seule section peut être ouverte à la fois :

// Sélectionner tous les éléments details
const detailsElements = document.querySelectorAll('.accordeon-exclusif details');

detailsElements.forEach(details => {
  details.addEventListener('toggle', function() {
    if (this.open) {
      // Fermer tous les autres éléments details
      detailsElements.forEach(otherDetails => {
        if (otherDetails !== this && otherDetails.open) {
          otherDetails.open = false;
        }
      });
    }
  });
});

L'événement toggle est déclenché chaque fois que l'état d'ouverture de l'élément <details> change, ce qui vous permet de réagir et d'implémenter des comportements personnalisés.

Questions fréquentes sur la balise <summary>

Non, la balise <summary> n'est pas techniquement obligatoire. Cependant, si vous ne la fournissez pas, le navigateur affichera un texte par défaut comme "Détails" ou "Details", ce qui n'est généralement pas souhaitable. Nous recommandons fortement de toujours inclure un <summary> explicite avec un texte descriptif pour améliorer l'expérience utilisateur et l'accessibilité.

Oui, vous pouvez inclure des images, des icônes ou même des éléments avec des classes CSS dans un <summary>. Cela vous permet de créer des en-têtes visuellement attrayants. Assurez-vous simplement que le texte alternatif ou le contenu textuel reste accessible pour les lecteurs d'écran.

Vous pouvez vérifier la propriété open de l'élément <details>. Par exemple : document.querySelector('details').open retournera true si l'élément est ouvert et false s'il est fermé. Vous pouvez également écouter l'événement toggle pour réagir aux changements d'état.

Pour maîtriser HTML et CSS, y compris toutes les balises interactives comme <summary> et <details>, nous vous recommandons de suivre notre formation sur HTML. Cette formation vous guidera pas à pas dans l'apprentissage de toutes les notions essentielles pour créer des sites web professionnels et accessibles.