DEVHIDE
Login Or Sign up

Where I can find a rule, specified that tag <div> inside tag <p>?

114 Views Asked by At

I am doing a task, where I need to correct given HTML file with some content and write a reason for this correction.

And there are lines of code that I know must be corrected, but I can't find any official documentation, which would clearly state that such nesting is wrong.

<p class = "par">
  <div>...</div>
</p>

So my question is where could I find an official statement in official specification or other document, that clearly stated that?

I have found some articles, mentioning that clearly, but I need something more "official". At most what I could find is:

Tag omission in text/html: A p element's end tag can be omitted if the p element is immediately followed by an address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, search, section, table, or ul element, or if there is no more content in the parent element and the parent element is an HTML element that is not an a, audio, del, ins, map, noscript, or video element, or an autonomous custom element.

As you could see, it doesn't clearly stated anything about not allowing <div> to be nested inside <p>.

html specifications semantic-markup
Original Q&A
3

There are 3 best solutions below

0
myf On BEST ANSWER

Content model of p does not allow div

Relevant statement in HTML specs states that The p element Content model is "Phrasing content".

The "Phrasing content" is defined set of elements that does not include div.

<p><div></div></p> does not in fact "work"

Another quite hefty argument revealing flaws in such HTML code could be pointing out what it effectively produces and that it most probably is not what any author really intends:

Resulting DOM structure does not produce div nested inside paragraph, but it produces paragraph followed by div and then second empty paragraph.

Various proofs:

Hixie's DOM viewer

Feeding Ian Hickson's "Live DOM Viewer" with minimalistic document

<!doctype html><body><p class="par"><div></div></p>

reveals resulting structure like so:

Body element has three direct children: paragraph with class "par", div, and second paragraph without class.

Validator

Alternatively, it is always advisable to consult W3C Markup validator for errors. In this case it will point out the "stray" closing tag:

Error: No p element in scope but a p end tag seen.

Local demo

Or you may check it yourself with devtools DOM inspector or make simple demonstration with CSS "probes":

document.write(document.getElementsByTagName('p').length)
body,
p,
div {
  margin: .1em;
  padding: .2em;
  background: #0005;
}

p {
  border: outset;
}

div {
  border: double;
}

p:empty {
  border: dotted;
}

html {
  background: darkslategrey;
  color: snow;
}

code {
  font-family: monospace, monospace;
  background: black;
}
Expecting <code>body</code>: true.
<p>
 Expecting <code>body > p</code>: true.
 <div>
  Expecting <code>body > p > div</code>: false,
  actually <code>body > div</code>.
 </div>
 Expecting <code>body > p</code>: false,
 actually <code>body</code>.
 Empty paragraph follows:
</p>
Expecting <code>body</code>: true.
<hr>
Total paragraphs count:

Why

Why is that so is specified in "Parsing HTML documents" in these two rules:

1. Loosely paraphrased: Any "block-level" element's start tag implicitly closes opened p.

A start tag whose tag name is one of: [...] "div" [...]

If the stack of open elements has a p element in button scope, then close a p element.

Insert an HTML element for the token.

2. Loosely paraphrased: "stray" </p> in HTML always produces empty paragraph without attributes.

An end tag whose tag name is "p"

If the stack of open elements does not have a p element in button scope, then this is a parse error; insert an HTML element for a "p" start tag token with no attributes.

Close a p element.

body {
  counter-reset: x;
}

p:empty::before {
  content: counter(x) '. empty paragraph';
  counter-increment: x;
}
</p>
</p>
</p>
</p>

Both rules can be found in backreferences of "close a p element" directive.

0
mimak On

There is no official specification for designing your page layout. It is advised to use tags according to their semantic meaning to improve search results (SEO) and accessibility of a web page.

HTML standard is maintained by W3C and their specification for HTML elements can be found here. You could also reference RFC 1866 and 2854 if you are in need for more specifications.

0
Sean On

The HTML Living Standard specifications maintained by the WHATWG states that the content model of the <p> element is limited to phrasing content.

An element's content model is a description of what content must be included as children and descendants of the element.

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Note that the <div> element is not among the elements categorized as phrasing content—therefore they cannot be validly placed within a paragraph.

Related Questions in HTML

Related Questions in SPECIFICATIONS

Related Questions in SEMANTIC-MARKUP

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

.

Copyright © 2021 Jogjafile Inc.