Как сделать простой нумерованный список

Восприятие и запоминаемость текста значительно улучшаются, если организовывать части информации упорядоченно. Для этого используются различные приёмы: выделение цветом, таблицы, оформление текста, а также различные списки: нумерованные и маркированные.

Давайте в этом уроке создадим с помощью HTML простой нумерованный/упорядоченный список, например, алгоритм приготовления блинов. Для того, чтобы испечь блины, нужно выполнить ряд действий, причём важно выполнять их именно в определённой последовательности, иначе ничего не получится: сначала нужно проверить наличие продуктов, потом смешать их в определённой пропорции, затем разогреть сковороду и потом печь блины.

Итак, чтобы написать рецепт на сайте, нам нужно весь список - упорядоченную последовательность действий - заключить в контейнер <ol>список</ol>, а каждый пункт алгоритма в контейнер <li>пункт списка</li>.

Напишем код:

<ol>
 <li>Проверить наличие продуктов:
 <ul>
 <li>2 яйца,</li>
 <li>1 литр молока,</li>
 <li>2 ст. ложки сахара, 0,5 ч.л. соли, 0,5 ч.л. соды,</li>
 <li>растительное и сливочное масло,</li>
 <li>мука.</li>
 </ul>
 </li>
<li>Смешать все компоненты в одной посуде,</li>
<li>Разогреть сковороду,</li>
<li>Выпекать блины и смазывать их сливочным маслом.</li>
</ol>

Результат:

1. Проверить наличие продуктов:
   • 2 яйца,
   • 1 литр молока,
   • 2 ст. ложки сахара, 0,5 ч.л. соли, 0,5 ч.л. соды,
   • растительное и сливочное масло,
   • мука.
2. Смешать все компоненты в одной посуде,
3. Разогреть сковороду,
4. Выпекать блины и смазывать их сливочным маслом.

Обратите внимание на вложенность списков друг в друга: очень важно сделать это правильно! Вложенный список должен находиться ВНУТРИ контейнера <li>пункт списка</li> первого списка.
Если вы его расположите после закрывающего тега </li> первого списка, то хотя результат будет такой же, как в правильном варианте, но код не будет валидным и оформить его с помощью CSS вы не сможете правильно.

Вложенный в п.1 данного примера список является маркированным, о нём вы сможете узнать в одном из последующих уроков. Также в другом уроке будет рассказано, что нужно сделать, чтобы вместо цифр были использованы другие виды маркеров.

Если вы хотите, чтобы ваш список начинался не с единицы, а с какого-нибудь другого числа, то в качестве атрибута открывающего элемента <li> нужно использовать value="значение" с нужным значением, например:

Республики России:
<ol>
 <li>Адыгея,</li>
 <li>Карелия,</li>
 <li>Татарстан,</li>
 <li value="10">Башкортостан</li>
 <li>Коми.</li>
</ol>