HTML5 Beginers Layout With Google Ajax Load


/ Published in: HTML
Save to your folder(s)

Basic HTML5 layout for beginners


Copy this code and paste it in your HTML
  1. <!doctype html>
  2. <html lang="en">
  3. <meta charset="utf-8" />
  4. <title>HTML5 Beginers Layout</title>
  5. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  6. <script type="text/javascript">
  7. google.load("jquery", "1.4.2");
  8. google.load("jqueryui", "1.8.2");
  9. <!--[if lt IE 9]>
  10. <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  11. <![endif]-->
  12. </head>
  13. <header>
  14. <hgroup>
  15. <h1>Page Header</h1>
  16. <h2>Description May Go Here</h2>
  17. </hgroup>
  18. </header>
  19.  
  20. <nav>
  21. <ul>
  22. <li><a href="#">Home</a></li>
  23. <li><a href="#">Contact</a></li>
  24. </ul>
  25. </nav>
  26.  
  27. <article>
  28. <header>
  29. <h1>Article Header</h1>
  30. <time datetime="2010-05-05" pubdate>June 25th 2010</time>
  31. </header>
  32. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  33. <section>
  34. <header>
  35. <h1>Section Header</h1>
  36. </header>
  37. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  38. <footer>
  39. <p>Section Footer</p>
  40. </footer>
  41. </section>
  42. <footer>
  43. Article Footer
  44. </footer>
  45. </article>
  46.  
  47. <aside>
  48. <header>
  49. <h1>Siderbar Header</h1>
  50. </header>
  51. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  52. </aside>
  53.  
  54. <footer>
  55. Page Footer
  56. </footer>
  57.  
  58. </body>
  59. </html>

URL: http://plan-zero.org

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.