Восприятие и запоминаемость текста значительно улучшаются, если организовывать части информации
упорядоченно. Для этого используются различные приёмы: выделение цветом, таблицы, оформление текста,
а также различные списки: нумерованные и маркированные.
Давайте в этом уроке создадим с помощью HTML простой нумерованный/упорядоченный список, например,
алгоритм приготовления блинов. Для того, чтобы испечь блины, нужно выполнить ряд действий, причём важно
выполнять их именно в определённой последовательности, иначе ничего не получится: сначала нужно проверить наличие продуктов,
потом смешать их в определённой пропорции, затем разогреть сковороду и потом печь блины.
Итак, чтобы написать рецепт на сайте, нам нужно весь список - упорядоченную последовательность
действий - заключить в контейнер <ol>список</ol>,
а каждый пункт алгоритма в контейнер <li>пункт списка</li>.
Напишем код:
Результат:
Проверить наличие продуктов:
2 яйца,
1 литр молока,
2 ст. ложки сахара, 0,5 ч.л. соли, 0,5 ч.л. соды,
растительное и сливочное масло,
мука.
Смешать все компоненты в одной посуде,
Разогреть сковороду,
Выпекать блины и смазывать их сливочным маслом.
Обратите внимание на вложенность списков друг в друга: очень важно сделать это правильно!
Вложенный список должен находиться ВНУТРИ контейнера <li>пункт списка</li>
первого списка. Если вы его расположите после закрывающего тега </li> первого
списка, то хотя результат будет такой же, как в правильном варианте, но код не будет валидным и оформить его с
помощью CSS вы не сможете правильно.
Вложенный в п.1 данного примера список является маркированным, о нём вы сможете узнать в одном из последующих
уроков. Также в другом уроке будет рассказано, что нужно сделать, чтобы вместо цифр были использованы другие виды маркеров.
Если вы хотите, чтобы ваш список начинался не с единицы, а с какого-нибудь другого числа, то в качестве атрибута
открывающего элемента <li> нужно использовать value="значение"
с нужным значением, например:
