Урок 2.4 — Списки: ul, ol, li

В уроке 5 разделов. Изучайте по порядку.

Тег <ul> (от unordered list — «неупорядоченный список») создаёт маркированный список. Он используется, когда порядок элементов не важен. Каждый элемент списка оборачивается в тег <li> (list item). Браузер добавляет маркер (точку-кружок) перед каждым элементом.

Представьте, что вы пишете список покупок. Порядок продуктов в нём не важен — можно купить хлеб до молока или наоборот. Это идеальный случай для <ul>. Другие примеры: список характеристик товара, пункты меню навигации, список преимуществ компании, перечень технологий в портфолио, список ингредиентов рецепта.

Структура <ul> очень простая: открывающий <ul>, внутри — несколько <li>, закрывающий </ul>. Ничего, кроме <li>, внутрь <ul> помещать нельзя (ну, почти ничего — можно ещё один <ul> для вложенности, но об этом позже).

<h2>Что нужно купить:</h2>
<ul>
    <li>Хлеб</li>
    <li>Молоко</li>
    <li>Яйца (2 десятка)</li>
    <li>Масло сливочное</li>
    <li>Сыр</li>
    <li>Помидоры</li>
</ul>

В этом примере мы создали список покупок из 6 элементов. Браузер отобразит их с точками-маркерами слева и небольшим отступом. Каждый элемент будет на отдельной строке. Если поменять элементы местами, смысл не изменится — порядок в <ul> действительно «не важен».

Что можно класть внутрь <li>? Почти любые теги: текст, <a>, <strong>, <em>, <img>, другие списки. Единственное — не кладите в <li> блочные элементы, которые нарушат структуру списка (хотя технически это возможно, делать так не стоит).

<h2>Наши услуги</h2>
<ul>
    <li><strong>Веб-разработка</strong> — создание сайтов любой сложности</li>
    <li><strong>Мобильные приложения</strong> — iOS и Android</li>
    <li><a href="/seo">SEO-продвижение</a> — вывод в топ поисковиков</li>
    <li><strong>Дизайн</strong> — <em>уникальный</em> дизайн для вашего бизнеса</li>
</ul>

В этом примере мы использовали <strong> для названий услуг, <em> для акцента и <a> для ссылки. Всё это внутри <li>. Обратите внимание, что <ul> — это блочный элемент, как и <li>. Каждый пункт списка занимает всю доступную ширину и начинается с новой строки.

Маркеры в <ul> можно менять через CSS (свойство list-style-type). По умолчанию это disc (закрашенный кружок). Другие значения: circle (пустой кружок), square (квадрат), none (без маркера). Но мы пока не изучаем CSS — в этом уроке работаем только с HTML.

Тег <ol> (от ordered list — «упорядоченный список») создаёт нумерованный список. Каждый элемент автоматически получает номер: 1, 2, 3 и так далее. Используйте <ol>, когда порядок элементов имеет значение.

Примеры использования: пошаговая инструкция («шаг 1, шаг 2, шаг 3»), рейтинг («топ-10 фильмов»), рецепт («сначала смешайте, потом добавьте»), расписание («урок 1, урок 2, урок 3»), любой список с приоритетом или последовательностью.

Структура <ol> идентична <ul>: контейнер <ol> и внутри <li>. Всё то же самое, только маркеры — цифры, а не точки.

<h2>Как сварить пельмени:</h2>
<ol>
    <li>Налейте воду в кастрюлю и доведите до кипения.</li>
    <li>Добавьте соль и лавровый лист.</li>
    <li>Всыпьте пельмени и аккуратно перемешайте.</li>
    <li>Варите 5-7 минут после всплытия.</li>
    <li>Слейте воду и добавьте сливочное масло.</li>
    <li>Подавайте горячими со сметаной.</li>
</ol>

В этом примере порядок критически важен. Нельзя сначала добавить пельмени, а потом вскипятить воду. Нельзя слить воду до того, как пельмени сварились. Поэтому мы используем <ol>, а не <ul>. Браузер пронумерует шаги: 1, 2, 3, 4, 5, 6. Если добавить новый шаг между вторым и третьим, браузер автоматически перенумерует всё.

У <ol> есть полезные атрибуты. Самый популярный — type, который задаёт тип нумерации: type="1" — обычные цифры (по умолчанию), type="A" — заглавные буквы (A, B, C), type="a" — строчные буквы (a, b, c), type="I" — римские цифры заглавные (I, II, III), type="i" — римские цифры строчные (i, ii, iii). Ещё есть start — с какого числа начинать, и reversed — обратный порядок (от большего к меньшему).

