HTML <optgroup> Tag

This post will explain the HTML Tag optgroup with examples to assist with the learning requirements.

The <optgroup> tag in HTML is used to group related options in a select list. It is a child element of the <select> tag and can contain one or more <option> elements.

Option grouping with <optgroup> tags:


<!DOCTYPE html> <html> <body> <label for="laptops">Choose a Laptop:</label> <select name="laptops" id="laptops"> <optgroup label="United States Laptops"> <option value="dell">Dell</option> <option value="HP">HP</option> </optgroup> <optgroup label="Taiwan laptops"> <option value="acer">Acer</option> <option value="asus">Asus</option> </optgroup> </select> </body> </html>

Here is the other example of the <optgroup> tag:


<!DOCTYPE html> <html> <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="potato">Potato</option> <option value="tomato">Tomato</option> </optgroup> </select> </body> </html>

Here is another example of the tag optgroup with CSS applied to it:


<!DOCTYPE html> <html> <head> <style> select { width: 200px; padding: 10px; border-radius: 5px; font-size: 16px; } optgroup { font-weight: bold; } option { color: gray; } </style> </head> <body> <select> <optgroup label="Europe"> <option value="france">France</option> <option value="germany">Germany</option> <option value="italy">Italy</option> <option value="spain">Spain</option> </optgroup> <optgroup label="North America"> <option value="canada">Canada</option> <option value="mexico">Mexico</option> <option value="usa">USA</option> </optgroup> <optgroup label="South America"> <option value="argentina">Argentina</option> <option value="brazil">Brazil</option> <option value="chile">Chile</option> </optgroup> </select> </body> </html>

Tag optgroup Usage

An Tag optgroup <optgroup> is used for grouping related options within an <select> element (drop-down list).

A user can handle a long list of options more quickly if grouped according to their meaning.

The <optgroup> tag in HTML is used to group related options together within a dropdown list. It is used in combination with the <select> tag to provide a list of options for the user to choose from. The <optgroup> tag is used to group related options together, allowing the user to quickly identify and select the appropriate option.

The <optgroup> tag is typically used when there are a large number of options available, and they can be categorized into different groups. For example, if you are creating a form for a user to select their country, you may want to group the countries into regions such as Asia, Europe, North America, etc. This makes it easier for the user to find the country they are looking for.



In HTML, the Tag <optgroup> accepts Global Attributes as well.


In HTML, the <optgroup> tag accepts Event Attributes as well.

Attributes List

disableddisabledThis indicates that an option-group must be disabled.
labeltextProvides a label for an option group.

Browser Compatibility


Tag optgroup Advantages

The advantages of using the “optgroup” tag in HTML include:

  • The “optgroup” tag helps to organize the options within a select element, making it easier for users to find the option they need.
  • By grouping related options together, the “optgroup” tag can make the select element easier to read and understand.
  • Using the “optgroup” tag can help ensure consistency across different web browsers and devices, making your website more user-friendly.
  • The “optgroup” tag provides valuable information to screen readers and other assistive technologies, making your website more accessible to people with disabilities.
  • The “optgroup” tag can be customized using CSS, allowing you to style the options within each group to fit your website’s design.
  • Using the “optgroup” tag can make your code more efficient, reducing load times and improving performance.
If this article was informative enough to boost your educational skills, do share this meaningful information with your friends as well by clicking on the links below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *