Почему нельзя вложить блок в блочный элемент

Почему нельзя внести div внутрь p? Если внести h1 или же a, то всё работает.
p { width: 300px; height: 150px; border: 1px black solid; display: block; } p div { width: 50%; height: 100%; background: red; }

Ответ

в спецификации указано следующее:
A p element's end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table, or ul, element, or if there is no more content in the parent element and the parent element is not an a element.

закрывающий тег элемента p может быть опущен если p элемент расположен сразу за address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table, or ul элементами, или если больше нет содержимого в родительском элементе или родительский элемент не a/
console.log(document.querySelectorAll('p').length); p { width: 300px; height: 150px; border: 1px black solid; display: block; } p div { width: 50%; height: 100%; background: red; }