HTML5 Boilerplates

by .

Without going into the discussion of why HTML 5 is available today and not 2022, this article is going to give you a series of HTML 5 boilerplates that you can use in your projects right now.

HTML 5 in 5 seconds

It’s über easy to get your markup to validate as HTML 5 — just change your DOCTYPE from whatever it is now to this:

<!DOCTYPE html>

That's it! It doesn't require anything more than that.

Google are doing it already. Check out their homepage, written all in one line:

<!doctype html><head><title>HTML 5 - Google Search</title><script>...

Ironically, Google's search and results pages don't validate because of their use of invalid tags like <font> and a number of other errors, but that's okay. They can still take advantage of the HTML 5 parsing rules (e.g., no type attribute on the <script> element) by using the correct DOCTYPE.

HTML 5 minified

If you like to knock out quick prototypes or experiments that don't require much styling, you might be interested in a miniature document in HTML 5:

<!DOCTYPE html>
<title>Small HTML 5</title>
<p>Hello world</p>

That's completely valid HTML 5 too.

(Interestingly, there was some disagreement about this pattern's validity when I removed the <title> tag. says it's fine, and so does the W3C validator as long as the markup is entered manually. But Henri Sivonen's validator says it's invalid without the <title> tag. The W3C validator also says it's invalid when you give it a url. Hopefully, this will get sorted out soon.)

HTML 5 complete & compatible

This final, more complete boilerplate also indicates the character set. Without it, some characters will not render properly (and I've spent too much time in the past trying to work out why!).

We're also including the HTML 5 shiv so that we can style elements in IE. Note that you must include this script in the <head> element.

Finally, we're adding a few CSS rules to cause the new block-level elements to render as such, since some browsers don't know about them natively.

So here it is — a valid and complete HTML 5 document boilerplate:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, details, figcaption, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>

If you want to experiment with HTML 5, the default JS Bin template is an HTML5 boilerplate for you to play with too.

lt;body

129 Responses on the article “HTML5 Boilerplates”

  • […] un exemple de page HTML5 valide proposée par Remy Sharp dans HTML 5 Boilerplates utilisant le script html5.js […]

  • Shaun says:

    Thanks, this hopefully this should lead people away from (incorrectly) using XHTML.

    Perhaps you should also mention that HTML5 doesn’t mind if you close your tags in XHTML fashion (like ).

    I am going to be teaching my partner HTML and CSS, this certainly makes things simpler!

  • Some corrections:

    “The way to get the browser to switch to HTML 5…”

    The browser doesn’t switch to some kind of new HTML5 mode when seeing the doctype. There isn’t a new HTML5 mode, there’s still only quirks mode, almost standards mode, and standards mode. The doctype specified in HTML5 triggers standards mode, but so does the HTML 4.01 doctype etc.

    The Live DOM Viewer isn’t a validator, it’s a development tool. Keep in mind that browsers build a DOM from valid and invalid documents alike–the DOM Viewer lets you see that DOM for any input bytes.

  • […] HTML 5 Boilerplates | HTML5 Doctor lt CSS styles to trig […]

  • Adam Harvey says:

    Thanks! I didn’t even think about adding the CSS styles. Any idea why they have to be added to the document header and not the CSS file?

  • @Adam

    You don’t have to add the CSS styles to the head. Just add them to your CSS.

  • […] HTML 5 Boilerplates | HTML5 Doctor A more complete boilerplate would be to include the meta character set, otherwise some characters aren’t going to render properly (and in the past I’ve spent too much time trying to work out why!). (tags: html5doctor.com 2009 mes6 dia17 HTML5 blog_post) […]

  • […] The rest is here:  HTML 5 Boilerplates | HTML5 Doctor […]

  • Neil says:

    Hey, thanks for the boilerplate template. I’ve been looking for something like this!

  • Andy says:

    Why is everyone putting DOCTYPE in uppercase when it’s not needed?

    Keep it simple.

  • Andy says:

    DOCTYPE in uppercase is also distracting. It calls out for our attention, away from other HTML code we are editing — that’s totally unnecessary.

  • Juraj says:

    “HTML 5 minified” example can be even more simpler, you can omit tag.

  • Juraj says:

    … omit [/p] tag

  • jamesS says:

    @Adam,

    Placing the style rules in the head ensures that they are applied every time the page is viewed. Otherwise, should the accompanying CSS file not get loaded for any reason then the browser would not render the new elements correctly.

  • Remy Sharp says:

    @Edward thanks for the corrections. I’m updating the blog post as you’re right on Hixie’s viewer – I initially thought this was parsing, but it’s actually reading the contents of how an iframe built the DOM tree – which explains why it’s handled differently.

    Re: switching – of course you’re right. There’s no mode to switch in to, I think it’s more the way of thinking about the way we’re writing our code. I’ve updated the post to read “validate as HTML 5” which is what I was aiming for ;-)

    @Juraj – you could strip the trailing p tag, but preference is to use “well formed” markup. Just because it’s reduced, doesn’t mean it needs to look like the bad old days of HTML 4 :-)

    @Adam – as Shaun said, you can include these styles in your external files, it doesn’t particularly have to be inline. Check out the source code to HTML 5 Doctor, we include the HTML 5 styles in the reset styles that we use.

  • […] den Umbau eines Blogs in Angriff zu nehmen. Für den extra leichten Umstieg hält der Doktor eine HTML 5 Vorlage bereit, die in wenigen Sekunden einsetzbar ist. Die notwendigen JavaScript- und CSS-Kunstgriffe, um […]

  • Wired Earp says:

    Save for the audio + video + canvas tags, I have never