HTML списки в списках для разных сценариев

Question

Привет всем, я сейчас решаю, как сделать макет витрины магазина.

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

Вот два различных сценария:

Для маркеров с отступом я обычно делал бы что-то вроде этого:

<ul>
    <li>Bullet 1</li>
    <li>Bullet 2</li>
    <ul>
        <li>Indented Bullet 1</li>
        <li>Indented Bullet 1</li>
    </ul>
</ul>

Однако для списка продуктов, упомянутого выше, это было бы больше похоже на это:

<ul>
    <li>
        <ul>
            <li>Product Name</li>
            <li>Product Image</li>
            <li>Product Author</li>
            <li>Product Price</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Product Name</li>
            <li>Product Image</li>
            <li>Product Author</li>
            <li>Product Price</li>
        </ul>
    </li>
</ul>

Итак ... мой вопрос, как правильно использовать списки в списках?Верны ли оба пути или только один из них?Если да, то что и почему?

Answer 1

Работает только второй способ. Только li элементы могут быть дочерними элементами ul (и ol) элементов.

Посмотрите на DTD ^{[документы]} :

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

li элементов с другой стороны могут содержать все block ^{[документы]} и inline ^{[документы]} элементы:

<!ELEMENT LI - O (%flow;)*             -- list item -->

( определение %flow; ^{[документы]} )

Answer 2

Оба кодовых набора работают.Я только что скомпилировал их вместе с альтернативным синтаксисом.Выход был идентичным.Разница в синтаксисе заключается в том, где находится / li, но это не имеет значения.Я пишу это как в первом примере.Я был удивлен, что второй пример сработал, но это сработало.Я изучил программирование на языке Паскаль 30 лет назад, что может повлиять на то, как я рассматриваю шаблон вложенного оператора.

Оглядываясь вокруг, чтобы увидеть, что делают другие, я только что узнал что-то новое - список описаний.

<dl>
   <dt>Coffee</dt>
   <dd>- black hot drink</dd>
   <dt>Milk</dt>
   <dd>- white cold drink</dd>
</dl> 

http://www.w3schools.com/html/html_lists.asp

Answer 3

Я согласен, что синтаксически второй фрагмент кода правильный. Так как вы также интересуетесь семантикой (что здорово!), Я думаю, что следующее не может быть улучшением:

<ul>
    <li>Product Name
        <ul>
            <li>Product Image</li>
            <li>Product Author</li>
            <li>Product Price</li>
        </ul>
    </li>
    <li>Product Name
        <ul>
            <li>Product Image</li>
            <li>Product Author</li>
            <li>Product Price</li>
        </ul>
    </li>
</ul>

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

Answer 4

Первый неверен - вы не можете сделать. UL может иметь li только как ребенок. Вы должны использовать этот шаблон:

<ul>
  <li>---almost everything---</li>
</ul>

Так что второй в порядке :)

Answer 5

Я всегда использую <ul> внутри <li>, например: <ul><li>something<ul><li>inside</li><ul></li></ul>

Answer 6

Только второй способ верен.В элементе ul допускаются только элементы li.Это можно увидеть в стандарте, например, в нормативе DTD .