Posted By

vultur on 08/28/12


Tagged

basic template html5


Versions (?)

Who likes this?

14 people have marked this snippet as a favorite

Internet-Uzver
rafaelzago
kimil
vitaum3oitaum
std-59
zamfi
JuanIB
imoddesign
chino
_naphetz
CWade3052
sol_key
StephenOdieleHarlow
GertjandW


HTML5 Baisc Template


 / Published in: HTML
 

URL: http://www.vultur.ca/snipplr/html5.html

This is a basic template that I use most of the time for proper any html5 projects, it's straightforward simple with a few basic elements that are often used in any projects. I've taken the habits of commenting the end of a div to refer easily to it on a big scale project, but headers, navs, articles, asides, sections and footers are not commented at the end.

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>My Title</title>
  6. <meta name="description" content="Ermahgerd Webr">
  7. <meta name="author" content="Derp">
  8. <link rel="stylesheet" href="css/style.css">
  9. <!--[if lt IE 9]>
  10. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  11. <![endif]-->
  12. </head>
  13. <!-- Le Header -->
  14. <header></header>
  15.  
  16. <!-- Le Navigation -->
  17. <nav>
  18. <ul>
  19. <li><a href="#">Home</a></li>
  20. <li><a href="#">About</a></li>
  21. <li><a href="#">Portfolio</a></li>
  22. <li><a href="#">Contact</a></li>
  23. </ul>
  24. </nav>
  25.  
  26. <!-- Le Content Wrapper -->
  27. <div id="wrapper">
  28.  
  29. <!-- Le Content -->
  30. <div id="content">
  31.  
  32. <!-- Le Article -->
  33. <article>
  34. <h1>This is a Header.</h1>
  35. <p>Le lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis porta augue, vel convallis ligula dignissim eu. Le nam scelerisque aliquam adipiscing. Le aenean ante urna, accumsan quis placerat at, consectetur et tellus.</p>
  36. </article>
  37.  
  38. </div><!-- Le Content END -->
  39.  
  40. <!-- Le Complementary Stuff -->
  41. <aside></aside>
  42.  
  43. </div><!-- Le Content Wrapper END -->
  44.  
  45. <!-- Le Footer -->
  46. <footer></footer>
  47.  
  48. <!-- Le End -->
  49. </body>
  50. </html>

Report this snippet  

You need to login to post a comment.