Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все 33 занятия, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт
Модуль 1. Введение и HTML Занятие 5

Списки

Сегодня мы соберём свой топ любимых книг, игр или фильмов с помощью нумерованных и маркированных списков.

Изучаем: ul, ol, li, вложенные списки
Результат: Список любимых книг, игр или фильмов

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

👀 Сегодня сделаем вот такое

Показать код примера 
<h2>Мой топ-3 книг</h2>
<ol>
  <li>Гарри Поттер</li>
  <li>Хроники Нарнии</li>
  <li>Денискины рассказы</li>
</ol>

<h2>Что взять в поход</h2>
<ul>
  <li>Палатку</li>
  <li>Еду
    <ul>
      <li>Бутерброды</li>
      <li>Яблоки</li>
    </ul>
  </li>
  <li>Фонарик</li>
</ul>

💡 Объяснение

Списки повсюду

Оглянись на любой сайт: меню — это список ссылок, рецепт — список продуктов и шагов, рейтинг — нумерованный список. Списки помогают быстро «сканировать» информацию взглядом, не читая сплошной текст.

Маркированный список <ul>

<ul> — unordered list, неупорядоченный список. Каждый пункт отмечен точкой-маркером. Используй его, когда порядок не важен: что взять в поход, любимые цвета, правила класса.

<ul>
  <li>Палатка</li>
  <li>Фонарик</li>
  <li>Спальник</li>
</ul>

Нумерованный список <ol>

<ol> — ordered list, упорядоченный список. Браузер сам расставляет номера. Используй, когда порядок важен: шаги инструкции, места в рейтинге, план дня.

Удобно: если вставить новый пункт в середину, номера пересчитаются автоматически — ничего не нужно переписывать вручную.

Полезные атрибуты ol:

  • start="5" — начать нумерацию с 5;
  • reversed — считать в обратном порядке (для «топ-10» с конца);
  • type="A", type="a", type="I" — нумерация буквами или римскими цифрами.

Пункт списка <li>

<li> — list item, элемент списка. Строгое правило: li живёт только внутри ul или ol, а внутри ul и ol напрямую могут быть только li. Заголовок или абзац между пунктами ставить нельзя.

А вот внутри самого li можно писать что угодно: текст, ссылки, картинки, выделения.

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

Иногда у пункта есть подпункты: «Еда → бутерброды, яблоки». Вложенный список пишется внутри пункта li, перед его закрывающим тегом:

<ul>
  <li>Еда
    <ul>
      <li>Бутерброды</li>
      <li>Яблоки</li>
    </ul>
  </li>
  <li>Фонарик</li>
</ul>

Браузер покажет вложенный список со сдвигом вправо и другим маркером (кружок вместо точки). Списки разных видов можно смешивать: внутри нумерованного плана — маркированные детали.

Отступы в коде здесь особенно важны: без них легко запутаться, какой </li> какому пункту принадлежит.

Как выбрать тип списка

Задай вопрос: «Если перемешать пункты, смысл изменится?» Если да — ol. Если нет — ul.

Частые ошибки

  • <li> без ul/ol вокруг.
  • Вложенный ul поставлен между пунктами, а не внутри li.
  • Номера написаны вручную («1. Палатка») внутри ul — пусть браузер считает сам, используй ol.
  • Забыт закрывающий </li> у пункта с вложенным списком.

Проверь себя

  1. Какой список подойдёт для рецепта блинов: ингредиенты и шаги приготовления?
  2. Куда нужно поставить вложенный список?
  3. Как сделать нумерацию, которая начинается с 10 и идёт вниз?

⌨️ Практика

  1. Сделай нумерованный список «Мой топ-5 игр (книг, фильмов)».
  2. Сделай маркированный список «Что взять в поход».
  3. Во втором списке сделай вложенный список: «Еда» → бутерброды, яблоки, вода.
  4. Добавь к спискам заголовки h2.

🧪 Редактор

🔒 Работа не сохраняется на сайте. Черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве. Зарегистрируйся или войди, чтобы сохранить работу в «Мои работы».

Результат обновляется сам. Tab — отступ, Esc затем Tab — выйти из поля.

🪞 Рефлексия

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход