HTML `optgroup` Element: Grouping Options in Select Lists for Enhanced Usability

Learn how to improve the organization and user experience of your HTML select lists using the `optgroup` element. This tutorial demonstrates grouping related options for better readability and easier selection, especially in long dropdown lists.

Using the HTML `` Element to Group Options in Select Lists

Understanding the `` Element

The HTML `` element is used to group related options within a `` element (a dropdown list). This improves the organization and usability of long select lists by logically grouping options. This makes it easier for users to find the option they need, particularly when dealing with a very large number of choices within a single dropdown list.

Using the `` Element

The `

` element is placed inside the `` element. The `label` attribute provides a label for the group. Individual options within a group are defined using the `` element.

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Browser Support for ``

The `` element is supported by all major modern browsers.

Attributes of the `` Element

The `` element also supports standard HTML global attributes and event attributes.