HTML5 Semantic markup example

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

by SebastianPataneMasuelli

HTML

<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>

<footer>
    footer
</footer>

CSS

/* this css is for presentation only */
* {border: 0px solid #B85353; -webkit-box-shadow: rgba(184,83,83,0.3) -5px 5px 5px;  }
html {background: #ffffff; -webkit-transform: skewX(15deg); font-family: Helvetica; font-size: 12px; line-height: 16px}
body { text-align:center; margin: 5px auto; width: 600px; color: #D77D7D; background: #FAEFEF; margin-top: 50px;} 
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); cursor: arrow;  }

a:hover { background: #E19D9D; -webkit-transform: skewX(-15deg) translateY(-30px) ; padding: 5px; opacity: .6;}
/*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}