Вариант 2 правильный: вложенный <ul>
является дочерним по отношению к <li>
которому он принадлежит.
Если вы проверите , вариант 1 появляется как ошибка в HTML 5 - кредит: user3272456
Правильно: <ul>
как дитя<li>
Правильный способ создания вложенного списка в HTML заключается в том, что вложенный список является <ul>
дочерним по отношению <li>
к тому, к которому он принадлежит. Вложенный список должен быть внутри <li>
элемента списка, в который он вложен.
<ul>
<li>Parent/Item
<ul>
<li>Child/Subitem
</li>
</ul>
</li>
</ul>
Элемент списка может содержать еще один полный список - это называется «вложением» списка. Это полезно для таких вещей, как оглавления, например, в начале этой статьи:
- Глава Один
- Первый раздел
- Раздел второй
- Раздел третий
- Глава вторая
- В третьей главе
Ключ к вложенным спискам - помнить, что вложенный список должен относиться к одному конкретному элементу списка. Чтобы отразить это в коде, вложенный список содержится внутри этого элемента списка. Код для списка выше выглядит примерно так:
<ol>
<li>Chapter One
<ol>
<li>Section One</li>
<li>Section Two </li>
<li>Section Three </li>
</ol>
</li>
<li>Chapter Two</li>
<li>Chapter Three </li>
</ol>
Обратите внимание, как вложенный список начинается после <li>
и текста содержащего элемента списка («Глава первая»); затем заканчивается перед </li>
содержащим элементом списка. Вложенные списки часто образуют основу для навигации по веб-сайту, поскольку они являются хорошим способом определения иерархической структуры веб-сайта.
Теоретически, вы можете вкладывать столько списков, сколько захотите, хотя на практике это может привести к путанице в слишком глубоком вложении списков. Для очень больших списков может быть лучше разделить содержимое на несколько списков с заголовками или даже разделить его на отдельные страницы.