span, p, and html

<!doctype html>
<html lang="en">
<head>
  <title>Wat</title>
</head>
<p>
  <div></div>
</p>
<span>
  <div></div>
</span>
</html>

Given the html page above, the first <div> “inside” <p> is actually valid because </p> is optional. The end result is <p></p><div></div></p> with the last </p> being invalid because there’s no matching <p>.

On the other hand, <span> requires matching </span> so even though <div> can’t be put inside <span>, browsers still consider it to be inside the <span>, making it seem correct when viewed from developer tools.

Leave a Reply

Your email address will not be published. Required fields are marked *