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

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

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

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

Похожие уроки и записи блога

Первое знакомство с PythonЗнакомство с Python
Погружение в PythonЗнакомство с Python
Работа с файлами в Python Знакомство с Python
Управляющие последовательности в JavaScriptТипы и переменные
Что такое маркированный список в HTMLРазметка текста
Методы и особенности множеств в PythonЗнакомство с Python
Структуры данных в PythonЗнакомство с Python
Добавляем градиент к фону элементаЦвета и фон
Свойство background для работы с фономЦвета и фон
<
×
>
Раздел «Разметка текста»
25. УРОК: Заголовки и подзаголовки в HTML
26. ПРАКТИКА: Заголовки и подзаголовки в HTML (практика 1)
27. ТЕСТ: Тест по заголовкам и подзаголовкам в HTML
28. УРОК: Что такое абзац в HTML (тег P)?
29. ТЕСТ: Тест по абзацам в HTML
30. УРОК: Перенос строки и разделительная линия в HTML
31. ПРАКТИКА: Практика: Перенос строки в HTML
32. ТЕСТ: Тест по переносу строки и разделительной линии в HTML
УРОК 33. Нумерованный список в HTML
Вы здесь
34. ТЕСТ: Тест по нумерованным спискам в HTML
35. УРОК: Что такое маркированный список в HTML
36. ТЕСТ: Тест по маркированным спискам в HTML
37. УРОК: Акцентирование (выделение) текста в HTML
38. ПРАКТИКА: Жирно-курсиво-перечеркнутый
39. ТЕСТ: Тест по акцентированию текста в HTML
40. УРОК: Цитаты в HTML
41. ТЕСТ: Тест по цитатам в HTML
42. УРОК: Верхний и нижний индекс в HTML
43. ТЕСТ: Тест по индексам в HTML
44. УРОК: Универсальные атрибуты в HTML
45. ТЕСТ: Тест по универсальным атрибутам в 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. Элементы сайта
Раздел 24. Знакомство с Flexbox
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

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

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

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

Закрыть окно