Правильный способ сделать вложенный список HTML?

Question

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

Answer 1

Опция 2 верна.

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

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

Ссылка на HTML5 W3C ul spec: HTML5 ul.Обратите внимание, что элемент ul может содержать ровно ноль или более элементов li.То же относится и к HTML5 ol.Список описания ( HTML5 dl) аналогичен, но допускает элементы dt и dd.

Дополнительные примечания:

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

Answer 2

Вариант 2

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 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>

Answer 7

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

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

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

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