Все ли внутри <ul>должно быть обернуто в <li>?

Question

Мне нужно руководство по вложенным спискам в HTML.

У меня есть макет, который я хотел бы построить, как показано ниже. Ужасно ли вкладывать элемент, не обернутый <li>? Я вполне уверен, что это противоречит стандартам, но не знаю, какое это имеет вредное воздействие.

<ul>
  <li>
    <h1>header 1</h1>
    <li>
       <ul>
         <li>nested</li>
         <li>list</li>
       </ul>
    </li>
  </li>
  <li>
    <h1>header 2</h1>
    <li>
       <ul>
         <li>nested</li>
         <li>list</li>
       </ul>
    </li>
  </li>
</ul>

Answer 1

LI - единственный элемент, допустимый в качестве дочерних элементов UL. Вот фрагмент описания элемента UL :

<!ELEMENT UL - - (LI)+                 -- unordered list -->

И

Оба типа списков состоят из последовательностей элементов списка, определенных элементом LI (конечный тег которого может быть опущен).

Answer 2

Как уже упоминалось выше,

- это единственный элемент, который может быть внутри

Answer 3

Все ближайшие дети <ul> или <ol> должны быть <li> с. Аналогично, непосредственный родитель всех <li> должен быть <ul> или <ol>.

Итак, <li> в вашем примере, которые идут после <h3>, не должны быть там. Но в остальном ваш пример выглядит послушным.

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

Answer 4

Да, это неправильно. Это недействительный HTML.

Answer 5

Если вам нужен элемент списка с вложенным заголовком, вы можете использовать

<dl>
 <dt>header</dt>
 <dd>Item 1</dd>
 <dd>Item 2</dd>
</dl>

Это хорошо, поскольку он сохраняет код чистым и семантическим.

Просто мысль.

Answer 6

да, они обязательны, так как каждый список представляет собой список элементов (это относится непосредственно к семантическому HTML)

если вам нужны заголовки между списками, вам нужно создать отдельные списки с заголовками между ними, как показано ниже:

<div class="menu">
    <h1>menu 1</h1>
    <ul>
        <li>menu 1.1</li>
        <li>menu 1.2</li>
    </ul>
    <h1>menu 2</h1>
    <ul>
        <li>menu 2.1</li>
        <li>menu 2.2</li>
    </ul>
</div>

что приведет к этому:

меню 1

• пункт меню 1.1
• пункт меню 1.2

меню 2

• пункт меню 2.1
• пункт меню 2.2

затем вещь о вложенных списках, вложенный список является частью элемента списка, которому он принадлежит. (слишком часто видел, как это делали неправильно).

<ul>
    <li>menuitem 1
        <ul>
            <li>menuitem 1.1</li>
            <li>menuitem 1.2</li>
        </ul>
    </li>
    <li>menuitem 2
        <ul>
            <li>menuitem 2.1</li>
            <li>menuitem 2.2</li>
        </ul>
    </li>
</ul>

• пункт меню 1
  • пункт меню 1.1
  • пункт меню 1.2
• пункт меню 2
  • пункт меню 2.1
  • пункт меню 2.2

лучше всего сравнить его с оглавлением и соответствующими главами книги.