ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML5. Уроки для начинающих

En Ua

HTML Упорядоченные списки


HTML тег <ol> определяет упорядоченный список. Упорядоченный список может быть числовым или алфавитным.


Упорядоченный HTML список

Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>.

Элементы списка по умолчанию будут обозначены цифрами:

Пример

<ol>
  <li>Кофе</li>
  <li>Чай</li>
 <li>Молоко</li>
</ol>
Попробуйте сами »

Упорядоченный HTML список - Атрибут type

Атрибут type тега <ol> определяет тип маркера элемента списка:

Тип Описание
type="1" Элементы списка будут маркированные цифрами (по умолчанию)
type="A" Элементы списка будут нумерованные большими (заглавными) буквами
type="a" Элементы списка будут нумерованные маленькими (строчными) буквами
type="I" Элементы списка будут нумерованные большими римскими цифрами
type="i" Элементы списка будут нумерованные малыми римскими цифрами

Числа:

<ol type="1">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>
Попробуйте сами »

Большие буквы (в верхнем регистре):

<ol type="A">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>
Попробуйте сами »

Строчные буквы (в нижнем регистре):

<ol type="a">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>
Попробуйте сами »

Большие римские цифры (в верхнем регистре):

<ol type="I">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>
Попробуйте сами »

Малые римские цифры (в нижнем регистре):

<ol type="i">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>
Попробуйте сами »

Подсчет контрольного списка

По умолчанию упорядоченный список начнет отсчет с 1. Если вы хотите начать отсчет с указанного числа, вы можете использовать атрибут start:

Пример

<ol start="50">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>
Попробуйте сами »

Вложенные HTML списки

Списки могут быть вложенными (список внутри списка):

Пример

<ol>
  <li>Кофе</li>
  <li>Чай
    <ol>
      <li>Черный чай</li>
      <li>Зеленый чай</li>
    </ol>
  </li>
  <li>Молоко</li>
</ol>
Попробуйте сами »

Примечание: Элемент списка (<li>) может содержать новый список и другие элементы HTML, такие как изображения и ссылки и т.д.


Резюме

  • Используйте HTML элемент <ol> для определения упорядоченного списка
  • Используйте HTML атрибут type для определения типа нумерации
  • Используйте HTML елемент <li> для определения элемента списка
  • Списки могут быть вложенными
  • Элементы списка могут содержать другие элементы HTML

HTML Теги списка

Тег Описание
<ul> Определяет неупорядоченный список
<ol> Определяет упорядоченный список
<li> Определяет элемент списка
<dl> Определяет список описаний
<dt> Определяет термин в списке описаний
<dd> Описывает термин в списке описаний

Для ознакомления с полным списком всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.