> You don't need to close your tags.
Not always true. I’ve run into numerous issues caused by the lack of closing tags, and just did earlier this week.
Not always true. I’ve run into numerous issues caused by the lack of closing tags, and just did earlier this week.
<div>
<p>
<h1>
<h2>
if you were actually developing production code and misplaced, let's say, <p>'s closing tag, then that would mess up the rest of your tree (from your perspective -- the computer doesnt care)
Many of the rules for unclosed tags are more there so that browsers can agree on what to do with garbage first, and for you to rely on only incidentally! They defer to historical practice before common sense!
In order to predict this reliably, you essentially need to have the list of content categories[1] memorized (or look them up). Not all of them are ... necessarily intuitive.
[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Cont...
For example, <p>A<p>B</p>C</p> looks like two nested <p> but it is parsed as 3<p> next to each other: <p>A</p><p>B</p>C<p></p>.
"The end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element"
(i.e. the things that aren't valid children for a <p>, iirc)
so i believe your example would end up parsing as
<div>
<p></p>
<h1></h1>
<h2></h2>
</div>
<div>
<p>
<h1>
<h2></h2>
</h1>
</p>
</div>