Список в HTML - это не просто строчки с точками или циферками перед ними. Выбор между <ul> и <ol> - это выбор смысла: имеет ли значение порядок пунктов. Разберём, как список устроен внутри и как правильно вложить один список в другой, не сломав структуру страницы.
В этом уроке
Попробуй заменить <ul> на <ol> (не забыв поменять и закрывающий тег) - результат справа сразу покажет разницу в маркерах.
Чем отличаются <ul> и <ol>
Разница не в точках и циферках, а в смысле. Простой способ проверить, какой тег нужен: мысленно поменяй пункты списка местами. Если смысл списка от этого меняется - нужен <ol>, порядок здесь важен. Если ничего не меняется - подойдёт <ul>.
<ol><li>Разогрей духовку</li><li>Смешай тесто</li><li>Выпекай 25 минут</li></ol> - порядок шагов важен: перепутай их местами, и рецепт перестанет работать.
<ul><li>Разогрей духовку</li><li>Смешай тесто</li><li>Выпекай 25 минут</li></ul> - список визуально работает, но <ul> ничего не говорит о том, что порядок шагов принципиален.
Что можно класть внутрь <ul> и <ol>, а что нельзя
Прямо внутрь <ul> и <ol> можно класть только тег <li> - каждый пункт списка отдельно. Любой другой контент, помещённый прямо внутрь этих тегов, минуя <li>, не превращается в пункт списка сам по себе: браузер такую разметку не чинит и не выдаёт ошибку, но этот кусок остаётся без маркера и без структуры настоящего пункта.
<ul><li>Первый пункт</li><li>Второй пункт</li></ul> - оба пункта оформлены тегом <li>.
<ul>Первый пункт без тега li<li>Второй пункт</li></ul> - первая строка остаётся в разметке как обычный текст: без маркера и без пометки, что это отдельный пункт списка.
Как правильно вложить список в список
Вложенный список нужно класть внутрь тега <li> того пункта, к которому он относится - а не отдельным блоком рядом с этим <li>. Разница может быть незаметна на глаз: оба варианта иногда выглядят одинаково в браузере. Но по структуре документа это разные вещи - во втором случае вложенный список формально не принадлежит ни одному конкретному пункту.
<ul>
<li>Молоко
<ul>
<li>Обычное</li>
<li>Безлактозное</li>
</ul>
</li>
<li>Хлеб</li>
</ul>Вложенный список - внутри <li> пункта «Молоко», он явно к нему относится.
<ul>
<li>Молоко</li>
<ul>
<li>Обычное</li>
<li>Безлактозное</li>
</ul>
<li>Хлеб</li>
</ul>Вложенный <ul> здесь - отдельный сосед пункта «Молоко», а не его часть: формально неясно, к какому пункту он относится.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Использовать <ul> там, где порядок пунктов важен (например, для шагов инструкции) |
Смысл теряется для поисковика и программ чтения с экрана - они не поймут, что порядок принципиален | Использовать <ol> там, где порядок пунктов меняет смысл списка |
Класть текст прямо внутрь <ul>/<ol>, минуя тег <li> |
Текст остаётся в разметке, но не получает ни маркера, ни структуры отдельного пункта списка | Каждый пункт списка оборачивать в свой <li> |
Помещать вложенный список рядом с <li>, а не внутрь него |
Внешне список может выглядеть нормально, но по структуре вложенный список не принадлежит конкретному пункту | Помещать вложенный <ul>/<ol> внутрь тега <li> того пункта, к которому он относится |
Выбирать <ol> только потому, что визуально хочется цифры перед пунктами |
Тег перестаёт совпадать со смыслом содержимого, если на самом деле порядок пунктов не важен | Опираться на смысл (важен ли порядок), а не на то, как должен выглядеть список |
Шпаргалка
| Термин | Значение |
|---|---|
<ul> | Список, где порядок пунктов не важен |
<ol> | Список, где порядок пунктов имеет значение |
<li> | Единственный тег, который можно класть прямо внутрь <ul>/<ol> |
| Вложенный список | Помещается внутрь <li> того пункта, к которому относится |
| Маркеры и цифры | Задаются браузером по умолчанию; стиль меняется через CSS list-style-type, а не переделкой структуры |
Коротко: отвечаем на вопросы
Как убрать точки или цифры у списка, если они не нужны?
Браузер показывает маркеры по умолчанию, но их вид полностью управляется CSS-свойством list-style-type (а не переделкой HTML). Если на каком-то сайте список уже без маркеров - почти всегда это не значит, что там особый тег: просто в CSS для этого списка задано list-style: none.
Что будет, если написать текст в <ul> напрямую, не обернув его в <li>?
Браузер не выдаст ошибку и не остановит загрузку страницы, но и не исправит разметку сам: такой текст останется в коде без маркера и без структуры настоящего пункта списка - формально это невалидная разметка, даже если внешне ничего страшного не произошло.
Правда ли, что <ul> и <ol> отличаются только внешним видом - точками и цифрами?
Нет, это частое заблуждение. Оба тега можно оформить как угодно через CSS, вплоть до полностью одинакового вида - разница между ними не во внешнем виде, а в том, что <ol> сообщает браузеру, поисковику и программам для чтения с экрана: порядок пунктов здесь важен.
