<optgroup>

Что делает тег

Тег <optgroup> используется для группировки элементов внутри тега <select>. Он позволяет создавать категории или разделы в выпадающем списке, чтобы упростить навигацию пользователям.

Синтаксис тега <optgroup>

<select>
  <optgroup label="Group 1">
    <option value="1">Option 1.1</option>
    <option value="2">Option 1.2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="3">Option 2.1</option>
    <option value="4">Option 2.2</option>
  </optgroup>
</select>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <optgroup> является семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Выпадающий список, в котором элементы разделены на категории «Размеры» и «Цвета»:

<select>
  <optgroup label="Размеры">
    <option value="s">Маленький</option>
    <option value="m">Средний</option>
    <option value="l">Большой</option>
  </optgroup>
  <optgroup label="Цвета">
    <option value="red">Красный</option>
    <option value="green">Зелёный</option>
    <option value="blue">Голубой</option>
  </optgroup>
</select>

Выпадающий список, в котором элементы разделены на категории «Европа» и «Азия»:

<select>
  <optgroup label="Европа">
    <option value="france">Франция</option>
    <option value="germany">Германия</option>
    <option value="italy">Италия</option>
  </optgroup>
  <optgroup label="Азия">
    <option value="china">Китай</option>
    <option value="japan">Япония</option>
    <option value="korea">Корея</option>
  </optgroup>
</select>

Для чего использовать тег <optgroup>

• Сгруппировать элементы в списке, в котором нужно что-то выбрать. Например, вы можете использовать <optgroup> для группировки стран по континентам.
• Сгруппировать связанные элементы. Если вы показываете пользователю список его кредитных карт, то можете сгруппировать их по типу: Visa, Mastercard, «Мир».
• Создать иерархию элементов. Если вы показываете пользователю список задач, можете сгруппировать их по проектам.
• Создать разные уровни доступа. Если вы создаёте список разрешений на сайте, можете сгруппировать их по уровням доступа: для администратора, редактора и пользователя.

Атрибуты тега <optgroup>

label — подпись группы опций.

disabled — отключает группу опций.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <optgroup> может содержать только дочерние элементы <optgroup>.

Нюансы

Тег может использоваться внутри другого <optgroup>, чтобы создавать вложенные группы опций.

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

Тег поддерживается всеми современными браузерами.

Актуальная информация — на caniuse.

Альтернативные теги

Альтернативных тегов для тега <optgroup> не существует.

Чем заменить тег

Если нужно сгруппировать опции, можете использовать несколько элементов <select> или задать атрибут optgroup для каждой опции.

Актуальность

Тег <optgroup> не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.