HTML5 Doctype Example



HTML5 doctype is as follows:

<!DOCTYPE html>

not

<!DOCTYPE html5>

If you get this wrong, can you guess what happens?

It defaults to the dreaded quirks mode.

If a browser doesn’t recognize the document’s doctype it decides to use the lowest common denominator for rendering instead and your beautiful website will probably not work as intended.

You can have all your markup pristine, however if your doctype is wrong it is all for nought.

One sure-fire way to avoid the doctype ‘typo’ issue is to run your code through the w3c validator at http://validator.w3.org/.

Don’t forget to use the <html> tag before your start with all that <head></head> and <body></body> stuff.

Closing the </html> tag at the end also goes without saying.

I also advise developers to set the charset via a meta tag too, just incase the server people don’t do their job correctly. This would overwrite any mistake they make in sending the encoding type.

It doesn’t hurt to add the charset as a rule of thumb.

<meta charset="UTF-8" />

So in summary I always start with this and then fill in the blanks from there.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body></body>
</html>
Published July 25, 2012