Упорядоченные (нумерованные) HTML списки, теги: ol, li
Меню
Справочник

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

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


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

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

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

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
  1. HTML
  2. CSS
  3. JavaScript

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

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

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

Нумерованный список

<ol type="1">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
  1. HTML
  2. CSS
  3. JavaScript

Заглавные буквы

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
  1. HTML
  2. CSS
  3. JavaScript

Строчные буквы

<ol type="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
  1. HTML
  2. CSS
  3. JavaScript

Прописные римские цифры

<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
  1. HTML
  2. CSS
  3. JavaScript

Строчные римские цифры

<ol type="i">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
  1. HTML
  2. CSS
  3. JavaScript

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

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

<ol start="40">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
  1. HTML
  2. CSS
  3. JavaScript

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

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

<ol>
 <li>HTML</li>
 <li>CSS
   <ol>
    <li>HTML5</li>
    <li>CSS3</li>
   </ul>
  </li>
  <li>JavaScript</li>
</ol>
  1. HTML
  2. CSS
    1. HTML5
    2. CSS3
  3. JavaScript
Примечание: элемент списка (<li>) может содержать новый список и другие элементы HTML, например изображения, ссылки и т. д.

Краткое содержание главы

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

Справочник по тегам HTML

Справочник по тегам содержит дополнительную информацию об этих тегах и их атрибутах.

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

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.


☛ Списки описаний HTML

Ненумерованные списки HTML ☚

Поделиться ссылкой