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

Часто, для создания корректного списка дел, используют подпункты, которые разбивают задачу на подзадачи.

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

• Сходить в магазин
  Купить молоко

  Купить хлеб

• Пройти уроки на Code Basics

Выходом из такой ситуации становятся вложенные списки. Можно вложить один список в элемент другого. Вкладывать можно не только одинаковые списки, но и разные, например внутрь маркированного возможно вложить нумерованный список, и наоборот. На примере списка выше сделаем разметку, в которой вложенный список будет нумерованным:

<ul>
    <li>Сходить в магазин
        <ol>
            <li>Купить молоко</li>
            <li>Купить хлеб</li>
        </ol>
    </li>
    <li>Пройти уроки на Code Basics </li>
</ul>

Теперь такой список легко читать и понимать. Он не содержит лишних отступов, при этом вложенный список отделяется отступом слева.

Задание

Создайте вложенную разметку для списка:

1. Профессия JavaScript
  • Frontend
  • Backend
2. Профессия PHP