Code has been added to clipboard!

HTML optgroup Tag

Reading time 1 min
Published Jun 29, 2017
Updated Oct 2, 2019

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>
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • 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

Browser image
Chrome
1+
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
5.5+
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
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
Rating
5.0