The <optgroup> tag groups related options inside a <select> dropdown. It helps organize long lists of options into logical categories. The label attribute provides the group heading that users see.

<optgroup

The <optgroup> tag must be inside a <select> element. It contains one or more <option> elements. The label attribute is required and displays as a non-selectable group header. Options inside the group are indented and grouped together visually.

<select>
  <optgroup label="Fruits">
    <option>Apple</option>
    <option>Banana</option>
  </optgroup>
</select>

Common use cases: organizing countries by region, grouping products by category, separating menu items by type. Optgroups improve UX by making long dropdowns more navigable. They're especially useful for forms with many options.

<select>
  <optgroup label="Europe">
    <option>France</option>
    <option>Germany</option>
  </optgroup>
  <optgroup label="Asia">
    <option>Japan</option>
  </optgroup>
</select>

In the browser, optgroups display as non-selectable headers with their options indented below. The label appears in bold or with different styling. This visual hierarchy helps users navigate long lists of options more easily.

<select>
  <optgroup label="Fruits">
    <option>Apple</option>
    <option>Banana</option>
  </optgroup>
</select>

Checkpoint: Which element groups options inside a select?

<select>
  <optgroup label="Group">
    <option>Option</option>
  </optgroup>
</select>

Correct! The <optgroup> tag groups related options inside a <select> dropdown. It's different from <option> which represents individual selectable items. Use <optgroup> to organize long lists of options.

<select>
  <optgroup label="Group">
    <option>Option</option>
  </optgroup>
</select>

Now it's your turn. Optgroups provide organization and better UX for dropdown menus. Complete the challenges below to master the <optgroup> tag!

optgroup.html

1 / 7

📦

TutorThe <optgroup> tag groups related options inside a <select> dropdown. It helps organize long lists of options into logical categories. The label attribute provides the group heading that users see.

⭐ 0 EXP

Optgroup Mastery

Unlock nodes by learning optgroup and select structure.

Concept 1: The Optgroup Tag

The <optgroup> tag groups related options inside a <select> dropdown. It helps organize long lists of options into logical categories. The label attribute provides the group heading that users see.

System Check

Which element groups options inside a select?

Community Holo-Net

Share Optgroup Designs

Created effective optgroups? Share your code and grouping strategies.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <optgroup> Tag Documentation

Pascual Vila

Frontend Instructor.

The <optgroup> tag groups related options inside a <select> dropdown. It helps organize long lists of options into logical categories. The label attribute provides the group heading that users see.

Structure and Attributes

The <optgroup> tag must be strictly inside a <select> element.
It contains one or more <option> elements representing selectable items.
The label attribute is required and displays as a non-selectable group header.
Options inside the group are indented and grouped together visually by the browser.

Common Use Cases

Common use cases include:

Geographical Data: Organizing countries by region.
E-commerce: Grouping products by category.
Food & Beverage: Separating menu items by type (drinks, main courses, desserts).

Optgroups heavily improve UX by making long dropdown menus more navigable and structured.

Best Practices

Use <optgroup> primarily to organize lists with more than 10 options.
Always include a descriptive label attribute.
Group related options based on the user's expected mental model.

Optgroup Tag Glossary

<optgroup>: HTML element that groups related options inside a <select> dropdown. Requires a label attribute.
label Attribute: Required attribute on <optgroup> providing the unselectable group heading visible to users.
<select>: HTML element forming the dropdown menu container holding <option> or <optgroup> elements.
<option>: HTML element representing an individual selectable choice inside a dropdown or optgroup.

📖 INDEX