Тег ul (от английского unordered list, «неупорядоченный список») записывает маркированный список: перечень, в котором порядок пунктов не меняет смысла. Это парный тег: закрывающий </ul> обязателен. Сами пункты записывают в li, а точки слева, отступы и расстояния между пунктами браузер добавляет по умолчанию, и всё это переопределяется в CSS.
Урок «Списки: ul, ol и вложенные списки» учит записывать список и выбирать между ul и ol. Здесь разберём другое: что браузер делает с неверной записью, почему пропадают маркеры, куда уходит отступ и как превратить ul в строку меню.
<ul>
<li>Чай</li>
<li>Кофе</li>
<li>Какао</li>
</ul>В этой статье
- Тег ul в HTML: что это и для чего нужен
- Тег ul или ol: чем отличаются и почему ul не нумерует
- Что можно записать внутри тега ul: li, div, текст и вложенный список
- Вложенный список в теге ul: как записать и какие маркеры у уровней
- Тег ul внутри p: почему браузер разрывает абзац
- Как убрать точки у тега ul: list-style и что ещё прячет маркеры
- Стили тега ul: отступ, вид маркера, цвет и положение
- Атрибуты тега ul: type и compact устарели, что работает вместо них
- Тег ul в меню сайта: nav, горизонтальный список и ссылки в li
- Частые ошибки с тегом ul
Тег ul в HTML: что это и для чего нужен
Тег ul блочный: он занимает всю ширину строки и начинается с новой. Внутри записывают пункты li (от английского list item, «пункт списка»), а любой пункт может содержать текст, ссылку, абзац, картинку и даже другой список. Закрывающий </li> можно опустить: пункт заканчивается там, где начинается следующий li. В примерах этой страницы закрывающий тег пункта записан всегда: так список читается проще.
По умолчанию у ul отступ слева 40 пикселей, сверху и снизу по 16 пикселей, а у каждого пункта слева закрашенный круг. Круг находится не внутри пункта, а в отступе слева: для него этот отступ и оставлен. У списка, вложенного в пункт, отступы сверху и снизу нулевые, поэтому подпункты не отрываются от своего пункта.
Пример: из чего состоит список
Нажмите кнопку: красная рамка обведёт весь список, зелёные пунктирные — отдельные пункты.
Тег ul или ol: чем отличаются и почему ul не нумерует
Выбирать между ul и ol нужно по смыслу, а не по внешнему виду. Проверка простая: поменяйте два соседних пункта местами. Если смысл не изменился, это ul: список покупок, набор возможностей, перечень тегов. Если смысл нарушился, нужен ol: шаги рецепта, места в рейтинге, этапы заказа.
Есть и частое недоразумение: будто ul нумерует пункты. Это не так, цифр ul не добавляет. Цифры на экране можно получить правилом CSS list-style-type: decimal, но по смыслу список останется неупорядоченным, а разметка не скажет читателю и программе, что шаги идут по порядку. Поэтому для шагов записывают ol, а для перечней и наборов — ul. Различия между двумя тегами подробно разобраны в уроке «Чем отличаются ul и ol».
<ul>
<li>Чай</li>
<li>Сахар</li>
</ul>
<ol>
<li>Нагрейте воду</li>
<li>Засыпьте чай</li>
</ol>Пример: можно ли поменять пункты местами
Выберите список и тип, затем поменяйте первые два пункта: под списком написано, подходит ли тег.
Что можно записать внутри тега ul: li, div, текст и вложенный список
По стандарту внутри ul допустимы только пункты li и служебные элементы script и template. Браузер при этом снисходителен: текст, div и даже другой ul, записанные рядом с пунктами, он выводит как есть. Но такая запись остаётся ошибкой: валидатор Nu сообщит о ней, а селектор ul > li не найдёт того, что пунктом не является.
Зато внутри самого li допустимо почти всё: текст, абзац тега p, ссылка тега a, картинка, блок div и вложенный список. Выберите запись и сравните, что допустимо, а что только терпит браузер.
<ul>
<li>
<p>Сенча</p>
<a href="/p/chai.html">О сорте</a>
</li>
</ul>Пример: что допустимо внутри ul
Выберите запись: вверху код, под ним результат и вывод — допустима ли такая запись.
Вложенный список в теге ul: как записать и какие маркеры у уровней
Вложенный список записывают внутри пункта, после его текста, и закрывают до закрывающего </li>. Так подпункты относятся к своему пункту, а не висят рядом с ним. Внутрь ul можно вложить и ol, и наоборот: уровни чередуются свободно. Как правильно вложить список, показано и в разделе урока «Как правильно вложить список в список».
У вложенных списков браузер меняет маркер по уровням: первый уровень выводит закрашенный круг, второй пустой кружок, третий квадрат. Четвёртый уровень снова получает квадрат, как и все последующие. Меняйте число уровней и смотрите, какой маркер получает каждый.
<ul>
<li>Чай
<ul>
<li>Зелёный
<ul>
<li>Улун</li>
</ul>
</li>
</ul>
</li>
</ul>Пример: маркеры вложенных уровней
Двигайте ползунок: список растёт вглубь, а под ним написано, какой маркер у каждого уровня.
Тег ul внутри p: почему браузер разрывает абзац
Список нельзя записывать внутри абзаца. Тег p закрывается сам, как только браузер встречает ul: в стандарте WHATWG список прямо внутри p не допускается. Если нужно написать фразу, в середине которой список, записывают три блока: абзац, список и ещё один абзац.
Если же всё записать в одном абзаце, получится не то, что задумано: текст после списка окажется вне абзаца, а в конце появится пустой абзац. Переключайте записи и смотрите на рамки абзацев.
<p>Выпейте:</p>
<ul>
<li>чай</li>
<li>воду</li>
</ul>
<p>и отдохните.</p>Пример: ul внутри p и между абзацами
Красные пунктирные рамки — абзацы. В первой записи слова про отдых оказались вне абзаца.
Как убрать точки у тега ul: list-style и что ещё прячет маркеры
Обычно маркеры убирают правилом list-style: none. Но маркер можно потерять и без него: он нарисован снаружи блока пункта, поэтому его скрывает всё, что действует на сам блок. Это display: block у li, который превращает пункт в обычный блок, и overflow: hidden у li, который обрезает всё за краем.
Правило list-style: none убирает только точки, а отступ слева остаётся. Если нужен текст у самого левого края, к этому правилу добавляют padding: 0. А вот display у самого ul, например flex, маркеры не убирает: они остаются у каждого пункта.
ul {
list-style: none;
margin: 0;
padding: 0;
}Пример: что убирает маркеры, а что нет
Выберите правило: под кодом написано, остались ли маркеры и почему.
Стили тега ul: отступ, вид маркера, цвет и положение
Отступ слева задаёт свойство padding-left, и от него зависит судьба маркера. Пока отступ примерно равен размеру шрифта или больше, маркер находится внутри блока списка. Если отступ убрать, маркер выйдет за левый край списка: на странице он виден, а в контейнере с overflow: hidden (карточка, слайдер, раскрывающийся блок) обрезается. Двигайте ползунок отступа и включайте обрезку.
ul {
padding-left: 1.5em;
}Пример: отступ слева и обрезка маркера
Зелёная пунктирная рамка — контейнер списка. Без обрезки маркер виден за её краем, с обрезкой — пропадает.
Вид маркера задаёт list-style-type: например, disc, circle и square. Значения decimal или lower-latin дают цифры и буквы, а в кавычках можно записать собственную строку. Цвет и размер маркера меняет псевдоэлемент ::marker у li, а list-style-position: inside переносит маркер внутрь блока пункта.
ul {
list-style-type: square;
}
li::marker {
color: #FF6B6B;
}
ul.inside {
list-style-position: inside;
}Пример: вид, цвет и положение маркера
Выберите вид маркера и включайте цвет и положение: рядом с кодом всегда видны правила, которые получились.
Атрибуты тега ul: type и compact устарели, что работает вместо них
У ul нет собственных атрибутов: в стандарте WHATWG перечислены только глобальные, которые есть у любого элемента, например class, id, style и lang. Раньше были ещё typecompacttype по-прежнему применяет, поэтому старая разметка работает, а новую так писать не надо: вид маркера задаёт CSS.
| Атрибут | Статус | Что работает вместо него | Пример записи |
|---|---|---|---|
class, id, style, lang | актуален | Глобальные атрибуты: работают у любого элемента | <ul class="menu"> |
type | устарел | Свойство list-style-type | ul { list-style-type: square; } |
compact | устарел | Отступы и line-height в CSS | li { margin: 0; } |
start, reversed | не для ul | Эти атрибуты есть только у ol, на ul валидатор считает их ошибкой | <ol start="5"> |
Пример: атрибут type против правила CSS
Выберите запись: под кодом назван итоговый маркер, который выбрал браузер.
Тег ul в меню сайта: nav, горизонтальный список и ссылки в li
Меню сайта — по сути список ссылок, поэтому его и записывают списком: внутри тега nav находится ul, в нём пункты li, а в каждом пункте ссылка (тег a). Для набора ссылок это верный выбор, а для списка команд предусмотрен отдельный тег menu. Меню в строку получают за счёт display: flex, а маркеры и отступ убирают отдельными правилами.
Ссылка записывается внутри li, а не вместо него: тогда пункты остаются пунктами списка, а область нажатия можно расширить стилями самой ссылки.
<nav>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/p/uroki.html">Уроки</a></li>
<li><a href="/p/tegi-html.html">Шпаргалка</a></li>
</ul>
</nav>Пример: меню в строку из списка ul
Переключайте записи: во второй пункты стоят в строку без маркеров, в третьей маркеры остались.
Частые ошибки с тегом ul
Типичные ошибки с тегом ul и как их исправить.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Текст или div прямо в ul | Браузер выводит без маркера, валидатор считает ошибкой | Записывать содержимое внутри li |
Вложенный ul рядом с li | Браузер выводит, валидатор считает ошибкой | Записывать подсписок внутри li, после текста пункта |
ul внутри p | Абзац разрывается, остаётся пустой p | Записать абзац, список и ещё один абзац |
Пункты через <br> вместо li | Нет ни списка, ни маркеров, а структура страницы теряется | Записать каждый пункт в li |
ul для шагов по порядку | Маркеры не показывают порядок, смысл теряется | Записать ol |
list-style-type: decimal вместо ol | Цифры видны, но по смыслу список остаётся неупорядоченным | Для нумерации записывать ol |
li { display: block } без причины | Маркеры пропадают | Не менять display у li или вернуть list-item |
padding: 0 у ul в контейнере с overflow: hidden | Маркер обрезан | Оставить отступ слева или записать list-style-position: inside |
Меню в строку через display: flex без list-style: none | Маркеры остались у каждого пункта | Добавить list-style: none, margin: 0 и padding: 0 |
Атрибут type у ul | Устарел, а правило CSS его перебивает | Задать list-style-type в CSS |
