HTML5 Doctype Example

Posted on Jul 25, 2012 (one year ago). Seen 1,165 times. 2 comments. Permalink Feed
Photo Rick Hurst
HTML5 Expert
Member since Apr 16, 2012
Stream Posts: 3
Tagged as: HTML5 Tutorial

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>

Comments

Posted on Jul 26, 2012
Photo Mfawa Alfred Onen
System Administrator
Bingham University
Member since Jul 24, 2012
Location: Abuja
Nice tips, Thanks!
Posted on Aug 17, 2012
Photo Vishnu Vg
Software Engineer,
Experion Technologies
Member since Aug 16, 2012
Location: Vattappara
excellent one