<optgroup> Tag in HTML

The <optgroup> tag in HTML is used to group related options inside a <select> dropdown list. It helps organize large lists of options, making it easier for users to navigate through them.

Key Points on <optgroup> Tag:

• The <optgroup> tag is used to group together <option> elements within a <select> dropdown.
• Each <optgroup> element can have a label attribute, which specifies the name of the group displayed to the user.
• It helps in making long lists more readable by categorizing options.
• <optgroup> can only be used within the <select> tag, and it contains <option> elements.
• The disabled attribute can be added to <optgroup> to disable the entire group of options.

Syntax of <optgroup> Tag:

<optgroup label="Group Name">
            <option value="value1">Option 1</option>
            <option value="value2">Option 2</option>
        </optgroup>

Example of <optgroup> Tag in HTML:

This example demonstrates how to group options in a dropdown list using the <optgroup> tag.

        <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="spinach">Spinach</option>
            </optgroup>
        </select>
                

The <optgroup> tag is a powerful way to group related options inside a <select> dropdown, improving the user experience by organizing long lists of choices into categories.