Правильный способ сделать 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>
7 ответов:
2 является правильным.
вложенный список должен быть внутри
<li>элемент из списка, в который он вложен.ссылка на W3C Wiki в списках (взято из комментария ниже):HTML списки Вики.
ссылка на HTML5 W3C
ulspec:HTML5ul. Обратите внимание, чтоulэлемент может содержать ноль или большеliэлементы. То же самое относится и к HTML5ol. Список описаний (HTML5dl) похож, но позволяет и то и другоеdtиddэлементы.Дополнительные Примечания:
dl= список определений.ol= упорядоченный список (номера).ul= неупорядоченный список (пули).
Вариант 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 для Списки Вложенности
элемент списка может содержать еще один полный список - это называется "вложенность" списка. Это полезно для таких вещей, как оглавление, например, в начале этой статьи:
- Глава Первая
Два ТриОдин
Глава Вторая Глава Третья ключ к вложению списков должен помнить, что вложенный список должен относиться к одному конкретному элементу списка. Чтобы отразить это в коде, вложенный список содержится внутри этого элемента списка. Код для приведенного выше списка выглядит примерно так:
<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>содержащего элемента списка. Вложенные списки часто служат основой для меню навигации по сайту, так как они являются хорошим способом определения иерархической структуры сайта.теоретически вы можете вложить столько списков, сколько вам нравится, хотя на практике это может привести к путанице, чтобы вложить списки слишком глубоко. Для очень больших списков вам может быть лучше разделить содержимое на несколько списков с заголовками вместо этого, или даже разбивая его на отдельные страницы.
Я предпочитаю вариант два, потому что он четко показывает элемент списка как обладатель этого вложенного списка. Я бы всегда склонялся к семантически звучащему HTML.
Если вы проверяете, Вариант 1 появляется как ошибка в html 5, поэтому вариант 2 является правильным.
вы думали об использовании тега " 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, Вы можете.
Comments