<h3>Римские цифры (заглавные):</h3>
<ol type="I">
    <li>Пункт первый</li>
    <li>Пункт второй</li>
    <li>Пункт третий</li>
</ol>

<h3>Начинаем с 5:</h3>
<ol start="5">
    <li>Пятый пункт</li>
    <li>Шестой пункт</li>
    <li>Седьмой пункт</li>
</ol>

<h3>Обратный порядок:</h3>
<ol reversed>
    <li>Третий (будет 3)</li>
    <li>Второй (будет 2)</li>
    <li>Первый (будет 1)</li>
</ol>

<h3>Буквы (строчные):</h3>
<ol type="a">
    <li>Пункт a</li>
    <li>Пункт b</li>
    <li>Пункт c</li>
</ol>

Атрибут start полезен, когда вы разбиваете один список на несколько частей. Например, на первой странице у вас пункты 1-3, на второй — 4-6. start="4" продолжит нумерацию. Атрибут reversed — булевый, не требует значения. Просто напишите reversed внутри открывающего тега.

Важно: внутри <ol>, как и внутри <ul>, допускаются только <li> (и вложенные списки). Не кладите в <ol> ничего другого. Если нужен заголовок списка — поместите его перед <ol> или внутрь первого <li>.

Тег <li> (list item) — это элемент списка. Он используется и в <ul>, и в <ol>. Без <li> списки не имеют смысла — это «мясо» на «костях» списка. Каждый <li> становится одной строкой в списке с маркером или номером.

Что важно знать про <li>? Во-первых, это строчно-блочный элемент. Он ведёт себя как блочный (занимает всю ширину, переносит строку), но может содержать внутри другие блочные элементы. Во-вторых, у <li> есть атрибут value (только для <ol>), который позволяет переопределить номер конкретного элемента.

<ol>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li value="10">Пункт 10 (перескочили)</li>
    <li>Пункт 11 (продолжает с 10)</li>
    <li>Пункт 12</li>
</ol>

Обратите внимание: после value="10" нумерация продолжается с 11, 12... Атрибут value меняет только номер текущего элемента — все последующие считаются от него. Это удобно, когда нужно показать выборочные пункты из большого списка или пропустить несколько номеров.

Внутри <li> можно помещать любые теги: заголовки (<h1>–<h6>), абзацы (<p>), изображения (<img>), ссылки (<a>), другие списки. <li> — один из самых гибких тегов в HTML. Но не забывайте: <li> должен находиться только внутри <ul> или <ol>. Не используйте <li> сам по себе — это нарушит семантику.

Ещё одна особенность: в HTML5 закрывающий тег </li> можно опустить, если следующий элемент — тоже <li>. Но мы настоятельно рекомендуем всегда указывать закрывающий тег. Код с закрытыми тегами читается легче, его проще отлаживать, и он точно не сломается при изменениях. Не ленитесь писать </li>.

Вложенные списки — это список внутри списка. Вы помещаете один <ul> или <ol> внутрь <li> другого списка. Это создаёт иерархическую структуру: разделы и подразделы, категории и подкатегории, меню с выпадающими пунктами.

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

<h2>Наше меню</h2>
<ul>
    <li>Горячие блюда
        <ul>
            <li>Борщ</li>
            <li>Солянка</li>
            <li>Уха</li>
        </ul>
    </li>
    <li>Салаты
        <ul>
            <li>Цезарь</li>
            <li>Греческий</li>
            <li>Оливье</li>
        </ul>
    </li>
    <li>Напитки
        <ul>
            <li>Чай</li>
            <li>Кофе</li>
            <li>Сок</li>
        </ul>
    </li>
</ul>

В этом примере у нас есть три основные категории меню. Внутри каждой — подкатегории. Браузер отобразит вложенные списки с отступом слева и другим типом маркера (вместо закрашенного кружка — пустой кружок, а для третьего уровня — квадрат). Это автоматическое поведение браузера для вложенных <ul>.

Можно вкладывать <ol> в <ul> и наоборот. Например, у вас может быть нумерованная инструкция, где внутри каждого шага — маркированный список деталей:

