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:

codice:
<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?

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