Теория урока

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

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

Кратко

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

- Нумерованный список — это набор элементов с порядковыми номерами

- Процесс нумерации автоматизирован, что упрощает работу

- Можно начать отсчет с любого элемента

- Типы списков: арабские числа, прописные буквы, строчные буквы, римские числа

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

- Используется тег <ol>

- Каждый пункт выделяется тегом <li>

- Можно вкладывать нумерованные списки друг в друга

Изменение типа списка

- Используется атрибут type

- Значение атрибута должно быть первым символом последовательности

- Примеры: арабские числа — type = "1", римские прописные — type = "I"

Атрибут start

- Используется для начала списка с нужного значения

- Работает со всеми типами списков

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

- Отступ от левого края на 20 пикселей с помощью свойства margin

- Изменение цвета маркеров и нумерации

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

- Нумерованные списки делают информацию более структурированной

- Информация становится понятнее для читателя и поисковых роботов

Итоги урока

- Рассмотрены способы создания нумерованного списка

- Основные атрибуты и стилизация с помощью CSS

- В следующем уроке изучим маркированные списки

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

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

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

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

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

Пример (html)

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

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

Пример (html)

<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 и т.д.

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

Пример (html)

<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 работает со всеми типами списков. Далее пример:

Пример (html)

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

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

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

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

Пример (css)

ol {
    margin: 0 0 0 20px;
}

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

Пример (html)

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

Пример (css)

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

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

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

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

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

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

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

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

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