Подготовительный курс HTML и CSS: Вложенные списки

При составлении списка дел может возникнуть необходимость разбить пункты на несколько дополнительных подпунктов. Например, в списке дел пункт «Сходить в магазин» может содержать в себе список покупок.

Для создания такой структуры используются вложенные списки. Это позволяет вкладывать в качестве элемента список не просто текст, а новый список, создавая сложную структуру:

Вот как это выглядит в HTML:

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

Важно отметить, что вложенный список является частью пункта списка и находится внутри тега <li>:

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

Такая вложенность позволяет сохранить семантику и указать, что вложенный список относится именно к пункту «Сходить в магазин», а не к какому-либо ещё.

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

Задание

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