PassFront
  1. PassFront
  2. База знаний
  3. Таблицы и списки

Чем отличаются ul, ol и dl и как выбрать список?

Таблицы и списки

Тип списка выбирают по смыслу содержимого.

  • <ul> — неупорядоченный список: порядок не важен (пункты меню, теги).
  • <ol> — упорядоченный: важен порядок или номер (шаги инструкции, рейтинг). Есть атрибуты start, reversed и type.
  • <dl> с <dt> и <dd> — список определений «термин — описание» или пар «ключ — значение».
<ol start="3" reversed>
  <li>Третий</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>Язык разметки документов</dd>
</dl>

Практика

  • Внутри <ul> и <ol> допустимы только <li>, вложенный список кладут внутрь <li>.
  • Меню навигации обычно делают списком ссылок внутри <nav>.
  • Маркеры и отступы убирают CSS (list-style: none), но семантика списка остаётся. В Safari при list-style: none VoiceOver может перестать объявлять список, поэтому добавляют role="list".

Коротко для собеседования

ul для набора без порядка, ol для шагов и рейтингов, dl для пар «термин и описание». Сброс list-style оставляет семантику, а в Safari может понадобиться role="list".

Другие вопросы раздела