Чи має бути 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Елемент :

Категорії: Зміст потоку .
Зміст моделі : Нуль або більше літій і сценаріїв підтримують елементів.

У першій частині йдеться про те, що pелементи можуть містити лише вміст фраз (які є "вбудованими" елементами, як spanі strong).

Друга частина говорить, що ols - це вміст потоку ("блокові" елементи, такі як pі div). Тому їх не можна використовувати всередині p.

ols та інші flow contentможна використовувати в деяких інших елементах, таких як div:

4.5.13 divЕлемент :

Категорії: Поточний контент , Програмований вміст .
Модель вмісту: потоковий вміст .

— s4y
джерело

9

@link: Так, w3.org - це технічний розрядник. І все-таки немає сумнівів у тому, що правильно, коли і якщо ви їх зрозуміли.

— Нісон

5

Я думаю, що @Sid пояснює специфікацію та деякі її умови, безумовно, корисно. Якби він пішов трохи далі, це була б чудова відповідь. Він також міг би чітко відповісти на питання :). Я додав редагування для цього.

— studgeek

1

жахливо читати? не думайте так, перейдіть 4.4.1 The p element, автор навіть поговорить про fantastic sentencesщось подібне

— Jaime 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 -->

— Квентін
джерело

13

Перейдіть сюди 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>є елементом, представленими як блок.

— Девід
джерело