Putting ≪Div≫ Inside ≪P≫ Is Adding an Extra ≪P≫

Putting div inside p is adding an extra p

From the fine specification:

p – paragraph

[...]

Permitted contents

Phrasing content

And what is this Phrasing content?

Phrasing content:

Consists of phrasing elements intermixed with normal character data.

Normal character data is just that: unmarked up text. Phrasing elements are:

a or em or strong ... [a bunch of other elements none of which are div]

So, <p><div></div></p> is not valid HTML. Per the tag omission rules listed in the spec, the <p> tag is automatically closed by the <div> tag, which leaves the </p> tag without a matching <p>. The browser is well within its rights to attempt to correct it by adding an open <p> tag after the <div>:

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

You can't put a <div> inside a <p> and get consistent results from various browsers. Provide the browsers with valid HTML and they will behave better.

You can put <div> inside a <div> though so if you replace your <p> with <div class="p"> and style it appropriately, you can get what you want.

Your reference at about.com disagrees with the specification at w3.org. Your reference is misleading you.

Why can't the p tag contain a div tag inside it?

An authoritative place to look for allowed containment relations is the HTML spec. See, for example, http://www.w3.org/TR/html4/sgml/dtd.html. It specifies which elements are block elements and which are inline. For those lists, search for the section marked "HTML content models".

For the P element, it specifies the following, which indicates that P elements are only allowed to contain inline elements.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

This is consistent with http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, which says that the P element "cannot contain block-level elements (including P itself)."

Why can't I nest div inside p?

In the beginning, there was the Standard Generalized Markup Language (SGML). SGML defined some aspects of the syntax like punctuation and tags, but each user application defined parts of the syntax such as tag names, attributes, nesting.

Decades later, SGML was simplified to create the XML standard. The way XML is used today for many application-specific data formats is similar to how SGML was used in the past. SGML and XML are essentially meta-languages - they are a syntax template for many application-specific languages.

HTML was initially designed as an application of SGML, hence understanding the history of HTML requires knowledge of some rules of SGML. SGML was intended to be editable in a text editor, so it included many features that reduced code to make human writing and reading more convenient. Just a few examples:

• Some elements like <br> are self-terminating, thus never have a corresponding </br> end tag.
• Some elements like <tbody> are implicitly inserted, e.g. <table><tr><td></td></tr></table> becomes <table><tbody><tr><td></td></tr></tbody></table>.
• Some elements like <p> cannot nest in each other, so starting one will terminate the old one: <p><p> becomes <p></p><p></p>.

These element/tag-level syntax features are enabled/disabled through the SGML declaration and document type definition (DTD). HTML up to version 4.01 certainly had a DTD, and this was considered as the source of truth on how a parser should interpret markup code. The DTD can also tell us things like (not an exhaustive list):

• What attributes each element is allowed to have.
• Whether an attribute is optional, required, or has a default value.
• Distinctions between PCDATA and CDATA, which affects how characters are escaped.
• Exactly what elements are allowed to nest within what.

The DTD is where we can find our answer, at least historically speaking for HTML 4.01 Strict:

<!ELEMENT P - O (%inline;)*            -- paragraph -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE |
                   SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special
   "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

The code above says that a <p> element can only contain %inline content, which is further defined as any of #PCDATA, %fontstyle, %phrase, %special, %formctrl. The definitions of the latter 4 are a set of 31 elements like <tt>, <strong>, <img>, <textarea>, etc. Notice that these so-called inline elements do not include block elements like <div>, <ul>, and so on - so in other words, <p> cannot contain <div>.

I don't know how the details of how the SGML parser behaves in every situation, but it looks like when one element is not allowed to contain another, the first element is terminated and then the second element begins. This explains why <p><div></div></p> becomes <p></p><div></div><p></p>.

Fast forward to HTML5, which is not based on SGML anymore. Although HTML5 is a bespoke, one-of-a-kind syntax standard, it is intended to be backward-compatible with HTML 4. HTML5 replicates the semantics of correct HTML 4 code, and additionally mandates a uniform way to parse erroneous markup code ("tag soup") so that all browsers behave the same. So the interpretation of <p><div></div></p> is still unchanged from the SGML days.

For <p> in particular, the rule is explained very clearly here here:

A p element's end tag can be omitted if the p element is immediately followed by an address, article, aside, blockquote, details, div, ...

Also, <p> is only allowed to contain "phrasing content" (note the lack of <div>):

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.
a, abbr, area (if it is a descendant of a map element), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, [...], autonomous custom elements, text

How can I put DIV in P?

form the w3 site:

The P element represents a paragraph. It cannot contain
block-level elements (including P itself).

Nesting block level elements inside the p tag... right or wrong?

Syntactically, a div inside a p is invalid in all standards of HTML. Moreover, when using a conforming HTML parser, it is impossible to place a <div> element inside a <p> in the DOM because the opening <div> tag will automatically close the <p> element.

Semantically, the correct choice depends on the content that you are marking up. You will need to show at least a sample full paragraph and possibly the content surrounding it to be sure of providing sufficient information for the correct semantic mark-up to be determined.

However, given that both <div> and <span> are semantics free, and that CSS in no way can ever change that, if you are certain that the contents of the <p> tag truly form a paragraph, and that <span style="display: block"> gets you the presentational effect that you are seeking, then that is valid HTML and would be a wholly appropriate solution.

How can i keep several p tags on the same line/

Wrap all p in a container and add display: flex. It will place all p tag left to right. But you need to add some space between them with gap: .5rem;

Add space as per your requirements.

TIP: p tags are not for this purpose, they are meant to be come in new line, You should use span instead. They are by default inline

.p-container{
  display: flex;
  gap: .5rem;
}

<div class="diva">
  <h1>Katy's Geck-Tacular Geckos!</h1>
  <div class="p-container">
    <p>Hello</p>
    <p>customer</p>
    <p>welcome!</p>
  </div>
  
</div>