HTML тег <optgroup> содержит объединенные в одну группу теги <option>. (Тег <option> определяет пункты в раскрывающемся списке, определяемого тегом <select>).

Содержимое тега <optgroup> выглядит как заголовок жирного начертания. Содержащиеся в теге <option> элементы смещаются вправо.

Синтаксис

Тег <optgroup> парный, закрывающий (</optgroup>) тег обязателен.

Тег <option> используется, как правило, с атрибутом value, чтобы указать какое значение отправляется на сервер для дальнейшей обработки.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <select>
      <optgroup label="Livres">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
      <optgroup label="Snippets">
        <option value="java">Java</option>
        <option value="linux">Linux</option>
        <option value="git">Git</option>
      </optgroup>
    </select>
  </body>
</html>

Результат

optgroupexample1

Давайте рассмотрим пример использования атрибута disabled.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <select>
      <optgroup disabled="disabled" label="Quizzes">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
      </optgroup>
      <optgroup label="Snippets">
        <option value="git">Git</option>
        <option value="angularjs">AngularJS</option>
      </optgroup>
    </select>
  </body>
</html>

Результат

optgroupexample2

Атрибуты

Атрибут Значение Описание
disabled disabled Указывает, что элементы в этой группе недоступны для выбора.
label text Определяет наименование для группы, которое будет отображаться в выпадающем списке.
Обязательный атрибут.

Тег <optgroup> поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <optgroup> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <optgroup>:

Цвет текста внутри тега <optgroup>:

Стили форматирования текста для тега <optgroup>:

Другие свойства для тега <optgroup>:

Поддержка браузера

chrome edge firefox safari opera

Практикуйте свои знания

What are the attributes and functionality of the optgroup tag in HTML?
Считаете ли это полезным?