What is the <optgroup> HTML tag?

Introduction to the <optgroup> tag

When you create forms with dropdown menus containing numerous options, organization quickly becomes a challenge. How can you help your users navigate easily among dozens or even hundreds of choices? The <optgroup> tag provides an elegant solution by logically grouping options in your selection lists.

This HTML tag is an essential tool for improving the user experience of your forms. By categorizing your options, you make navigation more intuitive and significantly reduce the time needed to find the desired information. If you want to master the creation of professional forms, our comprehensive HTML course will guide you step by step through this learning process.

Definition and syntax of <optgroup>

What is <optgroup>?

The <optgroup> tag (short for "option group") is an HTML element that allows you to group option elements within a dropdown menu select. Each group of options is identified by a descriptive label, which makes it easier for users to understand and navigate.

This tag can only be used inside a <select> element and must contain at least one <option> element. The group label is not selectable: it serves only as a visual title for the options it contains.

Basic syntax

The syntax of <optgroup> is simple and intuitive:

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

In this example, we've created two distinct groups: "Web Development" and "Backend Development". Each group contains its own options, clearly separated visually in the dropdown menu.

Attributes of the <optgroup> tag

The <optgroup> tag has two specific attributes:

The label attribute is mandatory for the group to be properly identified. Without it, the browser won't be able to display a title for the group, which defeats the purpose of the element.

Practical usage examples

Simple example: course catalog

Imagine you're developing a registration form for a learning platform like Believemy. You want to allow learners to choose their track from different categories:

<form action="/registration" method="post">
  <label for="track">Choose your learning track:</label>
  <select id="track" name="track">
    <optgroup label="Programming Languages">
      <option value="python-beginner">Python for beginners</option>
      <option value="javascript-advanced">Advanced JavaScript</option>
      <option value="php-web">PHP for the web</option>
    </optgroup>
    <optgroup label="Web Integration">
      <option value="html-css">HTML and CSS</option>
      <option value="responsive">Responsive design</option>
      <option value="sass">Sass and preprocessors</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">Register</button>
</form>

This form presents courses in an organized manner. Learners can quickly identify the category they're interested in and select the appropriate course.

Advanced example: country selector by continent

A very common use case for <optgroup> is creating a country selector organized by continent. Here's how we could implement it:

<label for="country">Select your country:</label>
<select id="country" name="country" required>
  <option value="">-- Choose a country --</option>
  
  <optgroup label="Europe">
    <option value="fr">France</option>
    <option value="de">Germany</option>
    <option value="es">Spain</option>
    <option value="it">Italy</option>
    <option value="uk">United Kingdom</option>
    <option value="ch">Switzerland</option>
  </optgroup>
  
  <optgroup label="North America">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="mx">Mexico</option>
  </optgroup>
  
  <optgroup label="Asia">
    <option value="jp">Japan</option>
    <option value="cn">China</option>
    <option value="in">India</option>
    <option value="kr">South Korea</option>
  </optgroup>
  
  <optgroup label="Oceania">
    <option value="au">Australia</option>
    <option value="nz">New Zealand</option>
  </optgroup>
</select>

Notice that we added an empty option at the beginning with a prompt text. This practice is recommended to guide users and prevent an accidental default selection from being submitted.

Example with disabled groups

The disabled attribute allows you to make an entire group non-selectable. This can be useful for indicating temporarily unavailable options:

<select name="course" id="course">
  <optgroup label="Available Courses">
    <option value="html">HTML Course</option>
    <option value="css">CSS Course</option>
    <option value="js">JavaScript Course</option>
  </optgroup>
  
  <optgroup label="Coming Soon" disabled>
    <option value="rust">Rust Course</option>
    <option value="go">Go Course</option>
    <option value="kotlin">Kotlin Course</option>
  </optgroup>
</select>

In this example, the second group appears grayed out and none of its options can be selected. This is an excellent way to inform users about future availability without allowing them to choose those options.

Styling <optgroup> elements with CSS

Default style limitations

It's important to understand that <optgroup> and <option> elements have very limited CSS customization possibilities. Browsers apply their own native styles, and most CSS properties don't work on these elements.

Here are the CSS properties that generally work:

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

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

Basic styling example

Despite the limitations, we can apply some styles to improve readability:

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;
}

These styles help slightly improve the appearance of the dropdown menu while remaining compatible with most browsers.

Best practices and accessibility

Making your forms accessible

Accessibility is a crucial aspect when using <optgroup>. Screen readers interpret these elements and announce the group name before reading the options it contains. Here are some best practices:

• Always use a descriptive and concise label attribute
• Avoid groups with only one option (this has no semantic meaning)
• Always associate your <select> with a <label> element via the for attribute
• Test your forms with a screen reader

Here's an example of an accessible form:

<div class="form-group">
  <label for="expertise-area">
    What area would you like to specialize in?
  </label>
  <select id="expertise-area" name="area" aria-describedby="area-help">
    <option value="">Select an area</option>
    <optgroup label="Frontend Development">
      <option value="integration">Web integration (HTML/CSS)</option>
      <option value="react">React applications</option>
      <option value="vue">Vue.js applications</option>
    </optgroup>
    <optgroup label="Backend Development">
      <option value="api-rest">REST APIs</option>
      <option value="databases">Databases</option>
      <option value="security">Web security</option>
    </optgroup>
  </select>
  <small id="area-help">This choice will guide your learning path.</small>
</div>

Common mistakes to avoid

When using <optgroup>, certain mistakes occur regularly. Here are the most common ones and how to avoid them:

1. Forgetting the label attribute

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

<!-- ✅ Correct: label present -->
<optgroup label="Group A">
  <option value="a">Option A</option>
</optgroup>

2. Nesting <optgroup> elements

The HTML specification doesn't allow nesting <optgroup> elements. Each group must be at the same level:

<!-- ❌ Incorrect: nesting forbidden -->
<optgroup label="Parent">
  <optgroup label="Child">
    <option value="x">Option</option>
  </optgroup>
</optgroup>

<!-- ✅ Correct: groups at same level -->
<optgroup label="Category 1">
  <option value="a">Option A</option>
</optgroup>
<optgroup label="Category 2">
  <option value="b">Option B</option>
</optgroup>

3. Using <optgroup> outside of <select>

The <optgroup> tag only makes sense inside a <select> element. It won't work in a <datalist> or elsewhere.

Comparison with other approaches

Sometimes, <optgroup> isn't the best solution. Here's a comparison of different approaches:

Browser compatibility

The <optgroup> tag enjoys excellent compatibility with all modern and legacy browsers:

You can use <optgroup> without any compatibility concerns. It's one of the oldest and best-supported HTML elements.

Frequently asked questions about <optgroup>

Yes, you can mix grouped and ungrouped options in the same <select> element. Ungrouped options will simply appear without indentation or category:

<select name="choice">
  <option value="">-- Select --</option>
  <option value="popular">Popular option</option>
  
  <optgroup label="Category A">
    <option value="a1">Option A1</option>
    <option value="a2">Option A2</option>
  </optgroup>
  
  <optgroup label="Category B">
    <option value="b1">Option B1</option>
  </optgroup>
</select>

You can use the disabled attribute directly on the relevant <option> element, without affecting the other options in the group:

<optgroup label="Courses">
  <option value="html">HTML - Available</option>
  <option value="css" disabled>CSS - Full</option>
  <option value="js">JavaScript - Available</option>
</optgroup>

No, the label attribute only accepts plain text. Any HTML tags will be displayed as text and not interpreted. If you need richer formatting, you'll have to use a JavaScript library that recreates selection elements.

To master HTML and create professional forms with elements like <optgroup>, we recommend following our course to master HTML. You'll learn all the essential tags, accessibility best practices, and how to structure your web pages optimally.