Списки

HTML предоставляет три типа списков: <ul> — неупорядоченный (маркеры: точки, кружки), <ol> — упорядоченный (нумерация), <dl> — описательный (термин + определение). Списки — один из самых частых элементов на веб-странице.

Три типа списков:

• Неупорядоченный (<ul>) — unordered list:

<ul> <li>Элемент 1</li> <li>Элемент 2</li> </ul> Маркеры по умолчанию: точки. Управляется через CSS (list-style-type).

• Упорядоченный (<ol>) — ordered list:

<ol> <li>Первый</li> <li>Второй</li> </ol> Нумерация по умолчанию: 1, 2, 3. Атрибуты:

• type="A" — буквы (A, B, C)
• type="i" — римские (i, ii, iii)
• start="5" — начать с 5
• reversed — обратный порядок

• Описательный (<dl>) — description list:

<dl> <dt>Термин</dt> <dd>Определение термина</dd> </dl> Удобен для словарей, FAQ, метаданных.

Вложенность: списки могут быть внутри друг друга: <ul> <li>Пункт 1 <ul> <li>Подпункт 1.1</li> </ul> </li> </ul>

Списки — как оглавление книги. <ul> — неупорядоченный список (маркетные задачи). <ol> — пошаговая инструкция (порядок важен). <dl> — словарь (термин → определение).

**Самый простой:**

<ul>
  <li>Яблоки</li>
  <li>Бананы</li>
  <li>Апельсины</li>
</ul>

<ol>
  <li>Открыть терминал</li>
  <li>Ввести команду</li>
  <li>Нажать Enter</li>
</ol>

Базовые ul и ol — два самых распространённых типа списков.

**Простой:**

<!-- Упорядоченный с типом -->
<ol type="A">
  <li>Раздел A</li>
  <li>Раздел B</li>
</ol>

<!-- Описательный -->
<dl>
  <dt>HTML</dt>
  <dd>Язык разметки для структуры</dd>
  <dt>CSS</dt>
  <dd>Язык стилей для оформления</dd>
</dl>

ol с типом букв, dl для словарных определений.

**Реальный пример:**

<h2>Как создать сайт</h2>
<ol>
  <li>Установите редактор кода
    <ul>
      <li>VS Code</li>
      <li>Sublime Text</li>
    </ul>
  </li>
  <li>Создайте файл index.html</li>
  <li>Напишите структуру
    <ol type="a">
      <li>DOCTYPE</li>
      <li>html, head, body</li>
      <li>Контент в body</li>
    </ol>
  </li>
  <li>Откройте в браузере</li>
</ol>

Реальный пример: вложенные списки с разными типами нумерации.

**Неправильно:** Класть элементы списка не в <li>

**Почему:** li — единственный допустимый прямой потомок ul/ol. Без li браузер покажет ошибку.

**Правильно:** Все элементы списка должны быть внутри <li>.

**Неправильно:** Использовать ul для инструкций (где важен порядок)

**Почему:** ul — для неупорядоченных списков. Если порядок важен (рецепт, инструкция) — используйте ol.

**Правильно:** Порядок важен → <ol>. Порядок не важен → <ul>.

**Неправильно:** Вкладывать не-ли-элементы в ul/ol

**Почему:** Например, <div> внутри <ul> — невалидно. Только <li> может быть прямым потомком.

**Правильно:** Прямой потомок ul/ol — только li. li может содержать что угодно (div, p, даже другой ul).

• ul — неупорядоченный (маркеры), ol — упорядоченный (нумерация)
• li — обязательный элемент внутри ul/ol
• dl/dt/dd — описательный список (словарь)
• Списки можно вкладывать друг в друга
• type и start управляют форматом нумерации

Назад: Вы знаете изображения (H8) — списки помогают организовать несколько элементов контента.

Вперёд: В следующем уроке (H10) вы изучите таблицы: <table>, <tr>, <td>, <th> для табличных данных.