Тег <ol>
Описание
Тег <ol> (от англ. "ordered list") создает нумерованный (упорядоченный) список. Каждый элемент списка должен быть помещен в тег <li>. Это блочный элемент, который автоматически добавляет нумерацию к элементам списка.
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
<ol type="1"> <!-- Арабские цифры (по умолчанию) -->
<li>Элемент 1</li>
</ol>
<ol type="A"> <!-- Заглавные латинские буквы -->
<li>Элемент A</li>
</ol>
<ol type="I"> <!-- Римские цифры -->
<li>Элемент I</li>
</ol>
Ключевые особенности:
- Автоматическая нумерация элементов
- Поддержка многоуровневых вложенных списков
- Семантически правильное представление упорядоченных данных
- Гибкое управление отображением через CSS
- Поддержка обратной нумерации (атрибут reversed)
<style>
ol.custom {
list-style-type: none;
counter-reset: my-counter;
padding-left: 0;
}
ol.custom li {
counter-increment: my-counter;
margin-bottom: 10px;
}
ol.custom li::before {
content: "Шаг " counter(my-counter) ": ";
font-weight: bold;
color: #2c3e50;
}
</style>
<ol class="custom">
<li>Подготовить ингредиенты</li>
<li>Смешать компоненты</li>
<li>Выпекать 30 минут</li>
</ol>
Рекомендации по использованию:
- Используйте для перечислений, где важен порядок элементов
- Для сложной нумерации применяйте CSS-счетчики
- Избегайте глубокой вложенности (более 3 уровней)
- Для неупорядоченных списков используйте
<ul> - Сочетайте с
<li>(один тег на элемент списка)
Тег <ol> является важным инструментом структурирования контента, обеспечивая семантически правильное отображение упорядоченных данных и процедур в HTML-документах.
Атрибуты
| reversed | Обратная нумерация |
| start | Начальное значение нумерации |
| type | Тип маркера (1|a|A|i|I) |
| accesskey | Горячая клавиша |
| class | CSS-классы |
| contenteditable | Разрешает редактирование |
| data-* | Пользовательские данные |
| dir | Направление текста |
| hidden | Скрывает элемент |
| id | Уникальный идентификатор |
| lang | Язык содержимого |
| spellcheck | Проверка орфографии |
| style | Инлайновые стили |
| tabindex | Порядок перехода |
| title | Всплывающая подсказка |
| translate | Определяет возможность перевода |
| compact | Компактный вид (устарел) |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 3.0 | 1.0 | 2.0 | 1.0 | 1.0 |