What are the allowed elements within the <P> tag?

Question

I’ve been through some trouble and I could still contemplate in that reply that the tag <p> does not accept any element as a child.

It seems to me that there are exceptions to some tags, IE, they can be added within a <p>, as an example <br>, <a>.

But I always wonder when I want to use that tag <p> about what I can and can’t put inside her.

So I wanted to know:

• What is the sense of this tag constraint <p> not accept certain elements?
• What are the allowed elements within a tag <p>?

Observing: The answer to the linked question cites that the tag <p> does not accept certain elements, but does not explain why or why some are accepted.

Answer 1

The element <p> is categorized as flow element and palpable element, can therefore be used anywhere an element of flow is expected. It allows as child elements any element that is a phrase element.

The definitions of each, in addition to the cited links, can be found in W3C, 3.2 Elements, 3.2.5 Content models, 3.2.5.1 Kinds of Contents:

• 3.2.5.1.1 Metadata content
• 3.2.5.1.2 Flow content
• 3.2.5.1.3 Sectioning content
• 3.2.5.1.4 Heading content
• 3.2.5.1.5 Phrasing content
• 3.2.5.1.6 Embedded content
• 3.2.5.1.7 Interactive content

The relationship between the groups is:

^{Iterative image source and version: https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#Kinds-of-content}

Simply put, phrase elements are the elements that define the content of the application or its formatting - note the word formatting here, because formatting is not styling (CSS applies styles).

At the moment, the phrase elements are (links to the documentation you find here):

a, abbr, area (if descended from a <map>), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, link (if permitted on body), map, mark, Mathml Math, meta (if you have the attribute itemprop), meter, noscript, Object, output, picture, Progress, q, ruby, s, Samp, script, select, slot, small, span, Strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, Custom Autonomous Elements and text.

If other elements are added as children of <p>, it is possible that the element will be closed earlier than expected when the client processes the HTML structure, as Rafael commented in your answer.

The specification explicitly cites even the example of defining lists within a paragraph, where it is not possible to use the elements <ol> and <ul> inside <p>.

p > ul {
  color: red;
}

<p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</p>

The HTML will be interpreted:

<p></p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<p></p>

So much so that CSS, which defines the red font for an element ul within a p didn’t work. In this case, the ideal is, as interpreted, to generate two distinct paragraphs, one before and the other after the list or to define the content within another element, as well as the div.

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

Which will be interpreted exactly the way it is.

Answer 2

The tag <p> defines a paragraph.

Allowed within the tag <p> any plain text content and markups, such as:
<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr>

If you enter inside the tag <p> some element like: <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul>

The paragraph will be automatically closed. Let’s see in the example:

<p> teste <div> div </div> </p>

Analyzing the source code, the tag <p> will be automatically closed.

<p> teste </p>
 <div> div </div>
<p></p>

Sources: The item Paragraph, Content with text allowed, W3C.

Answer 3

It’s because of web semantics.

"p" comes from paragraph, so it is expected that the content of this tag has run text and perhaps at most text formatting tags, although this can be done more properly with CSS.