Posted By

koorb on 02/11/11


Tagged

template structure semantic html5


Versions (?)

HTML5 Boilerplate


 / Published in: HTML
 

URL: http://mezzoblue.com/archives/2011/01/31/boilerplate/

  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>pageTitle</title>
  4. <link rel="stylesheet" href="default.css">
  5. <script src="default.js"></script>
  6. </head>
  7.  
  8.  
  9. <div id="accessibility">
  10. <a href="#nav">Skip to Navigation</a> |
  11. <a href="#main-content">Skip to Content</a>
  12. </div>
  13.  
  14.  
  15. <header role="banner">
  16. <div class="masthead">
  17. <a href="#"> ....site title or logo, purposely not an h1.... </a>
  18. </div>
  19. <nav id="nav">
  20. <ul>
  21. <li><a href="#">
  22. ....main site nav list....
  23. </a></li>
  24. </ul>
  25. </nav>
  26. <div id="secondary-nav">
  27. <ul>
  28. <li><a href="#">
  29. ....other non-primary navigation doesn't belong in a nav element....
  30. </a></li>
  31. </ul>
  32. </div>
  33. </header>
  34.  
  35.  
  36. <section id="main-content" role="main">
  37. <h1> ....page title here.... </h1>
  38. <article>
  39. <header>
  40. <h2>....article heading if needed....</h2>
  41. <h3>....article sub-heading if needed....</h3>
  42. </header>
  43. ....article content here....
  44. </article>
  45. <article>
  46. ....use more article elements if appropriate; if not, I still use divs....
  47. </article>
  48. </section>
  49.  
  50.  
  51. <aside id="sidebar">
  52. ....site sidebar here....
  53. </aside>
  54.  
  55.  
  56. <footer>
  57. .... footer content here ....
  58. </footer>
  59.  
  60.  
  61. </body>
  62. </html>

Report this snippet  

You need to login to post a comment.