SectioningContent

by giacal

HTML

<div id="container">
<header>
    <h1>HTML5 blog</h1>
    <nav>
        <h1>Link di testa</h1>
        <ul>
            <li><a href="/home">home</a></li>
            <li><a href="/chi-siamo">chi siamo</a></li>
            <li><a href="/gallery">gallery</a></li>
        </ul>
    </nav>
</header>

<article>
    <header>
       <hgroup>
        <h1>Titolo dell'articolo</h1>
        <h2>Sottotitolo dell'articolo</h2>
       </hgroup>   
        <p class="info">
            scritto da <a href="http://sandropaganotti.com">Sandro Paganotti</a> il
            03 Ottobre 2012
        </p>
    </header>
    <p> 
        Testo dell'articolo...
    </p>    
    <aside>
        <h1>dietro le quinte</h1>:
        <p> 
            Qui parliamo di come l'articolo e' stato steso, delle 
            interviste necessarie, ecc...
        </p>
    </aside>  
    <footer>
        <p> 
            Categoria: <a href="/reportage">reportage</a> <br/>
            Tags: <a href="/tag1">tag1</a>, <a href="/tag2">tag2</a>
        </p>            
    </footer>
</article>

<section id="altri_articoli">
    <h1>Altri articoli</h1>
    <article>
        <header>                         
            <h3>Titolo dell'articolo</h3>
            <p class="data">01 Ottobre 2012</p>
        </header>
        <p> 
            Altro testo dell'articolo... 
            <a href="/articolo1">continua a leggere</a>               
        </p>
    </article>
    <article>
        <header>
            <h3>Altro articolo</h3>
            <p class="data">20 Settembre 2012</p>
        </header>
        <p> 
            Altro testo dell'articolo... 
            <a href="/articolo1">continua a leggere</a>               
        </p>
    </article>
</section>
    
<aside id="blogroll">
    <h1> Blogroll </h1>
    <ul>
        <li><a href="http://html5.it">sito amico</a></li>
        <li><a href="http://html5.it">altro sito</a></li>
    </ul>   
</aside>
    
<footer>    
    <p>
        Realizzato da Sandro...