Нумерованный список часто называется упорядоченным (Ordered List) и представляет собой определенную последовательность элементов. Для создания нумерованного списка используется тег-контейнер <OL>, внутри которого располагаются пункты перечня информационных данных, за указание которых отвечает специальный тег <LI> (List Item — пункт списка или элемент списка)
Как видно из примера, после каждого пункта списка осуществляется перенос строки, причем без указания каких-либо структурных тегов. Также следует заметить, что закрывающий тег </li> отсутствует, хотя и существует в спецификации HTML. Закрывать этот тег не обязательно.
Если заголовок списка «Нужно купить в магазине:» размещается между тегом <ol> и первым пунктом списка <li>, то заголовок разместится с отступом от левого края документа (как и все пункты списка) и на расстоянии в одну строку от предыдущего текста.
При указании заголовка перед тегом <ol> браузер, интерпретируя HTML-код, создаст двойной перенос и разместит текст заголовка левее пунктов списка.
Иногда может возникнуть ситуация, когда список содержит определенный разрыв в последовательности представления пунктов (например, после пункта 3 должен идти пункт 5). Для этой цели используется специальный параметр тега <li> - VALUE
Для указания типа нумерованного списка применяется атрибут type тега<ol>. Его возможные значения приведены ниже в таблице:
Тип списка | Код HTML | Пример |
Арабские числа | <ol type="1"> <li>...</li> </ol> | 1. Математика 2. Биология 3. Информатика |
Прописные буквы латинского алфавита | <ol type="A"> <li>...</li> </ol> | A. Математика B. Биология C. Информатика |
Строчные буквы латинского алфавита | <ol type="a"> <li>...</li> </ol> | a. Математика b. Биология c. Информатика |
Римские числа в верхнем регистре | <ol type="I"> <li>...</li> </ol> | I. Математика II. Биология III. Информатика |
Римские числа в нижнем регистре | <ol type="i"> <li>...</li> </ol> | i. Математика ii. Биология iii. Информатика |
Создадим дополнительный файл Список.html и создадим в нем список фамилий группы:
Запустим на выполнение файл Index.html: