Атрибут label тега <optgroup> — назва групи пунктів

<h3>Приклад з використанням атрибуту <code>label</code></h3>
<p>З використанням атрибуту label</p>
<p><select>
   <optgroup label="Колір" >
    <option value="Синій">Синій</option>
    <option value="Жовтий">Жовтий</option>
    <option value="Червоний">Червоний</option>
   </optgroup>
   <optgroup label="Відтінок">
    <option value="Світлий" >Світлий</option>
    <option value="Темний">Темний</option>
    <option value="Нормальний">Нормальний</option>
   </optgroup>
  </select></p>
<p><button>Надіслати</button></p>
   <br>
<div id="a">
<p>Без використання атрибуту label</p>
<p><select>
   <optgroup>
    <option value="Синій">Синій</option>
    <option value="Жовтий">Жовтий</option>
    <option value="Червоний">Червоний</option>
    <option value="Світлий" >Світлий</option>
    <option value="Темний">Темний</option>
    <option value="Нормальний">Нормальний</option>
   </optgroup>
  </select></p>
  <p><button>Надіслати</button></p></div>

HTML

<p><label for="misto">Це теґ label — підпис до поля, клацніть по ньому:</label></p>

<select id="misto" size="12">
    <optgroup label="Україна">
        <option>Київ</option>
        <option>Львів</option>
    </optgroup>

    <optgroup>
        <option>Група без label — заголовок порожній, а рядок є</option>
    </optgroup>

    <optgroup label="Польща" disabled>
        <option>Варшава</option>
        <option>Краків</option>
    </optgroup>

    <optgroup label="Пункт із власним label">
        <option label="Це показує label">а це значення пункту</option>
    </optgroup>

    <optgroup label="Зовнішня група">
        <optgroup label="Спроба вкласти групу">
            <option>Браузер зробив із неї сусідню, а не вкладену</option>
        </optgroup>
    </optgroup>
</select>

<p class="foot">Заголовки груп сірі й курсивні — по них не клацнути.
    Вимкнену групу видно окремо: її пункти не вибираються зовсім.</p>

CSS

label {
    font-weight: 600;
}

select {
    font: 15px/1.5 system-ui, sans-serif;
    padding: 4px;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
    min-width: 340px;
}

optgroup {
    color: #5a6472;
}

optgroup:disabled {
    color: #b6bcc7;
}

option {
    color: #1c2430;
    padding: 2px 0;
}

option:disabled {
    color: #b6bcc7;
}

.foot {
    max-width: 480px;
    color: #5a6472;
    font-size: .9em;
}