HTML5 has a whole host of cool new elements and attributes to be on the lookout for, but the thing that gets me most jazzed is I no longer have to create a boatload of <div> tags with id attributes. That’s because they took into account web designers and the way we code & structure layouts when redesigning HTML5. Here is how I plan to start using the new tags for layout design:

The Old School Markup

The old-school way to code a layout is to determine all “real estate” sections to your page (call them windows, panes, divisions, etc.), then create 1 <div> with a unique id attribute for each section like so:  

<div id="banner">
   <h1>Website Logo or Title Goes Here</h1>
   <h2>Tagline goes here. Note: this could be in a p tag with a tagline id attribute</h2>
</div>

<div id="navcontainer">
<ul id="navlist">
     <li><a href="index.html">home</a></li>
     <li><a href="about.html">about us</a></li>
     <li><a href="gallery.html">images</a></li>
     <li><a href="contact.html">contact us</a></li>
     <li><a href="site.html">site map</a></li>
</ul>
</div>

<div id="page">

   <div id="content">
      <h2>Content Header Goes Here</h2>
      <p>Paragraph goes here.</p>
      <!-- Continue on with more content for the "content" div -->
   </div><!-- close "content" div -->

   <div id="sidebar">
      <h2>Side Bar Div</h2>
      <p>Add side bar content here.</p>
   </div> <!-- close "sidebar" div -->

</div> <!-- close "page" div -->

</div> <!-- close "container" div -->

<div id="footer">
   <p>Designed by <a href="http://hundredvisions.com">Hundred Visions</a> &copy; 2010</p>
</div> <!-- close "footer" div -->

Note the following:  

1. According to the W3C, it is acceptable to use the <div> tags with identifying id attributes as a way to select the specific tag with CSS to be displayed in the way we deem fit
2. Some people surround everything with a “container” or “wrapper” <div> to allow us to center all of our content and possibly add some interesting background graphics to the body element, but I’m beginning to move away from that technique because it adds an extra meaningless <div>, and you can still apply width and centering technique to each main div (“banner”, “navcontainer”, “content”, & “footer”)
3. Creating a “page” div that has two direct child elements: <div id=”content”> and <div id=”sidebar”> makes it much easier to display as two columns, plus, you can add a background color to the “page” that matches the “sidebar” div and make it look like the sidebar’s background color extends as far as the “content” div (provided you have no padding on the “page” and you do set the “content” background color)
   • However, the extra div is mostly meaningless, and combined with the “container”/”wrapper” div, you’re mostly just adding markup in order to make more stylistic changes

The New HTML5 Way to Do it

Note: I should give credit to A List Apart’s article, titled A Preview of HTML5 for giving me inspiration (in fact most of what I’ve come up with came from that site). The remaining ideas came from trying to “translate” my HTML from above and the W3C’s specs on section tags in HTML5. For each new tag, I added a content with a definition of that element taken straight from the W3C spec. 

<header>
 <!-- The header element represents a group of introductory or navigational aids. -->
 <h1>CSS Samples</h1>
 <h2>Different Ways to Style a Layout</h2>
</header>

<nav>
 <!-- major navigation blocks are appropriate for the nav element -->
 <ul id="navlist">
  <li><a href="index.html">home</a></li>
  <li><a href="about.html">about us</a></li>
  <li><a href="gallery.html">images</a></li>
  <li><a href="contact.html">contact us</a></li>
  <li><a href="site.html">site map</a></li>
 </ul>
</nav>

<section> <!-- a section represents a generic section of a document or application...a thematic grouping of content,
               typically with a heading. -->

  <article> <!-- an article represents a self-contained composition in a document, page, application, or site and that is,
                 in principle, independently distributable or reusable -->
     <h1>Content Header</h1>
     <p>Content content goes here.</p>  
  </article> 
  <aside> <!-- The aside element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups
               of nav elements, and for other content that is considered separate from the main content of the page -->
     <h1>Here is my aside Header</h1>
     <p>Here is my paragraph of text</p>
 </aside>
</section>

<footer>
 <!-- A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. -->
 <p>Designed by <a href="http://hundredvisions.com">Hundred Visions</a> &copy; 2010</p>
</footer>

Note: This isn’t the only way to code a page in HTML5. In my opinion, the difficulty mainly lies in the difference between the usage of a section and an article; I chose to go the route that Standardista recommended. In the case of a blog, each post should probably be its own <article>, and they could be sectioned into 2 parts (the post and the comments section) using the <section> element (for obvious reasons). 

Also Note: this post is about using HTML5 for semantically marking up a page for layouts. The elements I introduce here (header, nav, section, article, aside, & footer) have not been officially recommended by the W3C. They are currently in “last call” status, which means they are probably not going to change between now and recommendation stage.