Упорядоченные списки HTML
Тег <ol> определяет упорядоченный список. Упорядоченный список может быть нумерованным или алфавитным.
Упорядоченный список HTML
Упорядоченный список начинается с тега <ol>, а каждый элемент начинается с тега <li>. По умолчанию элементы отмечены числами.
Пример
Базовый нумерованный список.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Базовый нумерованный список</title>
</head>
<body>
<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
</body>
</html>
Упорядоченный список HTML - атрибут Type
Атрибут type элемента <ol> задаёт тип маркера: type="1" для чисел (по умолчанию), type="A" для заглавных букв, type="a" для строчных букв, type="I" для заглавных римских цифр, и type="i" для строчных римских цифр.
Числа
Нумерация числами.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип: числа</title>
</head>
<body>
<ol type="1">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
</body>
</html>
Заглавные буквы
Нумерация заглавными буквами.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип: прописные буквы</title>
</head>
<body>
<ol type="A">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
</body>
</html>
Строчные буквы
Нумерация строчными буквами.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип: строчные буквы</title>
</head>
<body>
<ol type="a">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
</body>
</html>
Заглавные римские цифры
Нумерация заглавными римскими цифрами.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип: прописные римские цифры</title>
</head>
<body>
<ol type="I">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
</body>
</html>
Строчные римские цифры
Нумерация строчными римскими цифрами.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тип: строчные римские цифры</title>
</head>
<body>
<ol type="i">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
</body>
</html>
Управление счётчиком списка
По умолчанию упорядоченный список начинает счёт с 1. Чтобы начать с другого числа, используйте атрибут start.
Пример
Список, начинающий счёт с 50.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Атрибут start</title>
</head>
<body>
<ol start="50">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
</body>
</html>
Вложенные списки HTML
Списки можно вкладывать друг в друга, то есть один список может находиться внутри другого.
Примечание: Элемент списка (<li>) может содержать и новый список, и другие элементы, такие как изображения и ссылки.
Пример
Упорядоченный список с подсписком внутри одного элемента.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вложенный нумерованный список</title>
</head>
<body>
<ol>
<li>Кофе</li>
<li>Чай
<ol>
<li>Чёрный чай</li>
<li>Зелёный чай</li>
</ol>
</li>
<li>Молоко</li>
</ol>
</body>
</html>
Итоги главы
Подведём итог: используйте элемент <ol> для упорядоченного списка, атрибут type для стиля нумерации, и элемент <li> для каждого элемента. Списки можно вкладывать друг в друга, элементы могут содержать другие элементы.
Теги списков HTML
Теги, связанные со списками: <ul> (неупорядоченный список), <ol> (упорядоченный список), <li> (элемент списка), <dl> (список описаний), <dt> (термин), и <dd> (описание термина).