<ol>
    <li>Подготовка
        <ul>
            <li>Вымойте руки</li>
            <li>Достаньте продукты из холодильника</li>
            <li>Включите духовку</li>
        </ul>
    </li>
    <li>Приготовление
        <ul>
            <li>Нарежьте овощи</li>
            <li>Обжарьте лук до золотистого цвета</li>
            <li>Добавьте специи</li>
        </ul>
    </li>
    <li>Подача
        <ul>
            <li>Разложите по тарелкам</li>
            <li>Украсьте зеленью</li>
        </ul>
    </li>
</ol>

Здесь мы создали пошаговый рецепт (ol — важен порядок шагов). Внутри каждого шага — детали (ul — порядок не важен). Обратите внимание: вложенный <ul> находится внутри <li>, а не после него. Это критически важно для правильной работы HTML.

Глубина вложенности может быть любой: список внутри списка внутри списка. Но не увлекайтесь — глубже 3-4 уровней становится трудно читать. Если вам нужно больше уровней, возможно, стоит пересмотреть структуру информации.

Помните: при вложенных списках закрывающие теги особенно важны. Один пропущенный </li> или </ul> может сломать всю структуру. Рекомендуем вручную проверять, что каждый открывающий тег имеет соответствующий закрывающий. Хорошая практика — использовать отступы (пробелы или табуляцию) для визуального отображения вложенности.

Теперь применим знания на практике. У вас будет два задания. Первое — простое (список покупок), второе — посложнее (меню сайта с вложенными пунктами).

Задание 1. Список покупок (только ul)

Создайте список покупок для похода в магазин. Включите в него как минимум 8 пунктов, сгруппированных по категориям. Используйте вложенные списки. Категории: «Молочные продукты», «Овощи и фрукты», «Бакалея», «Мясное».

<h1>Список покупок</h1>
<ul>
    <li>Молочные продукты
        <ul>
            <li>Молоко 3.2%</li>
            <li>Творог 5%</li>
            <li>Сметана 15%</li>
            <li>Сыр «Гауда»</li>
        </ul>
    </li>
    <li>Овощи и фрукты
        <ul>
            <li>Картофель (2 кг)</li>
            <li>Морковь (1 кг)</li>
            <li>Лук репчатый (1 кг)</li>
            <li>Яблоки (1 кг)</li>
        </ul>
    </li>
    <li>Бакалея
        <ul>
            <li>Макароны «Спагетти»</li>
            <li>Рис круглозёрный</li>
            <li>Масло подсолнечное</li>
        </ul>
    </li>
    <li>Мясное
        <ul>
            <li>Куриное филе (500 г)</li>
            <li>Фарш говяжий (400 г)</li>
        </ul>
    </li>
</ul>

Обратите внимание: категории (Молочные продукты, Овощи и фрукты и т.д.) — это <li> верхнего уровня. Внутри каждого такого <li> — свой <ul> с конкретными продуктами. Текст категории находится прямо внутри <li> (перед вложенным <ul>).

Задание 2. Меню сайта (смешанные списки)

Создайте структуру меню для интернет-магазина электроники. Используйте <ul> для категорий и <ol> для рейтинга популярных товаров внутри категории.

<h1>Интернет-магазин «Электрон»</h1>
<h2>Каталог товаров</h2>
<ul>
    <li>Ноутбуки
        <ol>
            <li>Dell XPS 13</li>
            <li>MacBook Air M3</li>
            <li>Lenovo ThinkPad X1</li>
        </ol>
    </li>
    <li>Смартфоны
        <ol>
            <li>iPhone 16 Pro</li>
            <li>Samsung Galaxy S25</li>
            <li>Google Pixel 10</li>
        </ol>
    </li>
    <li>Наушники
        <ol>
            <li>Sony WH-1000XM6</li>
            <li>AirPods Pro 3</li>
            <li>Bose QC Ultra</li>
        </ol>
    </li>
</ul>

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

Попробуйте объединить оба задания: сделайте страницу, где слева — меню категорий (задание 2), а справа — список покупок для выбранной категории (задание 1). Расположите их друг за другом, каждый в своём <section> или просто друг за другом.

Скопируйте любой из примеров в HTML-файл, откройте в браузере и посмотрите, как списки выглядят. Попробуйте добавлять и удалять элементы, менять ul на ol, вкладывать списки — экспериментируйте! Чем больше вы практикуетесь, тем быстрее освоите списки.

Поздравляю! Вы завершили урок 2.4. Теперь вы умеете создавать маркированные и нумерованные списки, использовать атрибуты ol, вкладывать списки друг в друга. В следующем уроке мы изучим ссылки и изображения.