<optgroup> : Option Group element

by

Introduction

In HTML, the <optgroup> element is used to group related options within a <select> dropdown list. It does not represent a selectable option itself but rather acts as a container for grouping options together.

Here’s an example of how it’s used:

<!DOCTYPE html>
<html>
<head>
  <title>Object Element Example</title>
</head>
<body>
    <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="broccoli">Broccoli</option>
          <option value="lettuce">Lettuce</option>
        </optgroup>
    </select>
</body>
</html>

Output :

In this example, there are two <optgroup> elements: one for grouping fruits and another for grouping vegetables. Each <optgroup> contains a set of <option> elements that belong to that group.

When rendered in a browser, the options within each <optgroup> will typically be visually grouped together, making it easier for users to identify related choices within the dropdown menu.

Leave a Comment