Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
HTML5 Boilerplate in jade
!!! 5
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='description', content='')
meta(name='viewport', content='width=device-width, initial-scale=1')
link(rel='stylesheet', href='css/normalize.css')
link(rel='stylesheet', href='css/main.css')
//if lt IE 8
You are using an <strong>outdated</strong> browser.
Please <a href="">upgrade your browser</a>
to improve your experience.
p Hello world! This is HTML5 Boilerplate.
script window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
Copy link

zhongwei commented Apr 17, 2011

!!! html is wrong,shoud be !!! or !!! 5

Copy link

xtian commented Apr 17, 2011

!!! html is for non-terse rendering (i.e., self-closing tags and self-referencing boolean attributes), which I prefer.

Copy link

busticated commented Apr 18, 2011

line 37 (the jQuery fallback) isn't working for me... I'll take a swing at fixing in a bit.

Copy link

xtian commented Apr 19, 2011

Not working how? As far as I can tell it renders identically to what's in the Boilerplate.

Edit: Maybe it was that the src attribute didn't use double quotes? I must have missed it when I did a find and replace on double to single quotes.

Copy link

busticated commented Apr 20, 2011

yup I think that was it! it's working like a charm now... thanks!

Copy link

L-four commented Aug 15, 2011

Awsome thanks!

Copy link

arruda commented Jun 9, 2012

don't get it, why no one use jade block in templates?
Is it a bad way of doing things?
Because from my point of view letting everything out of the template engine strange...
Shouldn't be somewhere in there something like:

    block content
         // content goes here


extends h5bp
block content
    p Hi!

I'm used to Django template engine, and get very confused why no one uses * extends * or * block *

Copy link

xtian commented Jun 10, 2012

@arruda I do use extends and block. This is just a jade version of the h5bp index.html, not an example of how you should structure your templates.

Copy link

arruda commented Jun 10, 2012

Oh, I see, well, good to know that the idea of using blocks and extends is used.
Thanks for the enlighment

Copy link

j0lv3r4 commented Aug 5, 2012

why codekit doesn't compile and show me this error: ?

Copy link

maeseele commented Jan 16, 2013

I had to change line 10 to


In order for jade to compile it correctly for me.

Copy link

kaosf commented May 14, 2013

Hi, @xtian.

Thanks to a marvelous Jade code for h5bp. It's very helpful for me.

I think that <\\/script> in line 35 should be changed to <\/script>.

My environment is;

  • Node.js 0.10.0
  • Jade 0.30.0

I transfered Jade to HTML and checked with the following command;

jade -P < html5boilerplate.jade

Copy link

xtian commented Oct 23, 2013

@kaosf Thanks, that was a workaround for a double escaping issue in Jade that must have been fixed since I last updated this gist.

Copy link

Danilovesovic commented Mar 27, 2015


Copy link

chiunhau commented Jul 19, 2015


Copy link

tonymtz commented Jan 1, 2016

That doctype was deprecated some time ago, now this is the way to go:

doctype html


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment