Правильный способ создания вложенного списка HTML?
В документах W3 есть пример вложенного списка с префиксом DEPRECATED EXAMPLE:
, но они никогда не исправляли его с помощью не устаревшего примера, а также не объясняли точно, что не так с примером.
Итак, какой из этих способов является правильным способом написать список HTML?
Вариант 1: вложенный <ul>
является потомком родительского <ul>
<ul>
<li>List item one</li>
<li>List item two with subitems:</li>
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
<li>Final list item</li>
</ul>
Вариант 2: вложенный <ul>
является дочерним элементом <li>
, который принадлежит
<ul>
<li>List item one</li>
<li>List item two with subitems:
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
Ответы
Ответ 1
Вариант 2 верен.
Вложенный список должен быть внутри элемента <li>
списка, в котором он вложен.
Ссылка на W3C Wiki по спискам (взято из комментария ниже): HTML-списки Wiki.
Ссылка на HTML5 W3C ul
spec: HTML5 ul
. Обратите внимание, что элемент ul
может содержать ровно ноль или более элементов li
. То же самое относится к HTML5 ol
.
Список описаний (HTML5 dl
) аналогичен, но допускает как элементы dt
, так и dd
.
Дополнительные примечания:
-
dl
= список определений.
-
ol
= упорядоченный список (числа).
-
ul
= неупорядоченный список (пули).
Ответ 2
Вариант 2
<ul>
<li>Choice A</li>
<li>Choice B
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
Списки вложений - UL
Ответ 3
Вариант 2 верен: вложенный <ul>
является дочерним элементом <li>
, к которому он принадлежит.
Если вы validate, опция 1 появляется как ошибка в html 5 - кредит: user3272456
Правильно: <ul>
как дочерний элемент <li>
Правильный способ создания вложенного списка HTML с вложенным <ul>
в качестве дочернего элемента <li>
, к которому он принадлежит. Вложенный список должен находиться внутри элемента <li>
списка, в котором он вложен.
<ul>
<li>Parent/Item
<ul>
<li>Child/Subitem
</li>
</ul>
</li>
</ul>
Элемент списка может содержать другой полный список - это называется "вложением" списка. Это полезно для таких вещей, как оглавление, например, в начале этой статьи:
- Глава первая
- Раздел 1
- Раздел второй
- Раздел третий
- Глава вторая
- Глава третья
Ключ к спискам вложенности должен помнить, что вложенный список должен относиться к одному конкретному элементу списка. Чтобы отразить это в коде, вложенный список содержится внутри этого элемента списка. Код для приведенного выше списка выглядит примерно так:
<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>
</code>
Обратите внимание, как вложенный список запускается после <li>
и текста содержащего элемента списка ( "Глава первая" ); затем заканчивается перед </li>
содержащего элемент списка. Вложенные списки часто составляют основу для меню навигации по сайту, так как они являются хорошим способом определения иерархической структуры веб-сайта.
Теоретически вы можете вложить столько списков, сколько захотите, хотя на практике это может запутать слишком глубоко в списках. Для очень больших списков вы можете лучше разделить содержимое на несколько списков с заголовками или даже разделить его на отдельные страницы.
Ответ 4
Я предпочитаю вариант два, потому что он ясно показывает элемент списка как обладателя этого вложенного списка. Я всегда склонялся к семантически здоровому HTML.
Ответ 5
Если вы подтвердите правильность, опция 1 появляется как ошибка в html 5, поэтому опция 2 верна.
Ответ 6
Вы думали об использовании TAG "dt" вместо "ul" для вложенных списков? Он наследует стиль и структуру, позволяя вам иметь заголовок для каждого раздела, и он автоматически табулирует содержимое, которое находится внутри.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
VS
<ul>
<li>Choice A</li>
<li>Choice B
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
Ответ 7
Что не упомянуто здесь, так это то, что опция 1 позволяет вам произвольно глубоко вложить списки.
Это не имеет значения, если вы управляете содержимым /css, но если вы создаете богатый текстовый редактор, это пригодится.
Например, gmail, inbox и evernote позволяют создавать списки, подобные этому:
![произвольно вложенный список]()
С опцией 2 вы не можете этого сделать (у вас будет дополнительный элемент списка), с параметром 1 вы можете.