basic-html5-layout.html

<body>
  <section class="top" role="definition">
    <div class="header">
      <div class="frame">
        <header></header>
        <nav></nav>
      </div>
    </div>
  </section>
  <section class="main" role="main">
    <div class="title">
      <div class="frame">
        <header>
          <h1></h1>
        </header>
      </div>
    </div>
    <div class="body">
      <div class="frame">
        <article>
          <time></time>
          <p>Content...</p>
          <cite>Author</cite>
          <dialog>Comments...</dialog>
        </article>
        <aside>Sidebar</aside>
      </div>
    </div>
  </section>
  <section class="bottom" role="contentinfo">
    <div class="footer">
      <div class="frame">
        <aside>Widgets</aside>
        <footer></footer>
      </div>
    </div>
  </section>
</body>

Vertically, the page is divided into section blocks. The section has a div as children, with a class describing its function (title, footer, body, etc.). Each of those divs has one child, <div class="frame">. That 3-layer construct allows us to style the vertical section with colors/graphics that fill 100% width, and the frame centers our content in say a 960px width grid.

Then everything inside of the frame is the content of the page. Each can have a header, a footer, and any other tags in between.