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

Создание нумерованного списка, в языке html, осуществляется тегами <ol> и </ol>, и и тегами пункта списка <li>.

Пример

<html>
 <head>
  <title>Нумерованный список</title>
 </head>
 <body>
  <ol>
   <li>Язык HTML</li>
   <li>Язык CSS</li>
   <li>Язык PHP</li>
  </ol>
 </body>
</html>

Результат

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


Так же как и у маркированного списка в нумерованном можно делать вложенные списки. Для этого нужно внутри пункта списка (тег <li>) разместить еще один список.

Пример

<html>
 <head>
  <title>Нумерованный список</title>
 </head>
 <body>
  <ol>
   <li>Язык HTML
    <ol>
     <li>Описание</li>
     <li>Справочник</li>
     <li>Уроки</li>
    </ol>
   </li>
   <li>Язык CSS</li>
   <li>Язык PHP</li>
  </ol>
 </body>
</html>

Результат

Вложенность нумерованного списка

Вложенность списков может быть бесконечной.

Изменение вида нумерации

Для изменения вида нумерации у тега <ol> существует атрибут type с параметрами:

  • A
  • a
  • I
  • i
  • 1 (используется по умолчанию)
<html>
 <head>
  <title>Нумерованный список</title>
 </head>
 <body>
  <ol type="I">
   <li>Язык HTML 
    <ol type="a">
     <li>Описание</li>
     <li>Справочник</li>
     <li>Уроки</li>
    </ol>
   </li>
   <li>Язык CSS</li>
   <li>Язык PHP</li>
  </ol>
 </body>
</html>

Результат

Вид нумерованного списка

В нумерованном списке можно указать с какого номера начать нумерацию списка. Для этого атрибут start с указанием начала отсчета

Пример

<html>
 <head>
  <title>Нумерованный список</title>
 </head>
 <body>
  <ol start="5">
   <li>Язык HTML</li>
   <li>Язык CSS</li>
   <li>Язык PHP</li>
  </ol>
 </body>
</html>

Результат

Номер нумерации

<< Маркированный список | Перечень уроков | Вид текста >>