Struttura errata o possibile?

[Scream]

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ì

+-------------------+
|                   | <------ header con menù principale
+--------------+----+
|              |    |
|              |    | <------ corpo a sinistra con carosello
|              |    |         menù secondario a destra con accordion
+--------------+----+
|                   | <------ footer con menù (uguale a quello principale)
+-------------------+

<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

[morocarlo]

io ci metterei un aside per il contenuto a destra

[ldetomi]

Non l'ho provato e non ho molta esperienza diretta sui nuovi tag ma, a naso, tale codice funziona se lo visualizzi con un browser compatibile (anche se ti porti dietro i div contenitori, che sono virtualmente inutili con questi browser), mentre se lo visualizzi con un browser obsoleto vedrai correttamente incasellati i vari oggetti della pagina ma i tag html5 sconosciuti verranno semplicemente printati a video come fossero semplice testo......

[Scream]

Quindi? io vorrei un layout semanticamente corretto, ma cross-browser
Se metto <div> e poi all'interno i tag <header> ecc?
In pratica i nuovi tag serviranno solo per la semantica, mentre i <div> per il layout grafico

[ldetomi]

Ho capito cosa vuoi fare ma non funziona come pensi tu!!!
Al momento l'unica soluzione è quella di scrivere il sito in html5 puro e poi aggiungere alcune librerie JavaScript come Modernizr che di fatto pre-processano il sito e tasformano i tag html5 in corrispondenti DIV per i browser obsoleti.... vedi tu se il gioco vale la candela....

[Scream]

Il mio obiettivo è far capire, soprattutto a google ed ai vari motori, la pagina.
Da quanto ho capito io, Panda è particolarmente "intelligente" e se vede una struttura comprensibile la indicizza meglio.

[ldetomi]

Lo scopo può non essere malvagio... ammetto che io stesso sono interessato all'html5 e anzi... trovi un mio post in proposito proprio in questo forum negli ultimi giorni.... :-) Ma se vuoi mantenere la compatibilità, devi passare da JS, non c'è scelta purtroppo....

[morocarlo]

float: left;
nel corpo... e così si allinea come vuoi te. Aggiungici anche una classe clear dopo l'header e dopo la sidebar (<div class="clear"></div>) dove su clear ci aggiungi il classico clear:both;

[ldetomi]

Originariamente inviato da morocarlo
float: left;
nel corpo... e così si allinea come vuoi te. Aggiungici anche una classe clear dopo l'header e dopo la sidebar (<div class="clear"></div>) dove su clear ci aggiungi il classico clear:both;

Scusa ma..... che c'entra con la domanda?!!?!?