Web Directions Conferences for web and digital professionals

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.

We make events for the web professionals shaping Australia's digital future

Learn more about us

Thanks for an amazing few days Web Directions. So many great themes of empathy, inclusion, collaboration, business impact through design, and keeping our future deeply human.

Laura van Doore Head of Product Design, Fathom

Join us in 2019:

  • Web Directions Design 2019

    Australia's design conference with the world's leading expert

    Melbourne April 11 & 12 2019

    Details
  • Web Directions Code 2019

    Australia's conference for JavaScript and Front End Engineers

    Melbourne June 20 & 21 2019

    Details
  • Web Directions Product 2019

    Australia's conference for Product professionals

    Melbourne August 1 & 2 2019

    Details
  • Web Directions Summit 2019

    Our legendary event. Two big tracks, one Product/Design, one Developer focused.

    Sydney November 2019

    Details