Посмотреть все уроки курса
Выбрать другой урок из курса
Обсуждение
Теория урока

Нумерованный список в 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
Урок 3.2. Практика: Перенос строки в 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. Анимация
Раздел 22. Практика с htmlbook.ru
Раздел 23. Элементы сайта
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.