Правильный способ создания вложенного списка 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>

Стандарт W3C для Списки вложений

Элемент списка может содержать другой полный список - это называется "вложением" списка. Это полезно для таких вещей, как оглавление, например, в начале этой статьи:

Глава первая
Раздел 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>

<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 вы можете.