Урок 19. Нумерованный список в HTML

Ранее вы изучили теги <br> и <hr> для создания переноса строки и разделительной линии, соответственно. В этом уроке изучим нумерованные списки.

Что такое нумерованный список в HTML? Нумерованный список – это набор элементов с порядковыми номерами. Его преимущество в том, что процесс нумерации элементов автоматизирован и поэтому вы не запутаетесь.

Так же можно начать отсчет не с первого, а со сто первого элемента. Можно менять тип списка: арабские числа, прописные буквы латинского алфавита, строчные буквы латинского алфавита, римские числа в верхнем регистре, римские числа в нижнем регистре.

Вокруг нумерованного списка добавляются отступы: сверху, снизу и слева.

Для создания нумерованного списка используется тег <ol> Каждый пункт нумерованного списка выделяется парным тегом <li>, далее пример как создать нумерованный список:

<ol>
    <li>Пункт первый</li>
    <li>Пункт второй</li>
</ol>

Нумерованные списки можно вкладывать друг в друга. Глубина может быть любой. Такой способ часто применяется для создания меню на сайте. Далее пример вложенного, нумерованного списка:

<ol>
    <li>Пункт первый
        <ol>
            <li>Пункт первый в первом</li>
            <li>Пункт второй в первом
                <ol>
                    <li>Пункт первый в первом, во втором</li>
                    <li>Пункт второй в первом, во втором</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Пункт второй</li>
</ol>

Чтобы поменять тип списка, нужно использовать атрибут type. Значение атрибута должно быть первым символом данной последовательности, например, для арабских чисел type = "1", для римских прописных type = "I" и т.д.

• Арабские числа – 1, 2 и т.д.
• Прописные латинские буквы - A, B и т.д.
• Строчные латинские буквы - a, b и т.д.
• Прописные римские числа - I, II и т.д.
• Строчные римские числа - i, ii и т.д.

Возьмем предыдущий пример и укажем типы списка:

<ol type = "i">
    <li>Пункт первый
        <ol type = "1">
            <li>Пункт первый в первом</li>
            <li>Пункт второй в первом
                <ol type = "A">
                    <li>Пункт первый в первом, во втором</li>
                    <li>Пункт второй в первом, во втором</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Пункт второй</li>
</ol>

Далее рассмотрим атрибут start нумерованного списка. Атрибут start нужен для того, чтобы начать список с нужного значения. Атрибут start работает со всеми типами списков. Далее пример:

<ol start = "1920">
    <li>Пункт первый</li>
    <li>Пункт второй</li>
</ol>

Оформление при помощи CSS нумерованного списка

О CSS будет еще много уроков, поэтому мы только кратко рассмотрим стилизацию списка.

Для начала отодвинем наш нумерованный список от левого края на 20 пикселей. Для этого используем свойство margin.

ol {
    margin: 0 0 0 20px;
}

В интернете часто задают вопрос: «Как изменить цвет маркеров (у маркированного списка) или цвет нумерации (у нумерованного списка)?». Сделать это очень просто, например, вот так:

<ol start = "1920">
    <li><span>Пункт первый</span></li>
    <li><span>Пункт второй</span></li>
</ol>

li {
    color: red;
}
li span {
    color: #000000;
}

Закончим урок рассмотрением нумерованных списков с позиции SEO.

Нумерованный список и SEO

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

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

Урок 20. Что такое маркированный список в HTML