More HTML5 syntax and parser quirks you may not have known

Last week we looked at one of HTML5’s syntax quirks, the fact that you don’t need to quote attribute values (unless the values contain a space or as is less well known one of a number of other characters). This time, some more about some of the subtle side effects of HTML5’s laxer syntax rules.

Let’s start with a quiz. Are both of these valid HTML5 documents (that’s right, complete documents, not just fragments)? Neither? Only one? Which one? Why?

<!doctype html>
<title></title>
<!doctype html>
<html>
<head></head>
<body></body>
</html>

And the answer is that the first is valid, the second not. Which is very counter-intuitive. Unless you know the rules of HTML5 inside out, it’s something you’re unlikely to guess. In HTML5 there is precisely one required element. It’s not html or head or body. It’s title.

Now, does anyone ever actually do this? Try this page out for size.

<!DOCTYPE html>
<html lang=en>
  <meta charset=utf-8>
  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
  <title>Error 404 (Not Found)!!1</title>
  <style>…</style>
  <a href=//www.google.com/><img src=//www.google.com/images/errors/logo_sm.gif alt=Google></a>
  <p><b>404.</b> <ins>That’s an error.</ins>
  <p>The requested URL <code>/saef</code> was not found on this server.  <ins>That’s all we know.</ins>

That’s Google’s 404 page. No head or body elements. (also no pesky closing tag on those ps). I guess if you’re serving this millions of times a day, a few bytes count (though I wonder why then use up 22 precious bytes for those two ins) elements?

But in and of itself this isn’t all that interesting. What is interesting is this question. If in the style element we had

body p{ 
  color: red
}

Would the paragraphs have red text? The (again counter-intuitive) answer is yes! How so? How can the paragraphs be descended from a body element if we didn’t include a body in our markup? Well, that’s where HTML5’s storied parsing algorithm comes in. Where html or body or head are missing, the parser inserts them into the DOM. Let’s take a look at this in action in the Firefox Developer tools

The parser inserts missing elements into the DOM
The parser inserts missing elements into the DOM

Yes, HTML5’s parser can make sense of almost any way we as web developers can mangle our markup. But unless you really know what you are doing, and really really need to save a few bytes, why not stick to the slightly more verbose, but far better understood approach.

6 responses to “More HTML5 syntax and parser quirks you may not have known”:

  1. Wow, marvelous blog layout! How long have you been running
    a blog for? you make blogging glance easy. The whole look of
    your web site is fantastic, let alone the content!

    Also visit my blog post; webpage

  2. If some one needs to be updated with latest technologies after that he must be go to see
    this site and be up to date daily.

    • By: #
    • August 1st, 2013

    There numerous doors on the net web sites which you can follow, in
    order to work. Considerations Always wear safety gear such as gloves, goggles and
    work boots or shoes when working on home improvement.

    They also lost Rothchild, who was arrested on stage after he exposed himself and went on a
    rant against the police. This will prevent the water
    from the roof, and those on the other hand, allow better access to a reflection.

    However, before installation, see to it that you already know the exact size you need.

  3. It’s much easier to understand and edit someone else’s code if attributes are quoted, expected tags are included, and every tag that is opened is closed again.

  4. It’s not my first time to pay a visit this site, i am visiting this web site dailly and take good information from here every day.

    Look into my web page – Cambridge247business.co.uk

  5. I’m now not sure where you are getting your info, however great topic. I needs to spend a while learning more or understanding more. Thanks for wonderful information I was on the lookout for this info for my mission.

    Feel free to visit my blog … internet business