3 ms·
To add to what you said: the HTML specification has a bunch of rules to say how to parse a tag that doesn't have a matching close tag. These grew organically ba
by ufo 6y ago
To add to what you said: the HTML specification has a bunch of rules to say how to parse a tag that doesn't have a matching close tag. These grew organically based on how browsers responded to malformed documents. At some point the rules were enshrined in the HTML specification.
Some tags such as <meta> and <img> are always considered as a leaf node ("void element"). The HTML parser knows that these tags cannot contain other tags.
Other tags, such as <p> or <li> have various rules saying how to automatically insert a closing tag if it's missing. For example, if you leave out the </li> tags in a list the HTML parser will parse it as if you had closed all the list items.
<ul>
<li>first
</li>second
</ul>
<ul>
<li>first</li>
</li>second</li>
</ul>
For these tags, what ends up happening if you try to use the XML self-closing notation is that the "/>" is ignored and then the missing close tag is inserted at a later point, which may or may not be where you want.
- chrismorgan 6y agoSlight correction: all tags will get a closing tag if it’s missing; it’s just less likely to be where you want on tags that “require” an end tag than those where it’s explicitly optional. Remember that HTML defines an exhaustive parser: all inputs produce a defined tree. “Invalid HTML” means a nonconforming document, but it doesn’t actually change anything; it’s just a way of making you feel guilty, or pointing out a place where it’s very likely you made a mistake or might make a mistake in further modifying the document. If you have something like this: <div> <h1>A <p>B <img> <p>C <h2>D <p>E </div> … it’ll parse to this: <div> <h1>A <p>B <img> </p><p>C </p></h1><h2>D <p>E </p></h2></div> See, the headings did get closed eventually, even without their proper closing tags; it just wasn’t where you wanted, either time. (The paragraphs, on the other hand, probably ended where you expected.) Of your example, I think you typed it incorrectly in a couple of places. Here’s what I think you meant to express (plus a third one to make things clearer with the second having a bad trailing slash): <ul> <li>first <li/>second <li>third </ul> … and here’s what that is precisely equivalent to: <ul> <li>first </li><li>second </li><li>third </li></ul>