HTML 5 introduce una novità particolare alle versioni precedenti. Gia dalle versioni XHTML, gli sviluppatori si sono abituati a creare strutture delle pagine attraverso un uso massiccio dei tag <div> che hanno preso il posto di tabelle e frame, con benefici ineguagliabili per la manutenzione e leggibilità del codice.
Il sito risulta così diviso in tante aree ed è facile trovarla in mezzo al codice e leggerla o modificarla. Con HTML5 vengono introdotti dei tag detti “semantici”, ovvero che col loro nome descrivono direttamente quello che fanno, ai gia esistenti come form e table. Non servono piuttosto a fare una vera e propria grafica o effetto visibile, ma quanto a creare una suddivisione di porzione note del sito. Nella figura sotto riportata una idea di questi tag e di che aree della nostra pagina dovrebbero e potrebbero descrivere. Credo che il lettore possa riscontrare con facilità il design medio dei siti web somiglianti alla figura.
Ovviamente possiamo creare dei contenitori DIV generici ed aggiungere un id o una classe a ciascuno di questi elementi. Il loro uso, ribadiamo, non è obbligatorio e del resto non tutti i siti hanno questa impostazione gerarchica. Possiamo ad esempio avere:
<div id=”nav”>…</div> che diventa col tag semantico <nav> … </nav>
oppure
<div id=”footer”></div> che diventa <footer> … </footer>
I div manterrebbero il senso del medesimo tag semantico senza differenze. Un buon allenamento? Usarli visto che fanno parte di un nuovo standard e, come spesso accade, browser e spider di google premiano l’uso degli standard. Altro vantaggio è il poter usare altre classi CSS da associare al contenitore semantico. Ad. esempio:
<section id=”articolo”>Questa è una news</section>
<section class=”pubblicita”>Comprami! </section>
<section class=”rssfeed”>Dicono d noi </section>
Un elenco completo e dettagliato anche se non completamente utilizzato. In grassetto quelli che secondo me vale la pena ricordare ed utilizzare:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Si rimanda ai prossimi articoli per vedere qualche esempio.
Ultima modifica 6 Febbraio 2022