html
  1. html-optgroup-tag
PreviousNext

HTML <optgroup> Tag

  • The HTML <optgroup> tag is used to group option elements in a drop-down list.
  • It is a child tag of the <select> tag.

Syntax

<select>
  <optgroup label="group label">
    <option value="option value">option text</option>
    ...
  </optgroup>
  ...
</select>

`

Example

<select>
  <optgroup label="Fruits">
    <option value="Apple">Apple</option>
    <option value="Orange">Orange</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="Carrot">Carrot</option>
    <option value="Cucumber">Cucumber</option>
  </optgroup>
</select>
Try Playground

Explanation

The <optgroup> tag groups related values together in a list of options. It is used to make it easier for users to find and select the desired option. The label attribute is used to provide a text label for the group of options.

Use

The <optgroup> tag is useful when you want to provide a large number of options in a single drop-down list. By grouping related options together, you can make it easier for users to find the options they want. This helps to improve the usability of your website or application.

Important Points

  • The <optgroup> tag can only be used as a child of the <select> tag.
  • The label attribute is required on the <optgroup> tag.
  • The <optgroup> tag can contain as many <option> tags as needed.
  • The options in an optgroup can be further grouped within another <optgroup>.

Summary

The <optgroup> tag is a simple yet powerful HTML tag that allows developers to group related options in a drop-down list. This can make it easier for users to find and select the options they want, improving the usability of your website or application. With its simple syntax and easy-to-use attributes, the <optgroup> tag is a valuable tool for any web developer.

<ol> Tag<option> Tag
Published on: