How to create a group of related options in a drop-down list using HTML ?

We can define a group of related options in a drop-down list by using the <optgroup> Tag tag is used to create a group of same category options in a drop-down list. The tag is required when there is a long list of items.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to define a group of
        related options in a
        drop-down list?
    </title>
  
    <style>
        body {
            text-align: center;
        }
  
        .gfg {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }
  
        .geeks {
            font-size: 17px;
        }
    </style>
</head>
  
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">
        A computer science portal for geeks
    </div>
    <h2>
        How to define a group of related
        options in a drop-down list
    </h2>
    <select>
        <optgroup label="Programming Languages">
            <option value="C">C</option>
            <option value="C++">C++</option>
            <option value="Java">Java
        </optgroup>
        <optgroup label="Scripting Language">
            <option value="JavaScript">JavaScript</option>
            <option value="PHP">PHP</option>
            <option value="Shell">Shell</option>
        </optgroup>
    </select>
</body>
  
</html>

chevron_right


Output:

Supported Browsers are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.