Base HTML5 Template


 / Published in: HTML
 

URL: http://snipplr.com/view.php?codeview&id=39056

HTML5 starting point template. Used in conjunction with HTML5 CSS reset at the above link.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="utf-8" />
  4. <meta name="description" content="A description about your site" />
  5. <meta name="keywords" content="keywords, separated, by, comma" />
  6. <title>Untitled Document</title>
  7. <link rel="shortcut icon" href="favicon.ico" />
  8. <link rel="stylesheet" href="css/style.css" media="screen" />
  9. <link rel="stylesheet" href="css/print.css" media="print" />
  10. <link rel="stylesheet" href="css/mobile.css" media="handheld" />
  11. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  12. <!--[if IE]>
  13. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  14. <![endif]-->
  15. </head>
  16.  
  17. <section id="header">
  18. <header>
  19. <h1><a href="#">Site Title</a></h1>
  20. <nav>
  21. <ul>
  22. <li><a href="#">Home</a></li>
  23. <li><a href="#">About</a></li>
  24. <li><a href="#">Contact</a></li>
  25. </ul>
  26. </nav>
  27. </header>
  28. </section>
  29.  
  30. <section id="main">
  31. <article>
  32. <hgroup>
  33. <a href="#">
  34. <h1>Heading Title</h1>
  35. <h2>Heading Title 2</h2>
  36. </a>
  37. </hgroup>
  38. <p>Article Filler</p>
  39. </article>
  40. <aside>
  41. Sidebar Filler
  42. </aside>
  43. </section>
  44.  
  45. <section id="footer">
  46. <footer>
  47. &copy; Copyright Year by Author. All Rights Reserved.
  48. </footer>
  49. </section>
  50.  
  51. <script type="text/javascript">
  52. var _gaq = _gaq || [];
  53. _gaq.push(['_setAccount', 'XX-XXXXXXX-XX']);
  54. _gaq.push(['_trackPageview']);
  55.  
  56. (function() {
  57. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  58. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  59. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  60. })();
  61. </script>
  62. </body>
  63. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: Foxyfox on November 21, 2010

Why are you putting sections around the elements?

Posted By: vagrantradio on November 29, 2010

Why not?

Posted By: vagrantradio on December 4, 2010

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

Posted By: pixelsoul on February 18, 2012

You don't need around the and elements.

Posted By: pixelsoul on February 18, 2012

hmm.. that was supposed to say that you don't need "section" around the "header" and "footer" elements.

Posted By: vagrantradio on April 5, 2012

Not really, but it doesn't actually matter.

You need to login to post a comment.