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

Что такое нумерованный список в 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 нумерованного списка

Об этом будет еще много уроков, поэтому мы кратко рассмотрим стилизацию списка. Для начала давайте отодвинем наш нумерованный список от левого края на 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 продвижении, так как они делают информацию на сайте более структурированной. А это значит, если вы будете использовать списки в нужных местах, то информация будет более понятной для читателя, а так же для поисковых роботов.

Похожие уроки Codebra

1. Вам нужно повторить картинку. То есть используйте вложение нумерованных списков (без рамки). Вот картинка ниже:
2. Начало положено верно
3. Первая ветка завершена

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.