HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python Contents
HTML optgroup: Main Tips
- HTML
optgroupelement enables grouping related options within a dropdown menu. - It is a child of a <select> element and a parent to <option> elements.
optgroupstands for HTML option group.- HTML
optgrouptags 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
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
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
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
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
