skip to main content

<ul>

html

Кратко 🔗

Если нам нужно сверстать перечень однотипных элементов, порядок которых неважен, мы будем использовать тег неупорядоченного списка <ul>. Частным случаем неупорядоченного списка является маркированный список.

Пример 🔗

<ul>
...
</ul>

Как это понять 🔗

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

<ul>
<li>Молоко</li>
<li>Хлеб</li>
</ul>

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

<ul>
<li>Молоко</li>
<li>
Хлеб
<!-- Закрывающий тег этого LI находится ниже -->
<ul>
<!-- Список вложен во второй пункт -->
<li>Белый</li>
<li>Ржаной</li>
</ul>
</li>
<!-- закрывающий тег здесь -->
</ul>

Подсказки 🔗

💡 Вложенным может быть как неупорядоченный список <ul>, так и упорядоченный список <ol>

<ul>
<li>Сходить в магазин</li>
<li>
Посетить врачей:
<ol>
<li>Терапевт</li>
<li>Офтальмолог</li>
<li>Отоларинголог</li>
</ol>
</li>
<li>Позвонить маме</li>
</ul>

💡 Дочерними тегами обязательно должны быть li, в которые уже могут вложены любые другие теги.

💡 Как понять, где нужен список: если элементы несут один и тот же смысл, являются частью одной сущности, но не имеет значения, в каком порядке они перечислены, то выбираем <ul>. Пример: меню сайта. Каждый элемент меню является частью меню. Но перечислены они могут быть в любом порядке.

Бывают ситуации, когда порядок важен. Например, перечисление популярных статей по убыванию количества комментариев. В этом случае выбираем <ol>.

В работе 🔗

🛠 Неупорядоченным списком на сайтах как правило верстается навигация, рубрикаторы, пагинация, кнопки соцсетей в подвале и другие перечни однотипных элементов:

<ul class="pagination">
<li class="pagination-item">
<a class="pagination-link" href="/page1">1</a>
</li>
<li class="pagination-item">
<a class="pagination-link pagination-link--current">2</a>
</li>
<li class="pagination-item">
<a class="pagination-link" href="/page3">1</a>
</li>
</ul>

Автор: Денис,