Должен ли ol / ul быть внутри <p> или снаружи?

292

Какой стандарт соответствует между этими двумя?

<p>Text text text ...
    <ol>
        <li>First element</li>
    </ol>
</p>
<p>
    Other text text ...
</p>

ИЛИ

<p>
    Text text text ...
</p>
<ol>
    <li>First element</li>
</ol>
<p>
    Other text text ...
</p>

html

— динамический
источник

40

@oded: контекст имеет значение?

— динамическое

422

Короткий ответ заключается в том, что olэлементы недопустимы внутри pэлементов.

Чтобы понять почему, давайте перейдем к спецификации ! Если вы освоитесь со спецификацией HTML, она ответит на многие ваши вопросы и вопросы. Вы хотите знать, olможет ли жить внутри p. Так…

4.5.1 pЭлемент :

Категории: Поток контента , Пальпируемый контент .
Модель контента: Фразирование контента .

4.5.5 olЭлемент :

Категории: Поток контента .
Модель содержимого : ноль или более элементов li и поддержки сценариев .

В первой части говорится, что pэлементы могут содержать только фразы (которые являются «встроенными» элементами, такими как spanи strong).

Вторая часть говорит, что ols - это содержимое потока (элементы «блока», такие как pи div). Таким образом, они не могут быть использованы внутри p.

ols и другие flow contentмогут быть использованы в некоторых других элементах, таких как div:

4.5.13 divЭлемент :

Категории: Поток контента , Пальпируемый контент .
Модель контента: Поток контента .

— s4y
источник

9

@ ссылка: Да, w3.org немного технический. Тем не менее, нет сомнений в том, что правильно, когда и если вы их поняли.

— nyson

5

Я думаю, @Sid объясняет спецификацию и некоторые ее термины, безусловно, полезны. Если бы он пошел немного дальше, это был бы отличный ответ. Он также мог явно ответить на вопрос :). Я добавил редактирование для этого.

— Studgeek

1

ужасно читать? Не думай так, иди 4.4.1 The p element, автор даже говорить о fantastic sentencesили что-то в этом роде

— Хайме Hablutzel

1

@dynamic Я всегда обращаюсь к HTML-справке MDN для облегчения чтения документации.

— Бонк

1

@AaronLS Вроде! Когда браузер возвращает вам HTML (например, в инструментах разработчика или из .innerHTML), он заново генерируется из дерева элементов. Таким образом, Chrome не столько корректирует HTML, сколько создает правильное дерево из исходного HTML, а затем генерирует новый HTML из этого дерева.

— s4y

40

Второй. Первый недействителен.

Абзац не может содержать список.
Список не может содержать абзац, если этот абзац не содержится целиком в одном элементе списка.

Браузер будет обрабатывать это так:

<p>tetxtextextete 
<!-- Start of paragraph -->
<ol>
<!-- Start of ordered list. Paragraphs cannot contain lists. Insert </p> -->
<li>first element</li></ol>
<!-- A list item element. End of list -->
</p>
<!-- End of paragraph, but not inside paragraph, discard this tag to recover from the error -->
<p>other textetxet</p>
<!-- Another paragraph -->

— Quentin
источник

13

GO здесь http://validator.w3.org/ загрузите ваш HTML-файл, и он скажет вам, что является действительным, а что нет.

— скрытый
источник

7

на самом деле вы должны поместить только встроенные элементы внутри p, так что в вашем случае olлучше снаружи

— Крис Иванов
источник

2

Это тот же ответ, что и ответ @David Dorward, который вам не понравился.

— ceejayoz

5

<p>tetxetextex</p>
<ol><li>first element</li></ol>
<p>other textetxeettx</p>

Потому что и то <p>и другое <ol>отображается как блок.

— Дэвид
источник