Кратко
СкопированоТег упорядоченного списка <ol> используется для вёрстки перечня однотипных элементов, когда важен их порядок.
Пример
Скопировано
<ol> <!-- Содержимое --></ol>
<ol>
<!-- Содержимое -->
</ol>
Как понять
СкопированоТег <ol> обозначает начало и конец списка. Сами пункты списка размечаются при помощи тега <li>. Таким образом, полностью список размечается с использованием обоих этих тегов:
<ol> <li>Первая мировая война</li> <li>Вторая мировая война</li></ol>
<ol>
<li>Первая мировая война</li>
<li>Вторая мировая война</li>
</ol>
Обратите внимание, что дочерними тегами для тега <ol> могут быть исключительно теги <li> (ещё можно теги <script>, но это редкость). Любые другие теги обязательно должны находиться внутри пунктов списка <li>. Например, вложенный список должен верстаться так:
<ol> <li>Сходить в магазин</li> <li> Испечь пиццу <!-- В этот пункт списка вложен ещё один полноценный список: --> <ol> <li>Замесить тесто</li> <li>Нарезать начинку</li> </ol> <!-- Закрывающий тег родительского пункта списка: --> </li></ol>
<ol>
<li>Сходить в магазин</li>
<li>
Испечь пиццу
<!-- В этот пункт списка вложен ещё один полноценный список: -->
<ol>
<li>Замесить тесто</li>
<li>Нарезать начинку</li>
</ol>
<!-- Закрывающий тег родительского пункта списка: -->
</li>
</ol>
Подсказки
Скопировано💡 Вложенным может быть как упорядоченный список <ul>, так и неупорядоченный список <ol>.
<ol> <li>Сходить к врачу</li> <li> Сходить в магазин <ul> <li>Хлеб</li> <li>Молоко</li> <li>Сосиски</li> </ul> </li> <li>Приготовить ужин</li></ol>
<ol>
<li>Сходить к врачу</li>
<li>
Сходить в магазин
<ul>
<li>Хлеб</li>
<li>Молоко</li>
<li>Сосиски</li>
</ul>
</li>
<li>Приготовить ужин</li>
</ol>
💡 Дочерними тегами обязательно должны быть <li>, в которые уже могут быть вложены любые другие теги.
💡 Как понять, где нужен упорядоченный список: если элементы несут один и тот же смысл, являются частью одной сущности, но явно или неявно подразумевается порядок в перечислении, то выбираем <ol>. Пример: план дел на день. Каждое дело — это однотипный элемент, но при этом подразумевается, что дела будут выполнены в определённом порядке.
Бывают ситуации, когда порядок неважен. Например, пункты меню или навигации на сайте. В этом случае выбираем <ul>.
На практике
Скопированосоветует
Скопировано🛠 Тег <ol> чаще всего используется для разметки нумерованных списков в тексте. Другой вариант использования часто можно увидеть на медиасервисах: упорядоченными списками свёрстаны плейлисты в музыкальной библиотеке.
<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>
<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>
<h2>Творчество А. С. Пушкина</h2>
<ol class="poems">
<li>Руслан и Людмила (1817—1820)</li>
<li>Кавказский пленник (1820—1821)</li>
<li>Гавриилиада (1821)</li>
</ol>
.poems { list-style-type: square;}
.poems {
list-style-type: square;
}
<h2>Как мы работаем:</h2><ol class="benefits"> <li class="benefits-item">Низкие цены</li> <li class="benefits-item">Большая база поставщиков</li> <li class="benefits-item">Быстрая доставка</li></ol>
<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;}
.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>
<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;}
.poems-item::marker {
color: #1A5AD7;
font-size: 1.4em;
}