skip to main content

<ol>

html

Кратко 🔗

Тег упорядоченного списка <ol> используется для вёрстки перечня однотипных элементов, когда важен их порядок.

Пример 🔗

<ol>
...
</ol>

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

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

<ol>
<li>Первая мировая война</li>
<li>Вторая мировая война</li>
</ol>

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

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

Подсказки 🔗

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

<ol>
<li>Сходить к врачу</li>
<li>
Сходить в магазин
<ul>
<li>Хлеб</li>
<li>Молоко</li>
<li>Сосиски</li>
</ul>
</li>
<li>Приготовить ужин</li>
</ol>

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

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

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

В работе 🔗

🛠 Упорядоченные списки на сайтах могут использоваться в текстах, когда явно указана нумерация. Другой вариант использования можно часто видеть на медиа-сервисах: упорядоченными списками свёрстаны плейлисты в музыкальной библиотеке.

<ol class="playlist">
<li class="playlist-item">
<span class="song-artist">Nina Simone</span>
<span class="song-title">Sinnerman</span>
</li>
<li class="playlist-item">
<span class="song-artist">The Stranglers</span>
<span class="song-title">Golden Brown</span>
</li>
<li class="playlist-item">
<span class="song-artist">The Weekend</span>
<span class="song-title">Blinding Lights</span>
</li>
</ol>

🛠 Мы можем изменить стиль нумерации несколькими способами:

Используя CSS-свойство list-style-type 🔗

<h2>Творчество А. С. Пушкина</h2>
<ol class="poems">
<li>Руслан и Людмила (1817—1820)</li>
<li>Кавказский пленник (1820—1821)</li>
<li>Гавриилиада (1821)</li>
</ol>
.poems {
list-style-type: square;
}

При помощи псевдоэлемента ::before и свойства content 🔗

<h2>Как мы работаем:</h2>
<ol class="benefits">
<li class="benefits-item">Низкие цены</li>
<li class="benefits-item">Большая база поставщиков</li>
<li class="benefits-item">Быстрая доставка</li>
</ol>
.benefits {
counter-reset: benefits;
}

.benefits-item {
counter-increment: benefits;
}

.benefits-item::before {
content: counter(benefits);
position: absolute;
font-size: 190px;
font-weight: bold;
left: 0;
top: -0.35em;
opacity: 0.5;
color: #1A5AD7;
}

Стилизуя псевдоэлемент ::marker 🔗

<h2>Творчество А. С. Пушкина</h2>
<ol class="poems">
<li class="poems-item">Руслан и Людмила (1817—1820)</li>
<li class="poems-item">Кавказский пленник (1820—1821)</li>
<li class="poems-item">Гавриилиада (1821)</li>
</ol>
.poems-item::marker {
color: #1A5AD7;
font-size: 1.4em;
}

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