Урок с практикой по HTML (Онлайн курсы)
Выбрать другой урок из курса
Теория урока

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

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

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

Используем атрибут start
<ol start = "1920">
<li>Пункт первый</li>
<li>Пункт второй</li>
</ol>

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

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

Код CSS
ol {
margin: 0 0 0 20px;
}

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

Добавляем тег span
<ol start = "1920">
<li><span>Пункт первый</span></li>
<li><span>Пункт второй</span></li>
</ol>
Меняем цвет
li {
color: red;
}
li span {
color: #000000;
}

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

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

<
×
>
Курс «Разметка текста»
Урок 1.1. Заголовки и подзаголовки в HTML
Урок 1.2. Практика: заголовки и подзаголовки в HTML (практика 1)
Урок 2.1. Что такое абзац в HTML (тег P)?
Урок 3.1. Перенос строки и разделительная линия в HTML
Урок 5.2. Что такое маркированный список в HTML
Урок 6.2. Акцентирование (выделение) текста в HTML
Урок 6.3. Практика: жирно-курсиво-перечеркнутый
Урок 7.2. Цитаты в HTML
Урок 8.2. Верхний и нижний индекс в HTML
Урок 9.2. Универсальные атрибуты в HTML
Другие курсы
Курс 1. Знакомство с HTML
Курс 3. Ссылки
Курс 4. Изображения
Курс 5. Таблицы
Курс 6. Формы
Курс 7. HTML5
Курс 8. Остальное
Курс 9. Знакомство с CSS
Курс 10. Селекторы в CSS
Курс 11. Структура и каскад
Курс 12. Единицы измерения
Курс 13. Шрифт
Курс 14. Свойства текста
Курс 15. Форматирование
Курс 16. Отступы, рамки, поля
Курс 17. Цвета и фон
Курс 18. Позиционирование
Курс 19. Верстка таблиц
Курс 20. Списки
Курс 21. Анимация
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно