Inspect the working example
The source below attempts to place one p inside another. Its IDs let us identify the two intended paragraphs after parsing. The word After is outside the second paragraph and the final closing p has no matching open paragraph at that point.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Second start tag | Parse <p id="second"> | The first paragraph closes; first and second become siblings |
| Trailing text | Inspect After after </p> | A body text node, outside both identified paragraphs |
| Unmatched final end tag | Inspect the final </p> | The parser creates an empty paragraph, yielding three p elements |
Follow the browser mechanism
A p start tag closes an open paragraph in this parser state. The browser therefore does not construct the source indentation as nested paragraphs. The selector #first #second matches nothing. DOM inspection can expose the repair; a browser rendering the words without an obvious error does not make the source valid.
A container permits real paragraph siblings
To contain two paragraphs, use a section around them rather than a paragraph around a paragraph. This contrasting source changes the intended structure instead of relying on parser repair.
<section id="first"><p>Before</p><p id="second">Inside the section</p></section>There are two paragraphs and #first #second matches one. The first ID now belongs to a section, not a p.
Try the repair
If you only remove the final unmatched </p>, does #second become a child of #first?
Show the worked answer
No. Starting the second p already closed the first. Removing the last end tag removes the empty repaired paragraph, but the two identified paragraphs remain siblings.
- Read the parsed tree and count p elements: three in the malformed fixture, two in the contrasting container.
- Use a fresh document for each source; do not inspect an edited tree left over from another example.