Skip to content

Instantly share code, notes, and snippets.

@brianyang
Created January 12, 2012 22:17
Show Gist options
  • Save brianyang/1603480 to your computer and use it in GitHub Desktop.
Save brianyang/1603480 to your computer and use it in GitHub Desktop.
html5 boilerplate
< !doctype html >
<!--
paulirish.com / 2008 / conditional - stylesheets - vs - css - hacks - answer - neither / -->
<!--
[
if lt IE 7] > < html class = "no-js lt-ie9 lt-ie8 lt-ie7"
lang = "en" > < ![endif] -->
<!--
[
if IE 7] > < html class = "no-js lt-ie9 lt-ie8"
lang = "en" > < ![endif] -->
<!--
[
if IE 8] > < html class = "no-js lt-ie9"
lang = "en" > < ![endif] -->
<!--
Consider adding a manifest.appcache: h5bp.com / d / Offline -->
<!--
[
if gt IE 8] > <!--
> < html class = "no-js"
lang = "en" > <!--
< ![endif] -->
< head > < meta charset = "utf-8" >
<!--
Use the.htaccess and remove these lines to avoid edge
case issues.
More info:
h5bp.com / b / 378 -->
< meta http - equiv = "X-UA-Compatible"
content = "IE=edge,chrome=1" > < title > < /title>
<meta name="description" content="">
<!-- Mobile viewport optimized: h5bp.com/viewport-- > < meta name = "viewport"
content = "width=device-width,initial-scale=1" >
<!--
Place favicon.ico and apple - touch - icon.png in the root directory: mathiasbynens.be / notes / touch - icons -->
< link rel = "stylesheet"
href = "css/style.css" >
<!--
More ideas
for your < head > here: h5bp.com / d / head - Tips -->
<!--
All JavaScript at the bottom,
except this Modernizr build incl.Respond.js
Respond is a polyfill
for min / max - width media queries.Modernizr enables HTML5 elements & feature detects;
for optimal performance,
create your own custom Modernizr build: www.modernizr.com / download / -->
< script src = "js/libs/modernizr-2.0.6.min.js" > < /script>
</head > < body > < header > < /header>
<div role="main">
</div > < footer > < /footer>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="/ / ajax.googleapis.com / ajax / libs / jquery / 1.7.1 / jquery.min.js "></script>
<script>window.jQuery || document.write('<script src="
js / libs / jquery - 1.7.1.min.js "><\/script>')</script>
<!-- scripts concatenated and minified via build script -->
<script defer src="
js / plugins.js "></script>
<script defer src="
js / script.js "></script>
<!-- end scripts -->
<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
mathiasbynens.be/notes/async-analytics-snippet -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
<script defer src=" //ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
< script defer > window.attachEvent('onload', function () {
CFInstall.check({
mode: 'overlay'
})
}) < /script>
<![endif]-->
</body > < /html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment