Важной концепцией HTML является вложенность тегов. Внутрь HTML-тега можно помещать не только текст, как было ранее, но и другие теги. Это позволяет создавать сложную вёрстку, в которой области отделены друг от друга: меню от шапки сайта, рекламный блок от основного контента и так далее.

Некоторые элементы в HTML требуют вложенности одних тегов в другие. Например, списки:

<ul class="m-0">
    <li>The first item in the list</li>
    <li>The second item in the list</li>
  </ul>

Для определения списка используется тег <ul>, который указывает, что это маркированный список. Внутри располагаются теги <li>, определяющие элементы нашего списка.

Такие вложенности похожи на деревья, где есть вершина дерева (тег <ul>) и листья (теги <li>)

|──ul
| |──li
| |──li

Интересно: тег, внутри которого вложены другие теги, ещё называют обёрткой или враппером/wrapper

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

Но бывают и исключения. В HTML нельзя вкладывать параграфы в параграфы. Пример ниже будет неправильным:

<p>Параграф
  <p>А вот ещё параграф внутри параграфа</p>.
  Параграф недоволен таким соседством
</p>

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

Создайте маркированный список из трёх элементов. Этот тип списка вы изучили в уроке