HTML-тег <ol>

HTML-тег <ol> используется для создания упорядоченного списка на веб-странице. Элементы упорядоченного списка отображаются в определённой последовательности, каждый элемент пронумерован или имеет метку. Упорядоченные списки идеально подходят для инструкций, рейтингов и любого контента, где порядок элементов имеет значение.

Тег <ol> работает с тегом <li> , где каждый <li> представляет отдельный элемент списка.

Базовый синтаксис HTML-тега <ol>

Базовая структура упорядоченного списка:

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Элемент <ol> служит контейнером, и каждый <li> представляет элемент в списке.

Пример простого упорядоченного списка

Вот пример списка инструкций рецепта с использованием тега <ol> :

<!DOCTYPE html>
<html>
    <body>
        <h2>Recipe Instructions</h2>
        <ol>
            <li>Preheat the oven to 350°F.</li>
            <li>Mix all ingredients in a bowl.</li>
            <li>Bake for 25 minutes.</li>
        </ol>
    </body>
</html>

Пояснение: пункты списка «Разогреть духовку», «Смешать все ингредиенты» и «Выпекать 25 минут» отображаются в виде пронумерованных шагов.

Оформление упорядоченных списков с помощью CSS

Вы можете стилизовать упорядоченные списки с помощью CSS, чтобы изменить стиль нумерации или внешний вид:

<!DOCTYPE html>
<html>
    <head>
        <style>
            ol {
                list-style-type: upper-roman; /* Change numbers to Roman numerals */
                padding-left: 20px;
            }
            ol.custom-list {
                list-style-type: square; /* Change to square bullets */
            }
        </style>
    </head>
    <body>
        <h2>Roman Numeral List</h2>
        <ol>
            <li>Step 1</li>
            <li>Step 2</li>
        </ol>

        <h2>Custom Styled List</h2>
        <ol class="custom-list">
            <li>Step A</li>
            <li>Step B</li>
        </ol>
    </body>
</html>

Оформление упорядоченных списков с помощью CSS

Результат: в первом списке отображаются римские цифры, а во втором используются квадратные маркеры, как определено свойством list-style-type .

Вложенные упорядоченные списки

Вы можете создавать вложенные упорядоченные списки для представления иерархического контента:

<!DOCTYPE html>
<html>
    <body>
        <h2>Nested List Example</h2>
        <ol>
            <li>Main Step 1
                <ol>
                    <li>Sub-step 1</li>
                    <li>Sub-step 2</li>
                </ol>
            </li>
            <li>Main Step 2
                <ol>
                    <li>Sub-step A</li>
                    <li>Sub-step B</li>
                </ol>
            </li>
        </ol>
    </body>
</html>

Пояснение: Вложенные теги <ol> создают подсписки под элементами основного списка, что приводит к иерархической нумерации.

Атрибуты HTML-тега <ol>

Тип: определяет тип нумерации или маркеров. Возможные значения: <ul class="wp-block-list">
1 : Числовое значение по умолчанию(1, 2, 3).
A : Заглавные буквы(A, B, C).
a : Строчные буквы(a, b, c).
I : Заглавные римские цифры(I, II, III).
i : Строчные римские цифры(i, ii, iii).

start: Указывает начальный номер списка. Например,


        start="5"

начинает список с 5.

перевернутый: меняет порядок нумерации на обратный, так что отсчет в списке ведется по убыванию, а не по возрастанию.

Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как

id


        class


        style

Практическое применение тега <ol>

Пошаговые инструкции: предоставьте четкие, пронумерованные шаги для задач или процессов.
Рейтинги: отображение ранжированных элементов, например списков 10 лучших или таблиц лидеров.
Иерархические данные: используйте вложенные списки для представления структурированной или категоризированной информации.
Последовательный контент: представьте любые данные, требующие определенного порядка, например временные шкалы или последовательности событий.

Тег <ol> универсален и может быть настроен с помощью атрибутов и CSS для широкого спектра применений.