Тег <optgroup> в HTML — група пунктів у select

HTML

<h3>Приклад використання тегу <code>optgroup</code></h3>
<p id="text"></p>
<form>
<p><select  name="type">
   <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>
 <input type="button" value="Обрати" onClick="dataSelect(this.form)">
  </form>

JS

text.innerHTML = "Улюблений письменник: ";

function dataSelect(f) {
  n = f.type.selectedIndex;
  text.innerHTML = "Улюблений письменник: " + f.type.options[n].value;
}
//# sourceURL=pen.js

HTML

<p><label for="srv">Оберіть сервер</label></p>

<select id="srv" size="9">
    <optgroup label="Веб-сервер">
        <option>Apache</option>
        <option>nginx</option>
        <option>lighttpd</option>
    </optgroup>
    <optgroup label="FTP-сервер">
        <option>vsftpd</option>
        <option>Pure-FTPd</option>
        <option disabled>ProFTPD — тимчасово недоступний</option>
    </optgroup>
    <optgroup label="Недоступні на цьому тарифі" disabled>
        <option>IIS</option>
    </optgroup>
</select>

CSS

label {
    font-weight: 700;
}

select {
    min-width: 18em;
    padding: .3em;
}