Почему тег <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также один и позволяет другие блоки.

— Джои

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

— Сиро Сантилли 郝海东冠状病六四事件法轮功

Объявление стиля div как встроенного также не работает.

— Трийнко

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 Прямо с тобой, вот почему переполнение стека существует.

— Капитан Гипертекст

69

Короче говоря, невозможно поместить <div>элемент внутри a <p>в DOM, потому что открывающий <div>тег автоматически закроет <p>элемент.

— defau1t
источник

2

Ах, это объясняет, почему перед div находится огромное пространство внутри p, потому что p фактически заканчивается непосредственно перед div.

— AaronLS

2

Вы можете поместить divэлемент внутри a p в DOM , например myP.appendChild(myDiv). Но анализатор HTML не сделает этого.

— Oriol

1

Не делай этого. Вы понятия не имеете, как это отреагирует в будущих браузерах. Технология постоянно меняется. Там может быть динамический анализатор HTML, который сделает этот недействительным однажды. Цель веб-разработчика - создавать вещи, которые могут быть как желаемыми, так и несколько совместимыми. Если вы можете обойти то, что позволяет браузер, можно с уверенностью сказать, что вы не сможете гарантировать, что он будет работать вечно. Просто используйте span span. Если вам нужен 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 ... даже если мы используем div as inline in CSSего, это бесполезно, так как новая разобранная структура <p>Text</p> <div>some words</div> <p></p> является ли мое понимание правильным?

— Санджай

@ Санджай Да, похоже, ты прав. И более того, во время моих наблюдений, если вы поместите <span> внутрь <p>, а затем установите отображение span в «block», он будет отображаться как типичный блочный элемент без такого эффекта.

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

-1

После X HTML условные обозначения были изменены, и теперь это смесь условных обозначений XML и HTML, поэтому второй подход неверен, и валидатор W3C принимает правильные вещи в соответствии со стандартами и соглашениями.

— geekdev786
источник

XHTML не сильно изменился. Элементу p никогда не разрешалось содержать элемент div.

— Квентин

-7

Потому что divтег имеет более высокий приоритет, чем pтег. pТег представляет собой тег абзаца , тогда как divтег представляет документ тег.

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

— Гаурав Агравал
источник

2

На самом деле, это разделение. Иначе это было бы <doc>: D

— Кайл

6

Приоритет - это не концепция, которая применяется к элементам html, а div представляет собой деление, как говорит @KyleSevenoaks :)

— SimplGy

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

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