Чому тег <p> не може містити тег <div> всередині нього?

169

Наскільки я знаю, це правильно:

<div>
  <p>some words</p>
</div>

Але це неправильно:

<p>
  <div>some words</div>
</p>

Перший може передати валідатор W3C (XHTML 1.0), а другий не може. Я знаю, що ніхто не напише код, як другий. Я просто хочу знати, чому.

А як щодо взаємозв'язку інших тегів?

html xhtml

— Генрі Х Мяо
джерело

9

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

— Bojangles

22

JamWaffles: Це pелемент рівня блоку не має нічого спільного. divтакож є одним і дозволяє інші блоки.

— Joey

можливий дублікат: stackoverflow.com/questions/4967976/… (без маркування): будь-яка гідна відповідь на це відповість, як прочитати специфікацію HTML, і, таким чином, також відповісти на це.

— Ciro Santilli 郝海东冠状病六四事件法轮功

Оголошення стилю div як inline також не працює.

— Трайнко

198

Авторитетним місцем пошуку дозволених зв'язків щодо стримування є специфікація HTML. Дивіться, наприклад, http://www.w3.org/TR/html4/sgml/dtd.html . Він визначає, які елементи є елементами блоку, а які - вбудованими. Для цих списків знайдіть розділ, що позначений "Моделі вмісту HTML".

Для елемента P він визначає наступне, що вказує на те, що P-елементи можуть містити лише вбудовані елементи.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

Це узгоджується з http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 , де сказано, що елемент P "не може містити елементів рівня блоку (включаючи сам P)".

— Колін Кемпбелл
джерело

74

У мене є звичка уникати специфікацій, найавторитетніших документів, які ми маємо для подібних речей, тому що їх не цікаво читати. +1 - насправді для їх читання, розуміння та використання їх для відповіді на запитання.

— Stoutie

3

Чи все-таки це дійсно для HTML 5? Специфікація, специфічно пов'язана з посиланнями HTML 4, та HTML 5 не має визначення типу документа .

— Ajedi32

2

@ Ajedi32 Так, ось . HTML5 перейменовано безліч термінологій, але "Дозволений вміст: вміст фраз" означає те саме, що і %inlineбіт вище. Дивіться також відповідь Оріола.

— Містер Лістер

@Stoutie Правильно з вами, саме тому Stack Overflow існує.

— Гіпертекст капітана

69

Коротше кажучи, неможливо розмістити <div>елемент всередині a <p>в DOM, оскільки <div>тег відкриття автоматично закриє <p>елемент.

— defau1t
джерело

2

Ах, це пояснює, чому всередині ap є величезний простір перед дівом, оскільки р насправді закінчується безпосередньо перед дівом.

— AaronLS

2

Ви можете розмістити divелемент всередині p в DOM , наприклад myP.appendChild(myDiv). Але HTML-аналізатор цього не зробить.

— Оріол

1

Не роби цього. Ви не знаєте, як це реагуватиме в майбутніх браузерах. Технологія постійно змінюється. Може бути динамічний аналізатор html, який зробить це недійсним одного дня. Мета веб-розробника - створити речі, які мають можливість бути бажаними та дещо сумісними. Якщо ви можете обійти те, що дозволяє браузер, можна сміливо сказати, що ви не можете гарантувати, що він буде працювати назавжди. Просто використовуйте хлопці з прольотом ... Якщо вам потрібен div, перестаньте використовувати тег p.

39

У відповідності з HTML5, то модель вмісту з divелементів вмісту потоку

Більшість елементів, які використовуються в документі та додатках, класифікуються як вміст потоку.

Це включає pелементи, які можна використовувати лише там, де очікується вміст потоку .

Тому divелементи можуть містити pелементи.

Тим НЕ менше, модель вмісту з pелементів вмісту Фразування

Зміст фразування - це текст документа, а також елементи, що позначають цей текст на внутрішньо абзацному рівні. Виконання фразового змісту формує абзаци .

Це не включає divелементи, які можна використовувати лише там, де очікується вміст потоку .

Тому pелементи не можуть містити divелементів.

Оскільки кінцевий тег з pелементів може бути опущений , коли pелемент безпосередньо слід divелемент (серед інших), які прямують

<p>
  <div>some words</div>
</p>

розбирається як

<p></p>
<div>some words</div>
</p>

і остання </p>- помилка.

— Оріол
джерело

Але якщо в CSS, якщо я встановив, що div є вбудованим, чому це не дотримується?

— Санджай

Оскільки значення CSS застосовуються після dom Parsing ... навіть якщо ми зробимо div as inline in CSSйого не корисним, як нова розбірна структура - <p>Text</p> <div>some words</div> <p></p> чи моє розуміння правильне?

— Санджай

@Sanjay Так, схоже, ти маєш рацію. І більше того, під час моїх спостережень, якщо ви помістите <span> всередину <p> і потім встановите на дисплеї "span" "блокування", воно буде відображатися як типовий елемент блоку без такого ефекту.

— Андрій Наумович

-1

Після X HTML конвенції були змінені, і тепер це суміш конвенцій XML та HTML, тому другий підхід невірний і валідатор W3C приймає правильні речі, які відповідають стандартам та конвенціям.

— geekdev786
джерело

XHTML мало змінився. Елементу p ніколи не було дозволено містити елемент div.

— Квентін

-7

Оскільки divтег має перевагу вище, ніж pтег. pТег є тег абзацу , тоді як divтег представляє документ тег.

Ви можете написати багато абзаців у тег документа, але ви не можете написати документ в абзаці. Те саме, що файл DOC.

— Гаурав Агравал
джерело

2

Власне, це поділ. Інакше було б <doc>: D

— Кайл

6

Precedence - це не поняття, яке застосовується до html-елементів, а div представляє поділ, як говорить @KyleSevenoaks :)

— SimplGy

Що таке файл DOC? Microsoft Word файл?

— Пітер Мортенсен