Нумерованный список в HTML. Как создать его и настроить автоматическую нумерацию?

нумерованный список в html. как создать его и настроить автоматическую нумерацию?

Создание нумерованного списка

Существуют ситуации, когда ряд элементов нужно расположить друг за другом в виде списка, и пронумеровать его по порядку. Данная операция знакома всем. Она присутствует в любом текстовом редакторе. Нумерованный список необходим для создания последовательности. Например, это может быть инструкция по сборке конструктора, определяющая ряд действий. Вы не сможете сразу перейти к последнему пункту в списке, так как он основан на предыдущих.

В HTML для создания нумерованного списка используется элемент <ol>. Всё содержимое, предназначенное для вставки, должно быть добавлено в элементы <li>. Каждый элемент <li>, вставленный между открывающим тегом <ol> и закрывающим </ol>, будет отображен с порядковым номером. Созданный список имеет стилизацию по умолчанию. Во всех браузерах он отобразится c верхним, левым и нижним отступами.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания нумерованного списка</title>
    </head>
    <body>
        <h1>Инструкция приготовления яичницы</h1>
        <ol>
            <li>Разогрейте сковороду на огне</li>
            <li>Влейте в неё немного масла</li>
            <li>Разбейте яйца и посолите</li>
            <li>Добавьте специй по вкусу</li>
        </ol>
    </body>
</html>

Заметка
Нумерация в списках ведется автоматически. Можно добавить новый элемент в любую его часть, но при открытии HTML-страницы в браузере отобразятся переопределенные порядковые номера.

Расширенные возможности

По умолчанию последовательность элементов нумерованного списка задается с помощью арабских цифр. HTML позволяет переопределить эту настройку с помощью атрибута type.

Значения, которые может принимать атрибут type:

  • A — будут выведены заглавные латинские буквы (A, B, C и т.д).
  • a — используются прописные латинские буквы (a, b, c и т.д).
  • I — используются большие римские цифры (Ⅰ, ⅠⅠ, ⅠⅠⅠ и т.д).
  • i — используются малые римские цифры (ⅰ, ⅰⅰ, ⅰⅰⅰ и т.д).
  • 1 — применяется по умолчанию, и выводит арабские цифры (1, 2, 3 и т.д).
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Изменение типа нумерации</title>
    </head>
    <body>
        <h1>Список дел на воскресенье</h1>
        <ol type="A">
            <li>Приготовить завтрак</li>
            <li>Убраться в квартире</li>
            <li>Проверить почту</li>
            <li>Погладить вещи</li>
        </ol>
    </body>
</html>

Нумерованный список позволяет указать, с какого числа начинать отсчет. Для этого используется атрибут start, значением которого должно быть число. Не важно, к какому типу относится список. Если он выводит латинские буквы, то значение атрибута start укажет порядковый номер буквы в алфавите.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Изменение начала отсчета</title>
    </head>
    <body>
        <h1>Список второй десятки игроков</h1>
        <ol start="10">
            <li>Сафин Руслан</li>
            <li>Павел Воробьев</li>
            <li>Антон Захаров</li>
            <li>Андрей Потапов</li>
            <li>...</li>
        </ol>
    </body>
</html>

Последние публикации