Page 44 - Guida tascabile HTML5

<p>La domotica a cui non potete rinunciare</p>
</header>
<p>...</p>
</article>
</section>
</main>
Potete notare che i tag fin qui descritti permettono di creare la struttura del

contenuto in modo lineare, interagendo tra loro: la forza del markup semantico è
l’estrema flessibilità che permette di descrivere qualsiasi tipo di relazione tra i

blocchi di contenuto. Proseguendo con gli esempi, ecco il possibile markup di una

semplice ricetta, in cui il tag <section> permette di separare in modo logico il

contenuto:

<main>
<h1>La ricetta del giorno<h1>
<article>
<header>
<h1>Fragole e gelato</h1>
<p>Una preparazione veloce e sempre gustosa</p>
</header>
<section>
<h1>Descrizione</h1>
<p>Questa ricetta garantisce sempre un ottimo risultato,
ed è perfetta per le calde giornate estive.</p>
</section>
<section>
<h1>Ingredienti</h1>
<ul>
<li>Fragole</li>
<li>Gelato fiordilatte</li>
<li>Limone</li>
<li>Zucchero</li>
</ul>
</section>
<section>
<h1>Preparazione</h1>
<p>In una ciotola prepara le fragole lavate e tagliate.
Aggiungi zucchero e limone, mescola e lascia riposare
qualche minuto.<br>
Prepara nelle coppette due palline di gelato e versa
alcuni cucchiai di fragole.</p>
</section>
</article>
</main>

NOTA Negli esempi i titoli sono identificati sempre con il tag <h1> poiché la gerarchia
del contenuto è definita attraverso l’utilizzo dei tag <article> e <section>. I titoli all’interno
dei tag <section> sono implicitamente di un livello inferiore rispetto al titolo della pagina
nel tag <h1> posto subito dopo <main>. Potete utilizzare la gerarchia da <h1> a <h6> per

dettagliare in modo ancora più preciso il contenuto.

Ricollegandoci infine all’esempio del paragrafo precedente, ecco come
potrebbe strutturarsi il markup di un articolo con una sezione dedicata ai