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


500

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

Відповіді:


509

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

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

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

Посилання на ulспецифікацію HTML5 W3C : HTML5ul . Зауважте, що ulелемент може містити рівно нуль або більше liелементів. Те саме стосується HTML5ol . Список описів ( HTML5dl ) схожий, але дозволяє обидва dtі ddелементи.

Більше приміток:

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

41
Ось офіційна інформація W3C, w3.org/wiki/HTML_lists#Nesting_lists , варіант 2 - правильний шлях
Хосе Елера

Я наткнувся на випадок, який, здається, неможливо створити з дійсним HTML5: вкладеним елементом списку без елемента батьківського списку (уявіть, натискання TAB для відступу на початку елемента списку в текстовому процесорі). Дивіться моє запитання тут: stackoverflow.com/questions/61094384/…
Марк


33

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

Теоретично ви можете вкладати стільки списків, скільки вам подобається, хоча на практиці це може занадто глибоко переплутати списки гнізд. У дуже великих списках вам може бути краще розділити вміст на декілька списків із заголовками, або навіть розділити його на окремі сторінки.


7

Якщо ви підтвердили, варіант 1 з'являється як помилка в html 5, тому варіант 2 є правильним.


6

Я віддаю перевагу другому варіанту, оскільки він чітко показує елемент списку як власника цього вкладеного списку. Я завжди схиляюся до семантично здорового HTML.


2

Чи задумалися ви використовувати 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>

2
Ваші приклади не однакові. Другий приклад з "Вибір A", "Вибір B", "Підряд 1", "Під 2" не працює для dt/ ddтегів, які є парними. Також притаманний стиль (і таблиця, я підозрюю) лише походить із таблиці стилів браузера за замовчуванням, так що це не дуже багато. Я би ставився до цього як до смислового елемента; якщо у вас є список визначень або, можливо, у вас просто пари даних заголовка / опису, dlможе бути хорошим вибором.
Рікет

Чи можете ви відредагувати свій коментар, щоб надати еквівалентні приклади - наприклад, обидва містять вибір A і вибір B з двома підзаголовками Sub 1 і Sub 2 для Choice B?
Златін Златев

-5

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

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

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

довільно вкладений список

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


2
Варіант 1 створює недійсний HTML. П'ять років тому, коли було задано це питання, можливо, це не так, але це зараз.
j08691

Так, це безумовно недійсний HTML. Однак він все ще використовується і все ще корисний для сумісності. Альтернативою є зіткнення із полями поля та кулями, які можуть бути не тим, що ви хочете, створюючи електронний лист.
ibash

1
Я не впевнений, що розумію, чому я хотів би щось нестандартне. Чи можете ви відредагувати коментар, щоб надати більш значущого використання?
Златін Златев

Це важливо, що це дозволяє редагувати вільну форму для групи куль, надаючи їй більш інтуїтивне відчуття. Якщо у мене є список куль, я можу захотіти відступити їх і вкласти їх під новою кулею. Без можливості довільного відступу користувачеві спочатку потрібно буде вставити кулю заголовка, а потім відступити кожну кулю після. З можливістю довільного відступу користувач може відступити групу куль, а потім вставити нову кулю заголовка.
ibash
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.