Вложение тегов html?

Question

[schmuckk]

Почему если я вкладываю элемент списка или элемент картинка в блок параграфа, в дереве документа эти элементы все равно отражаются как отдельные элементы, а не как дочерние? Так и должно быть и мне просто с этим смириться? Или такие элементы нельзя вкладывать в блок параграфа?

Comments

[Teleweb developer]

Киньте код лучше, но по идее так не должно быть

[Ankhena]

Teleweb developer, у тега p закрывающий тег необязателен и он закроется автоматически, как только встретит после открывающего другой p, div, section, table или любой другой блочный элемент.
Поэтому ul или li вывалятся из параграфа.
А что там с картинкой действительно неизвестно.

[Lynn «Кофеман»]

Но, кстати, картинки в параграфе разрешены, так что тут вы либо ошибаетесь либо чего-то перепутали.

[schmuckk]

Да действительно ошибся, просто далеко был от компьютера и описывал проблему по памяти. Сейчас посмотрел - картинка правда обозначена как дочерний элемент. Спасибо за помощь

Answer 1

[Lynn «Кофеман»]

Не все элементы можно вкладывать в какие-то другие элементы.

В частности в тег <p> можно вкладывать только строчные элементы.

Формальное описание что можно вкладывать в тег можно посмотреть в спецификации или MDN.

В частности для <p> там написано «Разрешённое содержимое: фразовый контент».

В случае неправильного вложения браузер пытается починить DOM-дерево как может (на самом деле по определённым правилам которые тоже есть в спецификации) и чаще всего он просто закрывает теги до тех пор пока не получит не доберётся до родителя в котором данный контент разрешён.

UPD: Вопрос на самом деле довольно неочевидный для новичков, так что есть полезный сайт https://caninclude.glitch.me/caninclude?child=ul&p...

Answer 2

[Stung]

Элементы должны находиться внутри блока параграфа , тогда обращаясь через сам блок к элементам у вас получится изменять элементы внутри самого блока.

Answer 3

[Stalker_RED]

Открываешь спецификацию html (или идешь на mdn, удобно через гугл "mdn paragraph").
Смотришь там какой контент можно размещать в <P>

Permitted content Phrasing content.

Смотришь что такое "Phrasing content" и выясняешь, что да, списки нельзя вставлять в абзац, а вот img, picture и даже canvas вполне можно.

Итого: в вопросе ошибка, "картинки" вполне себе вставляются, но да - в html довольно много семантических ограничений, нельзя вставлять что угодно во что угодно.