HTML: Вложенные списки
При составлении списка дел может возникнуть необходимость разбить пункты на несколько дополнительных подпунктов. Например, в списке дел пункт «Сходить в магазин» может содержать в себе список покупок.
Для создания такой структуры используются вложенные списки. Это позволяет вкладывать в качестве элемента списка не просто текст, а новый список, создавая сложную структуру:

Вот как это выглядит в HTML:
<ul>
<li>Go to the store
<ul>
<li>Buy milk</li>
<li>Buy bread</li>
</ul>
</li>
<li>Take a class on Code Basics </li>
</ul>Важно отметить, что вложенный список является частью пункта списка и находится внутри тега <li>:
<li>Сходить в магазин
<ul>
<li>Купить молоко</li>
<li>Купить хлеб</li>
</ul>
</li>Такая вложенность позволяет сохранить семантику и указать, что вложенный список относится именно к пункту «Сходить в магазин», а не к какому-либо ещё.
Вы можете вкладывать списки разных видов друг в друга: маркированные в нумерованные и наоборот. Главное — следить за открытием и закрытием тегов. В случае ошибки браузер попытается самостоятельно исправить ошибку, но это может быть некорректно
Задание
Создайте разметку для списка:
- The JavaScript profession
- Frontend
- Backend
- The PHP Profession
Полезное
На каждом уровне вложенности маркированный список меняет свой маркер. Это сделано для визуального отличия вложенных списков
HTML: Вложенные списки
При составлении списка дел может возникнуть необходимость разбить пункты на несколько дополнительных подпунктов. Например, в списке дел пункт «Сходить в магазин» может содержать в себе список покупок.
Для создания такой структуры используются вложенные списки. Это позволяет вкладывать в качестве элемента списка не просто текст, а новый список, создавая сложную структуру:

Вот как это выглядит в HTML:
<ul>
<li>Go to the store
<ul>
<li>Buy milk</li>
<li>Buy bread</li>
</ul>
</li>
<li>Take a class on Code Basics </li>
</ul>Важно отметить, что вложенный список является частью пункта списка и находится внутри тега <li>:
<li>Сходить в магазин
<ul>
<li>Купить молоко</li>
<li>Купить хлеб</li>
</ul>
</li>Такая вложенность позволяет сохранить семантику и указать, что вложенный список относится именно к пункту «Сходить в магазин», а не к какому-либо ещё.
Вы можете вкладывать списки разных видов друг в друга: маркированные в нумерованные и наоборот. Главное — следить за открытием и закрытием тегов. В случае ошибки браузер попытается самостоятельно исправить ошибку, но это может быть некорректно
Задание
Создайте разметку для списка:
- The JavaScript profession
- Frontend
- Backend
- The PHP Profession
Полезное
На каждом уровне вложенности маркированный список меняет свой маркер. Это сделано для визуального отличия вложенных списков
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, querySelectorAll, expect }) => {
const ol = query(document, 'ol', HTMLOListElement);
const olLis = querySelectorAll(document, 'ol > li', HTMLLIElement);
expect(olLis).to.have.length(2);
const ul = query(document, 'ol > li > ul', HTMLUListElement);
const ulLis = querySelectorAll(ul, 'li', HTMLLIElement);
expect(ulLis).to.have.length(2);
});Решение учителя откроется через:
20:00
