Правильный способ сделать 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>
427
html html-lists nested-lists

7 ответов

2 является правильным.

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

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

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

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

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

2

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

списки вложенности-UL

52

Вариант 2 верен: вложенный <ul> является ребенком <li> Она принадлежит.

если вы проверка, Вариант 1 появляется как ошибка в html 5 -- credit:user3272456

правильно: <ul> как дитя <li>

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

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

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

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

  1. Глава Первая
      Один
    2. Два Три
  • Глава Вторая
  • Глава Третья

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

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

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

    23

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

    6

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

    6

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

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

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

    например, gmail, inbox и evernote позволяют создавать такие списки:

    arbitrarily nested list

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

    -3