Monday 21 March 2011

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 http://html5.validator.nu/ 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:

image

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>
<head>
  <meta charset=utf-8>
  <title>##PAGE TITLE##</title>
</head>
<body>
  <p>##Content##</p>
</body>
</html>

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.

-PJ

1 comment:

Jason Lee said...

I'm liking these HTML5 posts - keep them coming!