HTML тег <ol>

В целом синтаксис тега <ol> такой же как и у обычного списка <ul>. Разница лишь в том, что этот тег строго сделан для нумерации списков. Название тега пришло от английского сокращения "Ordered List" - нумерованный список.

Синтаксис тега <ol>

<ol [type=value] [start=value2] [reversed]>
	<li>Элемент #1</li>
	<li>Элемент #2</li>
	<li>Элемент #3</li>
	<li>...</li>
</ul>

Где атрибут type="value" может принимать следующие значения

• A — задает маркеры в виде прописных латинских букв (A, B, C..);
• a — задает маркеры в виде строчных латинских букв (a, b, c..);
• I — задает маркеры в виде больших римских цифр (I, II, III, IV..);
• i — задает маркеры в виде маленьких римских цифр (i, ii, iii, iv..);
• 1 (по умолчанию) — задает маркеры в виде арабских цифр (1, 2, 3..);

Атрибут start="value" задает начальное значение (стартовое значение) отчета.

Атрибут reversed задает обратный счет (в случае необходимости).

Тег <ol> требует обязательного использования закрывающего тега </ol>.

Для формирования элементов списка используется парный тег <li>. Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.

Внутри списка есть возможность изменять счет на свой. Для этого есть специальный атрибут value="" у тега <li>, которому присваивается какое-то числовое значение. Например

<ol>
	<li>Элемент #1</li>
	<li value="10">Элемент #2</li>
	<li>Элемент #3</li>
</ul>

Примеры с нумерованными списками в html (<ol>)

Пример 1. Нумерованные список html в виде латинских букв

Пример с заглавными буквами

<ol type="A">
  <li>Элемент #1</li>
  <li>Элемент #2</li>
  <li>Элемент #3</li>
</ol>

Вот как это выглядит на странице:

1. Элемент #1
2. Элемент #2
3. Элемент #3

Пример со строчными буквами

<ol type="a">
  <li>Элемент #10</li>
  <li>Элемент #11</li>
  <li>Элемент #12</li>
</ol>

Вот как это выглядит на странице:

1. Элемент #1
2. Элемент #2
3. Элемент #3

Пример 2. Нумерованные список html в виде римских букв

Пример с заглавными буквами

<ol type="I">
  <li>Элемент #1</li>
  <li>Элемент #2</li>
  <li>Элемент #3</li>
</ol>

Вот как это выглядит на странице:

1. Элемент #1
2. Элемент #2
3. Элемент #3

Пример со строчными буквами

<ol type="i">
  <li>Элемент #1</li>
  <li>Элемент #2</li>
  <li>Элемент #3</li>
</ol>

Вот как это выглядит на странице:

1. Элемент #1
2. Элемент #2
3. Элемент #3

Пример 3. Нумерованные список html разная позиция старта

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

<ol start="50">
  <li>Элемент #1</li>
  <li>Элемент #2</li>
  <li>Элемент #3</li>
</ol>

Вот как это выглядит на странице:

50. Элемент #1
51. Элемент #2
52. Элемент #3

Пример 4. Изменение счета в нумерованных списках html

Ниже представлен пример с возможностью менять значения счетчика с помощью атрибута value при выводе новых элементов в тегах <li>.

<ol start="10">
  <li>Элемент #1</li>
  <li>Элемент #2</li>
  <li value="100">Элемент #3</li>
  <li>Элемент #4</li>
</ol>

Вот как это выглядит на странице:

10. Элемент #1
11. Элемент #2
100. Элемент #3
101. Элемент #4

Пример 5. Реверсивный нумерованный список в html

Ниже приведен пример реверсивного нумерованного списка (счет в обратном порядке).

<ol start="10" reversed>
  <li>Элемент #1</li>
  <li>Элемент #2</li>
  <li>Элемент #3</li>
  <li>Элемент #4</li>
</ol>

Вот как это выглядит на странице:

10. Элемент #1
11. Элемент #2
12. Элемент #3
13. Элемент #4

Читайте также:
• Как разместить элементы списка горизонтально
• Как убрать маркеры в маркированном списке
• Как убрать подчеркивание ссылки
• Как сделать кнопку на сайте ссылкой
• Какой выбрать шрифт для сайта
• Коды символов для HTML
• Добавление социальных кнопок на сайт
• html цвета для сайта

← Перейти в каталог html уроков и советов