Клавиша / esc

<ol>

Создаёт упорядоченный список элементов.

Время чтения: меньше 5 мин

Кратко

Скопировано

Тег упорядоченного списка <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;
}

        
        
          
        
      

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

Скопировано
        
          
          <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;
}