HTML <optgroup> Element: Reference and Examples

You might see <optgroup> Element reference while reading someone else’s HTML, or need it while building a page of your own. Instead of memorizing a definition, look at a working example and see when the element makes sense.

The Idea in Plain English

Groups related option elements inside a select. It can label the options, but it does not itself become a selectable option.

For a reference page, pay attention to where the element is allowed, whether it needs a closing tag, and what other elements it can contain.

A Working Example

Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

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

What Each Part Does

• The optgroup supplies a label for related options in a dropdown.
• The label tells visitors and assistive tools what a control is for.
• The select lets someone choose from a set of options.
• for connects a visible label to the control with the same ID.
• id names an element for labels, fragments, CSS or JavaScript; IDs should be unique.
• name identifies a field in submitted form data or a named metadata entry.

The dropdown groups choices under Arts and Science labels.

Try It Yourself

Try replacing the example content with your own while keeping the valid HTML structure.

Common Beginner Mistakes

• Putting text directly inside optgroup instead of option elements.
• Changing several parts of the example at once, making it difficult to see which part caused a different result.
• Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

• Groups related option elements inside a select. It can label the options, but it does not itself become a selectable option.
• The dropdown groups choices under Arts and Science labels.
• Test the markup in a browser, and check accessibility and real-world behavior where relevant.