Списки: ul, ol и li

Ты постоянно видишь списки: меню навигации на сайте, список товаров в корзине Wildberries, условия доставки, нумерованные шаги установки приложения. За всем этим стоят три тега: <ul>, <ol> и <li>.

ul — ненумерованный список

<ul> (unordered list) — список, где порядок не важен. Браузер по умолчанию ставит точки:

<ul>
  <li>Nike Air Max</li>
  <li>Adidas Superstar</li>
  <li>New Balance 574</li>
</ul>

Результат:

Используй <ul> когда порядок элементов не важен.

ol — нумерованный список

<ol> (ordered list) — список, где порядок важен. Браузер нумерует автоматически:

<ol>
  <li>Выбери товар</li>
  <li>Добавь в корзину</li>
  <li>Оформи заказ</li>
  <li>Жди доставку</li>
</ol>

Результат:

1. Выбери товар

2. Добавь в корзину

3. Оформи заказ

4. Жди доставку

Используй <ol> для инструкций, рецептов, рейтингов — везде, где важен порядок.

li — элемент списка

<li> (list item) всегда вложен внутрь <ul> или <ol>. Это единственное место где он может находиться.

<!-- Верно -->
<ul>
  <li>Пункт 1</li>
</ul>

<!-- Неверно — li без родительского ul/ol -->
<li>Пункт 1</li>

Вложенные списки

Списки можно вкладывать друг в друга. Новый список вкладывается внутрь <li>:

<ul>
  <li>Обувь
    <ul>
      <li>Кроссовки
        <ul>
          <li>Nike</li>
          <li>Adidas</li>
        </ul>
      </li>
      <li>Туфли</li>
    </ul>
  </li>
  <li>Одежда</li>
</ul>

Именно так устроено меню навигации крупных интернет-магазинов.

Когда что использовать

| Ситуация | Тег |

|---|---|

| Меню навигации | <ul> |

| Список товаров | <ul> |

| Шаги инструкции | <ol> |

| Топ-10 рейтинг | <ol> |

| Рецепт | <ol> для шагов, <ul> для ингредиентов |

Атрибуты ol

<!-- Начать нумерацию с 5 -->
<ol start="5">
  <li>Пятый шаг</li>
  <li>Шестой шаг</li>
</ol>

<!-- Обратный отсчёт -->
<ol reversed>
  <li>Первое место</li>
  <li>Второе место</li>
</ol>

Типичные ошибки

Ошибка 1: Прямые дети ul/ol — только li

<!-- Неверно — div внутри ul -->
<ul>
  <div>Пункт</div>
</ul>

<!-- Верно -->
<ul>
  <li>Пункт</li>
</ul>

Ошибка 2: Использовать список для макета

<!-- Списки — для семантических списков, не для вёрстки -->
<ul>
  <li>Колонка 1</li>
  <li>Колонка 2</li>
</ul>
<!-- Используй CSS Grid или Flexbox для макета -->

Ошибка 3: Не различать ol и ul

Навигационное меню — это <ul>, потому что порядок пунктов не принципиален. Шаги регистрации — <ol>, потому что шаг 2 нельзя сделать без шага 1.

В реальных проектах

Меню навигации любого сайта — это <ul> с <li> внутри. React и Vue компоненты списков в итоге рендерятся в теги <ul>/<ol> с <li>. Знание этих тегов нужно как для вёрстки, так и для генерации списков через Array.map() в React.

// Создаём ненумерованный список категорий (как меню)
const ul = document.createElement('ul')
const categories = ['Кроссовки', 'Куртки', 'Рюкзаки', 'Аксессуары']

categories.forEach(text => {
  const li = document.createElement('li')
  li.textContent = text
  ul.appendChild(li)
})

console.log('Тег списка:', ul.tagName)           // UL
console.log('Количество пунктов:', ul.children.length)

// Создаём нумерованный список шагов заказа
const ol = document.createElement('ol')
const steps = ['Выбрать товар', 'Добавить в корзину', 'Оформить заказ']

steps.forEach((text, index) => {
  const li = document.createElement('li')
  li.textContent = text
  ol.appendChild(li)
  console.log('Шаг ' + (index + 1) + ': ' + text)
})

// Читаем обратно
console.log('Первый пункт ul:', ul.children[0].textContent)
console.log('Последний шаг ol:', ol.children[ol.children.length - 1].textContent)

// Каталог товаров с вложенными категориями
const catalog = {
  'Обувь': ['Кроссовки', 'Туфли', 'Сапоги'],
  'Одежда': ['Футболки', 'Джинсы', 'Куртки'],
  'Аксессуары': ['Сумки', 'Часы'],
}

// Имитируем вложенный список
const categories = Object.keys(catalog)
console.log('Главные категории (' + categories.length + ' шт.):')

categories.forEach(category => {
  const subcats = catalog[category]
  console.log('  [li] ' + category + ' (' + subcats.length + ' подкатегорий)')

  subcats.forEach(sub => {
    console.log('    [li] ' + sub)
  })
})

// Считаем общее количество элементов
const totalSubcats = categories.reduce((sum, cat) => sum + catalog[cat].length, 0)
console.log('Всего пунктов в меню:', categories.length + totalSubcats)