Contents
HTML optgroup: Main Tips
- HTML
optgroup
element enables grouping related options within a dropdown menu. - It is a child of a <select> element and a parent to <option> elements.
optgroup
stands for HTML option group.- HTML
optgroup
tags support all global attributes.
Defining HTML Option Groups
When you're using HTML select
, option groups may prove useful as they simplify the selection for users. Using HTML <optgroup>
tags, you can select optgroups and define them using a label:
Example
<select>
<optgroup label="Sports">
<option value="baseball">Baseball</option>
<option value="basketball">Basketball</option>
</optgroup>
<optgroup label="Shopping">
<option value="food">Food</option>
<option value="gift">Gift</option>
</optgroup>
</select>

Pros Main Features
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion

Pros Main Features
- Professional service
- Flexible timetables
- A variety of features to choose from
- Professional certificates of completion
- University-level courses
- Multiple Online degree programs

Pros Main Features
- Great user experience
- Offers quality content
- Very transparent with their pricing
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
Two optgroup Tag Attributes
You have to include the label
attribute when using HTML optgroup
tags. It defines the name for the HTML option group, and the browser will use its value for labeling the groups for the user:
Example
<select>
<optgroup label="Main">
<option value="beef">Beef with broccoli</option>
<option value="chicken">Chicken Teriyaki</option>
</optgroup>
<optgroup label="Dessert">
<option value="hot">Chocolate lava cake</option>
<option value="cold">Banana split</option>
</optgroup>
</select>
disabled
disables the selection of a specific group. Most browsers also show the disabled options in grey text:
Example
<select>
<optgroup label="Destination">
<option value="cuba">Cuba</option>
<option value="hawaii">Hawaii</option>
</optgroup>
<optgroup label="Time" disabled>
<option value="week">7 days</option>
<option value="2weeks">14 days</option>
</optgroup>
</select>
Browser support

Chrome
1+

Edge
All

Firefox
1+

IE
5.5+

Opera
All

Safari
All
Mobile browser support

Chrome
All

Firefox
4+

Opera
All

Safari
All
Latest Udacity Coupon Found:
Verified STAFF PICK
75% OFF COURSES
Udacity Black Friday Offer
The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!
Expiration date: 27/02/2021
3176 People Used
Only 97 Left