HTML5 Semantic markup example

displayed as a topographical map. source: http://playground.html5rocks.com/#semantic_markup

HTML

<footer>
      footer123
    </footer>
    <header>
      <hgroup>
        <h1>header hgroup h1</h1>
        <h2>header hgroup h2</h2>
      </hgroup>
    </header>
    <nav>
      <ul>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
        <li><a href="#">nav ul li a</a></li>
      </ul>
    </nav>
    <section id="articles">
      <article>
        <header>
          <h2><a href="#">section article header h2 a</a></h2>
        </header>
        <section>
            section article section <br />
            section article section <br />
            section article section <br />
            section article section <br />
            section article section <br />
            section article section <br />
            section article section <br />
        </section>
      </article>
      <article>
        <header>
          <h2><a href="#">section article header h2 a</a></h2>
        </header>
        <section>
            section article section <br />
            section article section <br />
            section article section <br />
            section article section <br />
            section article section <br />
            section article section <br />
            section article section <br />
        </section>
      </article>
    </section>
    <aside>
      <h2>aside h2</h2>
      <ul>
        <li><a ref="external" href="#">aside ul li a</a></li>
        <li><a ref="external" href="#">aside ul li a</a></li>
        <li><a ref="external" href="#">aside ul li a</a></li>
        <li><a ref="external" href="#">aside ul li a</a></li>
        <li><a ref="external" href="#">aside ul li a</a></li>
      </ul>
    </aside>

CSS

/* this css is for presentation only */
* {border: 1px solid #B85353; }
html {background: #ffffff; -webkit-transform: skewX(15deg); }
body { text-align:center; margin: 5px auto; width: 600px; color: #D77D7D; background: #FAEFEF; margin-top: 10px;} 
html, header, nav, section, article, aside, hgroup, footer, h1, h2, ul, li, a { margin: 5px;}
a { text-decoration: none; color: #D77D7D; display: block }
nav ul { list-style: none;   }

/* semantic wrappers replace generic divs*/
header, nav, section, aside, footer { background: #F5DEDE; -webkit-transform: translateY(-10px) }  
/* first level nested elements inside semantic wrappers*/
header hgroup, nav ul, section article, aside h2, aside ul{ background: #F0CECE; -webkit-transform: translateY(-10px) } 
/* second level nested elements */
header hgroup h1, header hgroup h2, nav ul li, section article header, section article section, aside ul li { background: #EBBEBE; -webkit-transform: translateY(-10px) } 
/* third level nested elements */
nav ul li a, section article header h2, aside ul li a { background: #E6AEAE; -webkit-transform: translateY(-10px)  } 
 /* fourth level nested elements */
section article header h2 a { background: #E19D9D; -webkit-transform: translateY(-10px)  }

/*structure */
section#articles { width: 435px; float: left; }
article > header { margin-bottom: 10px; }
aside { float: left; width: 140px;}
footer { clear: both; padding: 20px;}
nav li { float: left; width: 100px; }
nav ul {height: 40px}