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

Introduction à la balise <optgroup>

Lorsque vous créez des formulaires avec des menus déroulants contenant de nombreuses options, l'organisation devient rapidement un défi. Comment permettre à vos utilisateurs de naviguer facilement parmi des dizaines, voire des centaines de choix ? La balise <optgroup> apporte une solution élégante en regroupant logiquement les options de vos listes de sélection.

Cette balise HTML est un outil indispensable pour améliorer l'expérience utilisateur de vos formulaires. En catégorisant vos options, vous rendez la navigation plus intuitive et réduisez considérablement le temps nécessaire pour trouver l'information recherchée. Si vous souhaitez maîtriser la création de formulaires professionnels, notre formation complète sur HTML vous accompagnera pas à pas dans cet apprentissage.

Définition et syntaxe de <optgroup>

Qu'est-ce que <optgroup> ?

La balise <optgroup> (abréviation de "option group") est un élément HTML qui permet de regrouper des éléments option au sein d'un menu déroulant select. Chaque groupe d'options est identifié par une étiquette descriptive, ce qui facilite la compréhension et la navigation pour l'utilisateur.

Cette balise ne peut être utilisée qu'à l'intérieur d'un élément <select> et doit obligatoirement contenir au moins un élément <option>. L'étiquette du groupe n'est pas sélectionnable : elle sert uniquement de titre visuel pour les options qu'elle contient.

Syntaxe de base

La syntaxe de <optgroup> est simple et intuitive :

<select name="formation">
  <optgroup label="Développement Web">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
  </optgroup>
  <optgroup label="Développement Backend">
    <option value="python">Python</option>
    <option value="php">PHP</option>
    <option value="nodejs">Node.js</option>
  </optgroup>
</select>

Dans cet exemple, nous avons créé deux groupes distincts : "Développement Web" et "Développement Backend". Chaque groupe contient ses propres options, clairement séparées visuellement dans le menu déroulant.

Attributs de la balise <optgroup>

La balise <optgroup> possède deux attributs spécifiques :

L'attribut label est obligatoire pour que le groupe soit correctement identifié. Sans lui, le navigateur ne pourra pas afficher de titre pour le groupe, ce qui annule l'intérêt même de l'élément.

Exemples pratiques d'utilisation

Exemple simple : catalogue de formations

Imaginons que vous développez un formulaire d'inscription pour une plateforme de formations comme Believemy. Vous souhaitez permettre aux apprenants de choisir leur parcours parmi différentes catégories :

<form action="/inscription" method="post">
  <label for="parcours">Choisissez votre parcours :</label>
  <select id="parcours" name="parcours">
    <optgroup label="Langages de programmation">
      <option value="python-debutant">Python pour débutants</option>
      <option value="javascript-avance">JavaScript avancé</option>
      <option value="php-web">PHP pour le web</option>
    </optgroup>
    <optgroup label="Intégration web">
      <option value="html-css">HTML et CSS</option>
      <option value="responsive">Design responsive</option>
      <option value="sass">Sass et préprocesseurs</option>
    </optgroup>
    <optgroup label="Frameworks">
      <option value="react">React.js</option>
      <option value="vue">Vue.js</option>
      <option value="angular">Angular</option>
    </optgroup>
  </select>
  <button type="submit">S'inscrire</button>
</form>

Ce formulaire présente les formations de manière organisée. L'apprenant peut rapidement identifier la catégorie qui l'intéresse et sélectionner le cours approprié.

Exemple avancé : sélecteur de pays par continent

Un cas d'utilisation très courant de <optgroup> est la création d'un sélecteur de pays organisé par continent. Voici comment nous pourrions l'implémenter :

<label for="pays">Sélectionnez votre pays :</label>
<select id="pays" name="pays" required>
  <option value="">-- Choisir un pays --</option>
  
  <optgroup label="Europe">
    <option value="fr">France</option>
    <option value="de">Allemagne</option>
    <option value="es">Espagne</option>
    <option value="it">Italie</option>
    <option value="be">Belgique</option>
    <option value="ch">Suisse</option>
  </optgroup>
  
  <optgroup label="Amérique du Nord">
    <option value="us">États-Unis</option>
    <option value="ca">Canada</option>
    <option value="mx">Mexique</option>
  </optgroup>
  
  <optgroup label="Afrique">
    <option value="ma">Maroc</option>
    <option value="sn">Sénégal</option>
    <option value="ci">Côte d'Ivoire</option>
    <option value="tn">Tunisie</option>
  </optgroup>
  
  <optgroup label="Asie">
    <option value="jp">Japon</option>
    <option value="cn">Chine</option>
    <option value="in">Inde</option>
  </optgroup>
</select>

Remarquez que nous avons ajouté une option vide au début avec un texte d'invite. Cette pratique est recommandée pour guider l'utilisateur et éviter qu'une sélection par défaut soit envoyée accidentellement.

Exemple avec groupes désactivés

L'attribut disabled permet de rendre un groupe entier non sélectionnable. Cela peut être utile pour indiquer des options temporairement indisponibles :

<select name="cours" id="cours">
  <optgroup label="Cours disponibles">
    <option value="html">Formation HTML</option>
    <option value="css">Formation CSS</option>
    <option value="js">Formation JavaScript</option>
  </optgroup>
  
  <optgroup label="Prochainement disponibles" disabled>
    <option value="rust">Formation Rust</option>
    <option value="go">Formation Go</option>
    <option value="kotlin">Formation Kotlin</option>
  </optgroup>
</select>

Dans cet exemple, le deuxième groupe apparaît grisé et aucune de ses options ne peut être sélectionnée. C'est une excellente façon d'informer les utilisateurs sur les futures disponibilités sans leur permettre de les choisir.

