Справочник HTML

Теги <ul> и <li>: маркированный список

ul объединяет пункты, порядок которых не влияет на смысл. Каждый пункт записывается в li.

Синтаксис

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

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

<ul>
  <li>Frontend
    <ul><li>React</li><li>Vue</li></ul>
  </li>
</ul>

Вложенный ul помещают внутрь соответствующего li, а не рядом с ним.

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

Если перестановка пунктов меняет результат — например, в инструкции — используй нумерованный список ol.

Ошибки

Пункты записаны без li.
Список применяют только ради отступов.
Навигационные ссылки не объединяют в список, хотя это единая группа.

Попробуй

Создай список технологий с вложенным списком фреймворков.

Как выбрать и правильно вложить список

Маркированный список подходит, когда порядок пунктов не влияет на смысл: набор преимуществ, меню раздела или перечень инструментов. Если последовательность важна, используй ol. Каждый самостоятельный пункт должен находиться внутри li — текст между соседними li нарушает структуру.

Вложенный список размещают внутри того li, к которому он относится. Так браузер и программа чтения с экрана понимают иерархию. Визуальный отступ сам по себе не создаёт смысловой связи. Для навигации список обычно помещают внутрь nav, а каждый пункт содержит ссылку с понятным названием.

Разберём рабочий пример

<ul>
  <li>HTML
    <ul>
      <li>Семантика</li>
      <li>Формы</li>
    </ul>
  </li>
  <li>CSS</li>
</ul>

Не копируй пример вслепую: измени данные, убери одну строку и посмотри, как меняется результат. Такой эксперимент быстрее показывает роль каждой части кода, чем простое чтение.

Проверка перед использованием

Выбран правильный тип списка: ul или ol.
Каждый пункт находится в отдельном li.
Вложенный список расположен внутри родительского пункта.
Маркеры не заменены обычными символами в тексте.

Попробуй в браузере

Измени код и нажми «Запустить». Результат появится ниже.