<optgroup>
- 25 января 2023
Что делает тег
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023