Semantic HTML Templates for HTML5 Boilerplate

For the past several months, I’ve been using a tweaked version of Paul Irish’s HTML5 Boilerplate as a starting point for the majority of my web projects. It’s incredibly well thought out group of files and I has taught me quite a bit. One of the few features it lacks, is a basic, semantic HTML page structure. A few weeks ago, Dave Shea released his own page structure template. Shea’s template is certainly a great starting point, but I’m not too crazy about his use of the section element and heading order.

Here are my own page structure templates, which are heavily influenced by Jeremy Keith’s HMTL5 for Web Designers. All of the HTML5 Boilerplate HTML is left intact, with the exception of changing:

 <p>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
to
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Basic Page Structure


<div id="container">
    <header role="banner">

    <div id="logo"> 
        <a rel="home" href="/" title="Home">...site title or logo...</a> 
    </div>

    <nav id="primary-nav">
    <ul>
        <li><a href="#">Nav 1</a></li>      
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
    </ul>
    </nav>

    </header><!--end header-->

    <div id="main-content" role="main">

        <h1>Page Title</h1>

        <p>...Main Page Content...</p>

    </div> <!--end main div-->

    <div id="secondary-content">
        ...secondary content/sidebar goes here...
    </div><!--end secondary div-->

    <footer id="page-footer">
        <p>© Copyright Your Name 2011.</p>
    </footer>

  </div> <!--! end of #container -->

Blog Page Structure


<div id="container">
    <header role="banner">

    <div id="logo"> 
        <a rel="home" href="/" title="Home">...site title or logo...</a> 
    </div>

    <nav id="primary-nav" role="nav">
    <ul>
        <li><a href="#">Nav 1</a></li>      
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
    </ul>
    </nav>

    </header><!--end header-->

    <div id="main-content" role="main">

        <!--begin blog post-->
        <article>
            <header>
                <h1>Blog Post Heading</h1>
            </header>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>

            <footer class="article-footer">
                <p>Published<time pubdate>2011-01-01</time> by Adam D. Scott</p>
            </footer> 
        </article><!--end blog post-->

    </div> <!--end main div-->

    <div id="secondary-content">
        ...secondary content/sidebar goes here...
    </div><!--end secondary div-->

    <footer id="page-footer">
        <p>© Copyright Your Name 2011.</p>
    </footer>

  </div> <!--! end of #container -->

Feel free to download the files. I’d love comments/feedback/corrections.