Элемент 'ul' никогда не может быть дочерним по отношению к элементу 'p'

Почему у нас никогда не может быть элемента ul в качестве дочернего элемента элемента p?

Я сделал веб-страницу со следующим кодом

<p> some text
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
</p>

Здесь элемент ul является дочерним элементом элемента p. Однако во всех основных браузерах (Chrome, Firefox и Internet Explorer - все последние версии) он интерпретируется следующим образом.

<p> some text</p>
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
<p></p>

Я проверил это, щелкнув правой кнопкой мыши на элементе ul (в Chrome) и выбрав опцию проверки элемента. Я видел это в Chrome, но два других браузера также вели себя одинаково (CSS-селектор 'p ul' не работал хорошо).

Почему это так? Существует ли общий случай, когда такие изменения происходят в браузере?

Ответ 1

Пожалуйста, ознакомьтесь со спецификацией HTML, в которой четко указано, что размещение списков в элементе абзаца запрещено, а также приводятся некоторые примеры того, что можно сделать:

Элементы списка (в частности, ol и ul элементы) не могут быть дочерними элементами из p элементов. Поэтому, когда предложение содержит маркированный список, можно задаться вопросом, как его следует маркировать.

Например, это фантастическое предложение имеет пули, относящиеся к

мастера,
быстрее, чем свет, и
телепатия,
и далее обсуждается ниже.

Решение состоит в том, чтобы понять, что абзац в терминах HTML не является логической концепции, но структурной. В фантастическом примере выше, на самом деле существует пять абзацев, определяемых этой спецификацией: один перед списком, по одному для каждой пули и по одному после списка.

Таким образом, разметка для приведенного выше примера может быть:
  <p>For instance, this fantastic sentence has bullets relating to</p> 
   <ul>
       <li>wizards,  
       <li>faster-than-light travel, and  
       <li>telepathy, 
   </ul>
   <p>and is further discussed below.</p>
Авторы, желающие удобно стилизовать такие "логические" параграфы, состоящие из нескольких "структурные" абзацы могут использовать элемент div вместо p элемент.

Таким образом, например, приведенный выше пример может стать следующим:
   <div>For instance, this fantastic sentence has bullets relating to
   <ul>
     <li>wizards,  
     <li>faster-than-light travel, and  
     <li>telepathy,
   </ul> 
   and is further discussed below.</div> 
В этом примере пять структурных параграфов, но теперь автор может создать стиль div вместо того, чтобы рассматривать каждую часть примера отдельно.

Ответ 2

В HTML всегда было правило, что элемент p может содержать только разметку текста и текстового уровня, а не список, например. Поэтому браузеры предполагают закрывающий тег </p>, когда элемент p открыт, и встречается начальный тег для элемента уровня блока, например <ul>. В вашем примере тег </p> после </ul> является бездомным и обычно игнорируется.

Ответ 3

<p> может иметь только встроенные элементы в виде дочерних элементов и без элементов блока (см., например, MDN). <ul> С другой стороны, это элемент уровня блока (MDN)!

Причина, по которой браузер интерпретирует ваш код, поскольку вы видели ложь в спецификации разбора HTML5. В спецификации указан пример, очень похожий на ваш собственный: ссылка whatwg.

Другим интересным связанным вопросом может быть следующее: HTML: включить или исключить дополнительные закрывающие теги?