Vorrei creare un layout che necessariamente ha bisogno di div (per il layout e compatibilità con i vari browser), ma sfruttando la semantica HTML5. È possibile questa struttura? In particolare si possono inserire <header> all'interno di <div> o ci sono controindicazioni? Inoltre nel layout dovrò inserire un menù con effetto accordion che farà scorrere i <div> in <section> e conterrà dei link a pagine interne. È opportuno considerarlo un <aside> o lo considero un semplice <div>?
In pratica il layout sarà graficamente così
codice:
+-------------------+
| | <------ header con menù principale
+--------------+----+
| | |
| | | <------ corpo a sinistra con carosello
| | | menù secondario a destra con accordion
+--------------+----+
| | <------ footer con menù (uguale a quello principale)
+-------------------+
codice:
<div id="page">
<div id="testata">
<header>
<hgroup>
<h1>Titolo</h1>
<h2>Sottotitolo</h2>
</hgroup>
<nav>
<ul>[*]Voce1[*]Voce2[*]Voce3[/list]
</nav>
</header>
</div>
<div id="corpo">
<section>
<div id="home">
<header>
<h1>Titolo</h1>
</header>
</div>
<div id="tip_mese1">
<header>
<hgroup>
<h1>Titolo</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>
Descrizione</p>
</div>
<div id="tip_mese2">
<header>
<hgroup>
<h1>Titolo</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>
Descrizione</p>
</div>
</section>
</div>
<div id="prodotti">
<ul>[*]Catagoria 1
<ul>[*]Sottocategoria 1[*]Sottocategoria 2[/list]
[*]Catagoria 2
<ul>[*]Sottocategoria 1[*]Sottocategoria 2[/list]
[/list]
</div>
<footer>
<nav>
<ul>[*]Voce1[*]Voce2[*]Voce3[/list]
</nav>
</footer>
</div>
Spero sia chiaro e che possiate aiutarmi