HTML5: Quick Start–Page Template


Interestingly the minimum markup required for an HTML5 page to be a valid HTML5 page is extremely minimal:

<!DOCTYPE html>
<meta charset=utf-8>
<title>Valid HTML5</title>

That’s it. No <head> tag, no <body> tag, or even an <html> tag is required in order to be a valid HTML5 page. Seriously! Head on over to and enter the code above, and then see for yourself.

You might ask yourself—as I certainly did—why would that be? Why would HTML5 be so lax? The answer is that these three elements are completely, entirely and absolutely optional.

The simple reason that these, apparently essential, elements are optional is because browsers assume them anyway—they are so important that browsers don’t trust you to add them in the first place. Below is an image of what the new shiny IE9 browser renders assuming a document with the exact same markup as shown above:


Does that mean that we should not add these elements to our production HTML5 documents? Absolutely not! While the above markup is the minimal legal and valid HTML5 markup, is it far from the minimal, most maintainable and practical HTML5 markup. What follows is my opinion of the latter:

<!DOCTYPE html>
<html lang=en>
  <meta charset=utf-8>
  <title>##PAGE TITLE##</title>

The above is actually the contents of my very own template.htm file, which I use as the basis for all my HTML5 markup. Note the use of the lang attribute, to help screen readers get the language right—another reason to ensure that you have an <html> element.

Also note that I’m not using quotes for my attribute values; there is nothing deep and meaningful here. I omit them not because I have been oppressed by the dogma of XML for so many years that now I’m rebelling in my own small way, running riot removing quotes left-right-and-centre; removing quotes because I can—OK, well maybe it is that, but it’s not like I’m running with scissors or anything. Use quotes, don’t use quotes; really, it doesn’t matter—all that really matters is that you’re consistent with whichever approach you ultimately take.

As usual, if you have any comments, questions, flames, or enhancements I would love to hear from you. In the meantime, think deeply and enjoy.



Derek Lakin said...

Although the syntax is valid HTML5, isn't it invalid XML because the meta tag isn't closed?

Paul Jackson said...

Correct, but there's actually a few more things wrong than an unclosed tag for my uber slim HTML5 template to be considered valid XML.

So putting aside the fact that I'm deliberately *not* being XML compliant here--you would also have to quote all attributes, and possibly remove the DOCTYPE declaration (for XHTML5 however you can leave that in place), also remember that XML is case sensitive, so you might also have to do some work with the actual attributes names too if standards are important to you.

Turning our attention to the three liner at the beginning of the post you'd have even more work to do to get even close to being valid XML; (phew)

I hope this helps :)

Derek Lakin said...

Glad to see I'm not losing my marbles :)