HTML тег <ol>

В целом синтаксис тега <ol> такой же как и у обычного html списка <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>

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

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






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

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

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

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

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

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

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

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

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

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




Читайте также:

• Как разместить элементы списка горизонтально

• Как убрать маркеры в маркированном списке

• Как убрать подчеркивание ссылки

• Как сделать кнопку на сайте ссылкой

• Какой выбрать шрифт для сайта

• Коды символов для HTML

• Добавление социальных кнопок на сайт

• html цвета для сайта

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

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.