Списки HTML

1. Три типа списков

• ul — маркированный (порядок не важен): меню, подборки;
• ol — нумерованный (порядок важен): шаги, рейтинги;
• dl — список описаний (термин → определение): глоссарии, характеристики.

<ul>
  <li>Яблоки</li>
  <li>Груши</li>
</ul>
<ol>
  <li>Поверните ручку</li>
  <li>Откройте крышку</li>
</ol>

2. Атрибуты ol

<ol start="5">      <!-- начать с 5 -->
<ol reversed>        <!-- в обратном порядке -->
<ol type="A">        <!-- A, B, C… -->
<ol type="i">        <!-- римские i, ii, iii -->

start и reversed — семантичные способы изменить нумерацию, не ломая смысл: не подделывайте цифры текстом.

3. Вложенные списки и вложенность содержимого

<ul>
  <li>Фрукты
    <ul>
      <li>Яблоки</li>
      <li>Бананы</li>
    </ul>
  </li>
  <li>Овощи</li>
</ul>

• вложенный список кладут ВНУТРИ li, не между li;
• глубина структуры отражает смысл, не красоту;
• не помещайте пустые li.

4. Список описаний dl

<dl>
  <dt>CSS</dt>
  <dd>Язык стилизования страницы.</dd>
  <dt>HTML</dt>
  <dd>Язык разметки содержимого.</dd>
</dl>

dt — термин, dd — его описание. Один dt может иметь несколько dd и наоборот. Удобно для «характеристик» товара или параметров.

5. Стили маркеров

ul { list-style-type: none; }        /* убрать пули */
ol { list-style-type: decimal; }
li::marker { color: #2563eb; }         /* цвет пуль */

ul { list-style: square; }              /* шорткат */
ul.feature {
  list-style-image: url("check.svg");   /* картинка вместо пули */
}

Маркеры стилизуются отдельно от текста (::marker) — цвет, размер, отступ. Для иконок чаще используют ::before с псевдоэлементом.

6. Отступы списка

.list { list-style: none; padding-left: 0; margin: 0; }
.list li + li { margin-top: 6px; }

При list-style: none лучше сбросить и padding-left: font-выступает отступ маркера. Между пунктами — margin через соседний селектор, не gap у родителя.

7. Список как навигация

Меню — это семантичный ul из ссылок. Flexbox или Grid превращает столбик в горизонтальную панель.

.menu { display: flex; gap: 16px; list-style: none; padding: 0; }
.menu a { text-decoration: none; color: #1d4ed8; }
.menu a:hover { text-decoration: underline; }

8. Чек-лист списков

• ul для набора, ol для последовательности, dl для терминов;
• вложенные списки внутри li;
• нумерация через start/reversed, не текстом;
• list-style: none сброшен вместе с padding-left;
• меню — семантичный список ссылок.

Что дальше

Курс завершён.

← Вернуться к курсам