HTML-тег <ol>
Тег <ol> создаёт нумерованный список: порядок элементов важен.
Каждый пункт — <li> … </li>. Внутри li могут быть другие элементы (списки, изображения, заголовки, абзацы).
Маркеры: арабские цифры, латинские буквы, римские цифры и т.д. Тип раньше задавался атрибутом type; в современной вёрстке чаще используют CSS list-style-type.
По умолчанию — арабские числа с 1.
<ul> — ненумерованный список; порядок там не несёт смысловой нагрузки.
Списки можно вкладывать друг в друга, чередуя <ol> и <ul>.
TIP
Стили к <ol> наследуют вложенные элементы внутри li.
Синтаксис
Парный тег.
Пример
Нумерованный список
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Appetizers</li>
<li>Hot</li>
<li>Salads</li>
</ol>
<ol start="50">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol type="A">
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>Во втором списке использован start="50".
CSS list-style-type
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of ordered lists</h2>
<ol style="list-style-type: upper-roman">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol style="list-style-type: hebrew">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
<ol style="list-style-type: decimal">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
</body>
</html>Результат
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| compact | compact | Уменьшить отступы (устарело; используйте line-height). |
| reversed | reversed | Обратный порядок нумерации. |
| start | число | Начальное значение счётчика. |
| type | 1 A a I i | Тип маркера (предпочтительно CSS). |
Также глобальные атрибуты и атрибуты событий.
Подсказка для стилей
json
{
"tag_name": "ol"
}Practice
Особенности HTML-тега <ol>?