First, let's talk about the basic case where there's no whitespace between the two paragraphs.
<p>Paragraph 1</p><p>Paragraph 2</p>
In this case, the first </p> can be omitted according to the rule "A p element's end tag may be omitted if the p element is immediately followed by an [...] p [...] element [...]", resulting in this code:
<p>Paragraph 1<p>Paragraph 2</p>
If we assume that the body ends immediately after this (either because there's a </body> or because we've reached the end of the file, since </body> and </html> are optional tags) then we can remove the second </p> as well because of the rule "A p element's end tag may be omitted 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":
<p>Paragraph 1<p>Paragraph 2
Now, let's get into the case where there is whitespace between the two paragraphs:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
In this case, you can't remove the first </p>, because the rule is that it must be "immediately followed" by another p element. However, what if we start with this code?
<p>Paragraph 1
</p><p>Paragraph 2</p>
In this case, we can remove the first </p>, resulting in:
<p>Paragraph 1
<p>Paragraph 2</p>
and again, we can remove the last </p>, resulting in:
<p>Paragraph 1
<p>Paragraph 2
Now, this is different from what we started with. The whitespace is now inside the first paragraph instead of after it. But since HTML does not render this extra whitespace by default, it's of no real consequence.
And that leads us to this point: the HTML spec is specifying the exact circumstances where you can omit tags without changing the DOM. However, if we are okay with changing the DOM a bit, by moving that whitespace into the first paragraph, then we can simply pretend that we wrote
<p>Paragraph 1
</p><p>Paragraph 2</p>
from the beginning, and apply the rules to that instead.
> But since HTML does not render this extra whitespace by default, it's of no real consequence.
But it does render that extra whitespace (as a single space). Try selecting the text of the article and you see there is a trailing space after every paragraph.
First, let's talk about the basic case where there's no whitespace between the two paragraphs.
In this case, the first </p> can be omitted according to the rule "A p element's end tag may be omitted if the p element is immediately followed by an [...] p [...] element [...]", resulting in this code: If we assume that the body ends immediately after this (either because there's a </body> or because we've reached the end of the file, since </body> and </html> are optional tags) then we can remove the second </p> as well because of the rule "A p element's end tag may be omitted 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": Now, let's get into the case where there is whitespace between the two paragraphs: In this case, you can't remove the first </p>, because the rule is that it must be "immediately followed" by another p element. However, what if we start with this code? In this case, we can remove the first </p>, resulting in: and again, we can remove the last </p>, resulting in: Now, this is different from what we started with. The whitespace is now inside the first paragraph instead of after it. But since HTML does not render this extra whitespace by default, it's of no real consequence.And that leads us to this point: the HTML spec is specifying the exact circumstances where you can omit tags without changing the DOM. However, if we are okay with changing the DOM a bit, by moving that whitespace into the first paragraph, then we can simply pretend that we wrote
from the beginning, and apply the rules to that instead.