Документи 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 Списки 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>

VS

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

Що тут не згадується, це те, що варіант 1 дозволяє довільно глибоко вносити списки.

Це не має значення, якщо ви керуєте вмістом / css, але якщо ви робите багатий редактор тексту, це стане в нагоді.

Наприклад, gmail, Inbox та evernote дозволяють створювати такі списки:

З опцією 2 ви не можете цього (у вас буде додатковий пункт списку), а з варіантом 1 - ви можете.