Posted By

Eystein on 09/16/10


Tagged

template html starter


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

jplr
baczoni
michellebracken


HTML5 boilerplate with comments


 / Published in: HTML
 

  1. <!doctype html>
  2. <html lang="en" class="no-js">
  3. <meta charset="utf-8">
  4.  
  5. <!-- www.phpied.com/conditional-comments-block-downloads/ -->
  6. <!--[if IE]><![endif]-->
  7.  
  8. <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
  9. Remove this if you use the .htaccess -->
  10. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  11.  
  12. <meta name="description" content="">
  13. <meta name="author" content="">
  14.  
  15. <!-- Mobile Viewport Fix
  16. j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
  17. device-width : Occupy full width of the screen in its current orientation
  18. initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
  19. maximum-scale = 1.0 retains dimensions instead of zooming in if page width < device width
  20. -->
  21. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
  22.  
  23.  
  24. <!-- Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references -->
  25. <link rel="shortcut icon" href="/favicon.ico">
  26. <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  27.  
  28.  
  29. <!-- CSS : implied media="all" -->
  30. <link rel="stylesheet" href="css/style.css?v=1">
  31.  
  32. <!-- For the less-enabled mobile browsers like Opera Mini -->
  33. <link rel="stylesheet" media="handheld" href="css/handheld.css?v=1">
  34.  
  35.  
  36. <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
  37. <script src="js/modernizr-1.5.min.js"></script>
  38.  
  39. </head>
  40.  
  41. <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
  42.  
  43. <!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
  44. <!--[if IE 7 ]> <body class="ie7"> <![endif]-->
  45. <!--[if IE 8 ]> <body class="ie8"> <![endif]-->
  46. <!--[if IE 9 ]> <body class="ie9"> <![endif]-->
  47. <!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
  48.  
  49. <div id="container">
  50. <header>
  51.  
  52. </header>
  53.  
  54. <div id="main">
  55.  
  56. </div>
  57.  
  58. <footer>
  59.  
  60. </footer>
  61. </div> <!--! end of #container -->
  62.  
  63.  
  64. <!-- Javascript at the bottom for fast page loading -->
  65.  
  66. <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
  67. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  68. <script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
  69.  
  70.  
  71. <script src="js/plugins.js?v=1"></script>
  72. <script src="js/script.js?v=1"></script>
  73.  
  74. <!--[if lt IE 7 ]>
  75. <script src="js/dd_belatedpng.js?v=1"></script>
  76. <![endif]-->
  77.  
  78.  
  79. <!-- yui profiler and profileviewer - remove for production -->
  80. <script src="js/profiling/yahoo-profiling.min.js?v=1"></script>
  81. <script src="js/profiling/config.js?v=1"></script>
  82. <!-- end profiling code -->
  83.  
  84.  
  85. <!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet
  86. change the UA-XXXXX-X to be your site's ID -->
  87. <script>
  88. var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
  89. (function(d, t) {
  90. var g = d.createElement(t),
  91. s = d.getElementsByTagName(t)[0];
  92. g.async = true;
  93. g.src = '//www.google-analytics.com/ga.js';
  94. s.parentNode.insertBefore(g, s);
  95. })(document, 'script');
  96. </script>
  97.  
  98. </body>
  99. </html>

Report this snippet  

You need to login to post a comment.