HTML : Group related options in a drop-down list

To achieve the list as dropdown list shown below -

we can use optgroup tag mentioned below-



<form action="/action_page.php">
  <label for="skills">Choose a Skill:</label>
  <select name="skills" id="skills">
    <optgroup label="FrontEnd">
      <option value="Angular">Angular</option>
      <option value="React">React</option>
    </optgroup>
    <optgroup label="Backend">
      <option value="Java">Java</option>
      <option value="PHP">PHP</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Demo

Conclusion

The <optgroup> tag is used to group related options in a element (drop-down list).

If you have a long list of options, groups of related options are easier to handle for a user.

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.