Атрибут selected тега <option> — вибраний пункт

<form>
  <p><b>З використанням атрибута "selected"</b></p>
   <p>Хто написав повість "Маруся"?</p>
   <select name="question">
    <option  value="1">Тарас Шевченко</option>
    <option  value="2">Леся Українка</option>
    <option  value="3">Іван Франко</option>
    <option selected value="4">Григорій Квітка-Основ'яненко</option>
   </select>
   <p><input type="submit" value="Надіслати"></p>
  </form>
<br>
<form>
  <p><b>Без використання атрибута "selected"</b></p>
   <p>Хто написав повість "Маруся"?</p>
   <select name="question">
    <option value="1">Тарас Шевченко</option>
    <option  value="2">Леся Українка</option>
    <option value="3">Іван Франко</option>
    <option  value="4">Григорій Квітка-Основ'яненко</option>
   </select>
   <p><input type="submit" value="Надіслати"></p>
  </form>

HTML

<form>
  <p>Без <code>selected</code> — уже обрано перший пункт:<br>
    <select name="a">
      <option>Київ</option>
      <option>Львів</option>
      <option>Одеса</option>
    </select>
  </p>

  <p>З <code>selected</code> на третьому:<br>
    <select name="b">
      <option>Київ</option>
      <option>Львів</option>
      <option selected>Одеса</option>
    </select>
  </p>

  <p>Пункт-підказка: порожній <code>value</code> + <code>selected</code>.
     Розкрийте список і закрийте, нічого не обравши, — поле стане червоним:<br>
    <select name="city" required>
      <option value="" selected>— оберіть місто —</option>
      <option value="kyiv">Київ</option>
      <option value="lviv">Львів</option>
      <option value="odesa">Одеса</option>
    </select>
  </p>

  <p><button>Надіслати</button></p>
</form>

CSS

select {
  padding: 4px 6px;
  border: 1px solid #b0b0b0;
  border-radius: 4px;
}
select:user-invalid {
  border-color: #c92a2a;
  background: #fff5f5;
}
p {
  margin: 10px 0;
}