• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
‘тоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → HTML тег <ol>

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 уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2025 - Zarabotat-Na-Sajte.ru