Styliser les éléments <optgroup> avec CSS

Limitations du style par défaut

Il est important de comprendre que les éléments <optgroup> et <option> ont des possibilités de personnalisation CSS très limitées. Les navigateurs appliquent leurs propres styles natifs, et la plupart des propriétés CSS ne fonctionnent pas sur ces éléments.

Voici les propriétés CSS qui fonctionnent généralement :

optgroup {
  font-weight: bold;
  font-style: italic;
  color: #333;
  background-color: #f5f5f5;
}

option {
  padding: 5px;
  color: #666;
}

Exemple de style basique

Malgré les limitations, nous pouvons appliquer quelques styles pour améliorer la lisibilité :

select {
  width: 100%;
  max-width: 400px;
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
}

select:focus {
  border-color: #007bff;
  outline: none;
}

optgroup {
  font-weight: 700;
  color: #2c3e50;
  background-color: #ecf0f1;
}

option {
  font-weight: 400;
  color: #34495e;
  padding: 8px 12px;
}

Ces styles permettent d'améliorer légèrement l'apparence du menu déroulant tout en restant compatibles avec la majorité des navigateurs.

Bonnes pratiques et accessibilité

Rendre vos formulaires accessibles

L'accessibilité est un aspect crucial lors de l'utilisation de <optgroup>. Les lecteurs d'écran interprètent ces éléments et annoncent le nom du groupe avant de lire les options qu'il contient. Voici quelques bonnes pratiques :

• Utilisez toujours un attribut label descriptif et concis
• Évitez les groupes avec une seule option (cela n'a pas de sens sémantique)
• Associez toujours votre <select> à un élément <label> via l'attribut for
• Testez vos formulaires avec un lecteur d'écran

Voici un exemple de formulaire accessible :

<div class="form-group">
  <label for="domaine-expertise">
    Dans quel domaine souhaitez-vous vous spécialiser ?
  </label>
  <select id="domaine-expertise" name="domaine" aria-describedby="aide-domaine">
    <option value="">Sélectionnez un domaine</option>
    <optgroup label="Développement Frontend">
      <option value="integration">Intégration web (HTML/CSS)</option>
      <option value="react">Applications React</option>
      <option value="vue">Applications Vue.js</option>
    </optgroup>
    <optgroup label="Développement Backend">
      <option value="api-rest">API REST</option>
      <option value="bases-donnees">Bases de données</option>
      <option value="securite">Sécurité web</option>
    </optgroup>
  </select>
  <small id="aide-domaine">Ce choix orientera votre parcours de formation.</small>
</div>

Erreurs fréquentes à éviter

Lors de l'utilisation de <optgroup>, certaines erreurs reviennent régulièrement. Voici les plus courantes et comment les éviter :

1. Oublier l'attribut label

<!-- ❌ Incorrect : pas de label -->
<optgroup>
  <option value="a">Option A</option>
</optgroup>

<!-- ✅ Correct : label présent -->
<optgroup label="Groupe A">
  <option value="a">Option A</option>
</optgroup>

2. Imbriquer des <optgroup>

La spécification HTML ne permet pas d'imbriquer des <optgroup>. Chaque groupe doit être au même niveau :

<!-- ❌ Incorrect : imbrication interdite -->
<optgroup label="Parent">
  <optgroup label="Enfant">
    <option value="x">Option</option>
  </optgroup>
</optgroup>

<!-- ✅ Correct : groupes au même niveau -->
<optgroup label="Catégorie 1">
  <option value="a">Option A</option>
</optgroup>
<optgroup label="Catégorie 2">
  <option value="b">Option B</option>
</optgroup>

3. Utiliser <optgroup> en dehors de <select>

La balise <optgroup> n'a de sens que dans un élément <select>. Elle ne fonctionnera pas dans un <datalist> ou ailleurs.

Comparaison avec d'autres approches

Parfois, <optgroup> n'est pas la meilleure solution. Voici une comparaison des différentes approches :

Compatibilité navigateurs

La balise <optgroup> bénéficie d'une excellente compatibilité avec tous les navigateurs modernes et anciens :

Vous pouvez utiliser <optgroup> sans aucune inquiétude de compatibilité. C'est l'un des éléments HTML les plus anciens et les mieux supportés.

Questions fréquentes sur <optgroup>

Oui, vous pouvez mélanger des options groupées et non groupées dans le même élément <select>. Les options non groupées apparaîtront simplement sans indentation ni catégorie :

<select name="choix">
  <option value="">-- Sélectionnez --</option>
  <option value="populaire">Option populaire</option>
  
  <optgroup label="Catégorie A">
    <option value="a1">Option A1</option>
    <option value="a2">Option A2</option>
  </optgroup>
  
  <optgroup label="Catégorie B">
    <option value="b1">Option B1</option>
  </optgroup>
</select>

Vous pouvez utiliser l'attribut disabled directement sur l'élément <option> concerné, sans affecter les autres options du groupe :

<optgroup label="Formations">
  <option value="html">HTML - Disponible</option>
  <option value="css" disabled>CSS - Complet</option>
  <option value="js">JavaScript - Disponible</option>
</optgroup>

Non, l'attribut label n'accepte que du texte brut. Toute balise HTML sera affichée comme du texte et non interprétée. Si vous avez besoin d'un formatage plus riche, vous devrez utiliser une bibliothèque JavaScript qui recrée les éléments de sélection.

Pour maîtriser HTML et créer des formulaires professionnels avec des éléments comme <optgroup>, nous vous recommandons de suivre notre formation pour maîtriser HTML. Vous y apprendrez toutes les balises essentielles, les bonnes pratiques d'accessibilité et comment structurer vos pages web de manière optimale.