HTML: Вложенность тегов
Важной концепцией HTML является вложенность тегов. Внутрь HTML-тега можно помещать не только текст, как было ранее, но и другие теги. Это позволяет создавать сложную вёрстку, в которой области отделены друг от друга: меню от шапки сайта, рекламный блок от основного контента и так далее.
Некоторые элементы в HTML требуют вложенности одних тегов в другие. Например, списки:
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
</ul>- Первый элемент списка
- Второй элемент списка
Для определения списка используется тег <ul>, который указывает, что это маркированный список. Внутри располагаются теги <li>, определяющие элементы нашего списка.
Такие вложенности похожи на деревья, где есть вершина дерева (тег <ul>) и листья (теги <li>)
|──ul
| |──li
| |──li
Интересно: тег, внутри которого вложены другие теги, ещё называют обёрткой или враппером/wrapper
Дерево может разрастаться и дальше. В уроках про списки будет показано, что внутри элементов списка могут располагаться другие списки и этот процесс почти бесконечен.
Но бывают и исключения. В HTML нельзя вкладывать параграфы в параграфы. Пример ниже будет неправильным:
<p>Параграф
<p>А вот ещё параграф внутри параграфа</p>.
Параграф недоволен таким соседством
</p>В этом уроке мы познакомились с концепцией вложенности тегов в HTML и рассмотрели её на примере создания маркированных списков. В процессе прохождения курса вы изучите множество ситуаций, когда вложенность является лучшим решением, а так же узнаете о тегах, которые нельзя вкладывать друг в друга
Задание
Создайте маркированный список из трёх элементов. Этот тип списка вы изучили в уроке
Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект
Если вы зашли в тупик, то самое время поговорить с нашим асситентом Тота во вкладке "ИИ-помощник":
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи. В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в обратной связи нашего сообщества
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, querySelectorAll, expect }) => {
query(document, 'ul', HTMLUListElement);
const elements = querySelectorAll(document, 'ul > li', HTMLLIElement);
expect(elements).to.have.length(3);
});Решение учителя откроется через:
20:00
