Документы 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>

Вариант 2 правильный.

Вложенный список должен находиться внутри <li>элемента списка, в который он вложен.

Ссылка на W3C Wiki в списках (взято из комментария ниже): HTML Lists Wiki .

Ссылка на ulспецификацию HTML5 W3C : HTML5ul . Обратите внимание, что ulэлемент может содержать ровно ноль или более liэлементов. То же самое относится и к HTML5ol . Список описания ( HTML5dl ) похож, но допускает как элементы, так dtи ddэлементы.

Больше примечаний:

• dl = список определений.
• ol = упорядоченный список (номера).
• ul = неупорядоченный список (маркеры).

Вариант 2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

Вложенные списки - UL

Вариант 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>

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

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

1. Глава Один
   1. Первый раздел
   2. Раздел второй
   3. Раздел третий
2. Глава вторая
3. В третьей главе

Ключ к вложенным спискам - помнить, что вложенный список должен относиться к одному конкретному элементу списка. Чтобы отразить это в коде, вложенный список содержится внутри этого элемента списка. Код для списка выше выглядит примерно так:

<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>содержащим элементом списка. Вложенные списки часто образуют основу для навигации по веб-сайту, поскольку они являются хорошим способом определения иерархической структуры веб-сайта.

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

Если вы подтвердите, вариант 1 появится как ошибка в HTML 5, поэтому вариант 2 является правильным.

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

Задумывались ли вы об использовании 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>

Что здесь не упоминается, так это то, что вариант 1 позволяет вам сколь угодно глубоко вкладывать списки.

Это не должно иметь значения, если вы управляете контентом / CSS, но если вы создаете текстовый редактор, это пригодится.

Например, gmail, входящие и evernote все позволяют создавать списки, подобные этому:

С опцией 2 вы не можете этого сделать (у вас будет дополнительный элемент списка), с опцией 1 вы можете.