organizzare un elenco a liste o a div?

[reversi]

Ciao a tutti,
chiedo un parere per lo sviluppo di una pagina.

In un punto del sito, all'interno di un blocco, dovrei esporre l'anteprima di 3 news, ciascuna delle quali è composta da titolo, sottotitolo, anteprima della news.

E' piu corretto organizzare la struttura in questo modo, sfruttando i div h1 e p:

<div>

        <div>
        <h1>titolo</h1>
        

sottotitolo</p>
        

anteprima</p> 
       </div>
        
        <div>
        <h1>titolo</h1>
        

sottotitolo</p>
        

anteprima</p> 
       </div>
        
        <div>
        <h1>titolo</h1>
        

sottotitolo</p>
        

anteprima</p> 
       </div>

</div>

oppure in questo, sfruttando ul, li, h1 e span?

<div>
    <ul>[*]
        <h1>titolo</h1>
        <span>sottotitolo</span>
        <span>anteprima</span> 
       [*]
        <h1>titolo</h1>
        <span>sottotitolo</span>
        <span>anteprima</span> 
       [*]
        <h1>titolo</h1>
        <span>sottotitolo</span>
        <span>anteprima</span> 
       [/list]
</div>

Devo valutare pro e contro della prima o seconda opzione, tenendo conto di:
validazione della pagina, ottimizzazione codice per i motori, possibilità di formattazione grafica dei blocchi, multimedialità della pagina su diversi supporti (browser web, palmare, iphone ecc.)

Grazie per i vostri eventuali pareri,
Buon lavoro,
Simone

[fcaldera]

1) essendo titoli di pari livello userei <h2> piuttosto che <h1> (che a rigor di logica dovrebbe essere unico per la pagina, come il titolo di un libro)

2) il sottotitolo potrebbe essere descritto con il tag [i] (enfatizzi il sottotitolo) piuttosto che con

(non è un paragrafo) o con <span> (il sottotitolo perderebbe di significato)

3) l'anteprima della notizia va bene anche se descritto con il tag

però personalmente valuterei l'utilizzo del tag <q> (quote) se fosse adeguatamente supportato in IE, oppure farei

<q>...</q></p>


il div va bene per racchiudere i tre elementi sopracitati

[reversi]

ciao Fcaldera,

pertanto tu opteresti per una soluzione di questo tipo?:

<h1>intestazione raccoglitore</h1>
<div>

        <div>
        <h2>titolo</h2>
        sottotitolo
        

anteprima</p> 
       </div>
        
        <div>
        <h2>titolo</h2>
        sottotitolo
        

anteprima</p> 
       </div>        
        
        <div>
        <h2>titolo</h2>
        sottotitolo
        

anteprima</p> 
       </div>

</div>

con l'opzione dell'eventuale aggiunta dei tag <q>, se correttamente supportati dai differenti browser.

Grazie mille per le segnalazioni. Proseguo a scrivere il codice

Simone