Правильный способ написания списков

Question

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

Метод 1

<ol>
    <li>List item 1</li>
    <li>List item 2
        <ol>
            <li>List item 3</li>
        </ol>
    </li>
    <li>List item 4</li>
</ol>

Это кажется мне семантически правильным, поскольку подсписок является подсписком этого элемента списка, однако он не очень чистый (Содержимое элемента списка <list right next to it>).

Метод 2

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
        <ol>
            <li>List item 3</li>
        </ol>
    <li>List item 4</li>
</ol>

Более чистый, но не совсем понятный, список - это подсписок пункта 2 (хотя он понятен человеческим умозаключением).

Кстати, это просто проблема семантической разметки, оба метода представляют одно и то же содержимое на странице.

Так ТАК, что ты думаешь? Источники, где это возможно, предпочтительнее, но и для личного использования. Я заметил, что иерархические оглавления MediaWiki используют метод 1, который побуждает меня верить, что это правильное использование.

Answer 1

Метод 2 не является допустимым HTML. OL не допускается как прямой дочерний элемент другого элемента OL. Только LI допускается в OL.

Кроме того, принадлежность подсписка к пункту 2 очевидна только для читателя из-за отступа. Сделайте отступ даже с LI s, и кажется, что внутренний список сам является третьим элементом. Я мог бы ожидать такой рендеринг с двумя числами:

1. List item 1
2. List item 2
3. 1. List item 3
4. List item 4

Способ 1 - это путь.

Answer 2

HTML 4.01 разрешает только элементы LI в OL. Однако закрывающий тег LI необязателен. Это означает, что это эквивалентно вашему методу 1:

<ol>
   <li>List item 1
   <li>List item 2
      <ol>
        <li>List item 3
      </ol>
   <li>List item 4
</ol>

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

XHTML 1.1 имеет те же ограничения, но заставляет использовать закрывающий LI, чтобы сделать его явным.

Answer 3

Метод 1 правильный.