Элемент 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, но другие 2 браузера также вели себя одинаково (css selecter 'p ul' не работал).

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

 TylerH20 окт. 2015 г., 21:20
Возможный дубликатShould ol/ul be inside <p> or outside?

Ответы на вопрос(3)

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

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

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

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

Решение Вопроса

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

List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list, therefore, one might wonder how it should be marked up.

For instance, this fantastic sentence has bullets relating to

wizards, faster-than-light travel, and
telepathy,

and is further discussed below.

The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five paragraphs as defined by this speciication: one before the list, one for each bullet, and one after the list.

The markup for the above example could therefore be:

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

Authors wishing to conveniently style such "logical" paragraphs consisting of multiple "structural" paragraphs can use the div element instead of the p element.

Thus for instance the above example could become the following:

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

This example still has five structural paragraphs, but now the author can style just the div instead of having to consider each part of the example separately.

 09 нояб. 2017 г., 16:20
Согласно whatwg.org, это действительно правильный ответ. К сожалению, MDN отправляет запутанное сообщение со своимиul/ol описание о том, чтоPermitted parents: Any element that accepts flow content. (developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) Список элементов содержимого потока содержитp также. Очень запутанно.
 31 авг. 2017 г., 14:02
@hakermania Что бы ни было внутри тега textarea, оно не будет проверяться браузером как HTML - оно рассматривается как обычная строка.
 30 авг. 2017 г., 22:37
Значение (html-код) редактора указывается в html-файле (представьте себе,<textarea> <HTML CODE HERE> </textarea>), а затем код js редактора вызываетсяtextarea элемент. Это означает, что браузер имеет первое слово в HTML-код в текстовой области иthen редактор. Так что, если хром преобразовал<p><ol>...</ol></p> в<p></p><ol>...</ol> тогда редактор увидит последнее значение и не будет знать о первом. Я думаю, что что-то еще происходит под капотом, но я не могу это найти.
 29 авг. 2017 г., 19:52
@hakermania Редактор манипулирует DOM на лету (через JS). Chrome читает HTML и строит DOM из него - это другой сценарий.
 27 авг. 2017 г., 17:44
Я использую trumbowyg и внутри редактора Chrome позволяетol Внутриp: i.imgur.com/1uyqtNO.png , За пределами HTML редактора у него та же проблема, что и у OP. Редактор дает мне HTML-код, и я должен представить его вне его, поэтому он ломается (потому что он имеетol Внутриp). Как редактор допускает это сам по себе?

Ваш ответ на вопрос