HTML <optgroup>: Grouping Dropdown Options

Optgroup organizes related options inside a select, often under labels such as Science and Arts. The grouping helps visitors scan longer menus. We will keep the example small, so you can see how the fields work without building a whole application first.

What You Need to Know

Optgroup itself is not a selectable option; the user chooses an option inside it. A very long menu may need a different design.

A form is like a question sheet. The label asks the question, the control holds the answer, and the name tells the receiving application what that answer is called.

Example: See It in Action

Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<label for="topic">Choose a topic</label>
<select id="topic" name="topic">
    <optgroup label="Science">
        <option value="biology">Biology</option>
    </optgroup>
    <optgroup label="Arts">
        <option value="drawing">Drawing</option>
    </optgroup>
</select>

Let’s Understand the Example

• Optgroup names a group of choices inside a select.
• Label tells people what a control is for. For connects the label to the control with the matching id.
• For links a label to the input whose id matches, so clicking the label can focus the control.
• Id gives one element a unique name within the page, so a link, label, or script can point to it.
• Name is the key the browser normally sends when a form control is submitted.
• Value is the value represented or submitted by a control or data element.

Look for the text “Choose a topic” in the page. If the visible result surprises you, inspect the rendered elements to see what the browser actually built.

What Should You See?

You should see controls for Choose a topic. The example uses an input of type text and sends a GET (the default) request when submitted. If the action points to a missing server endpoint, the browser cannot complete the task.

Choose one field and predict its submitted name and value. Then change the value and check whether the browser accepts it. Do not assume that a working-looking form has a real server behind it.

Try It Yourself

1. Add a Music group with two choices.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Putting an option directly into the group label and expecting it to be selectable.
• Client-side HTML validation is a helpful first check, not a security boundary. A real receiving application must validate the values again.

Key Takeaways

• Optgroup organizes related options inside a select, often under labels such as Science and Arts.
• Optgroup names a group of choices inside a select.
• Optgroup itself is not a selectable option; the user chooses an option inside it. A very long menu may need a different design.