HTML optgroup Tag

The HTML <optgroup> tag is used to group related <option> elements within a <select> element. It allows you to create hierarchical or categorized options within a dropdown list.

Here’s an example of how the <optgroup> tag can be used:

<select>
     <optgroup label="Fruits">
          <option value="apple">Apple</option>
          <option value="banana">Banana</option>
          <option value="orange">Orange</option>
     </optgroup>
     <optgroup label="Vegetables">
          <option value="carrot">Carrot</option>
          <option value="tomato">Tomato</option>
          <option value="cucumber">Cucumber</option>
     </optgroup>
</select>

In the above example, the <optgroup> tag is used to group the <option> elements into two categories: “Fruits” and “Vegetables”. The label attribute is used to specify the name or label of each group. Inside each <optgroup>, you can define multiple <option> elements that represent the individual options within that group.

When the dropdown list is displayed, the options will be visually grouped under their respective <optgroup> labels, creating a hierarchical structure.

The <optgroup> tag provides a way to organize and categorize options within a <select> element, making it easier for users to find and select the desired option. It can be particularly useful when dealing with long lists of options or when options need to be logically grouped together.

It’s important to note that not all browsers support styling options within <optgroup> tags. The appearance and behavior may vary across different browsers and devices. Therefore, it’s advisable to use the <optgroup> tag primarily for logical grouping and not rely heavily on its visual representation.

The <optgroup> tag enhances the usability and organization of dropdown lists in HTML forms, allowing users to navigate and select options more efficiently.