Elementi per la strutturazione

Elementi per la strutturazione di una pagina HTML

Oggi è consuetudine tra i web deisgner progettare la struttura di un documento HTML avvalendosi degli elementi denominati div. L'utilizzo di elementi HTML5 strutturali dotati di una propria sematica permette di fare quanto segue:

• Migliorare la leggibilità e la mantenibilità del codice HTML. Infatti l'utilizzo di questi nuovi tag permette di avere chiara la struttura del documento sia all'autore dello stesso che ad altri sviluppatori web che ne stanno leggendo il sorgente.


• Facilitare la comprensione della struttura del documento HTML ai motori di ricerca che sono in grado di leggere adeguatamente i tag sematici e di indirizzarli. Ciò consente di ottenere per un sito una maggiore opportunità di trovare una corrispondenza nei risultati delle query di ricerca.

Vediamo quali sono i nuovi tag strutturali che possiamo impiegare per la costruzione delle pagine web sottolineando che essi permettono di ragruppare un blocco di codice HTML in una separata entità significativa a cui è anche possibile applicare un proprio stile di formattazione.

• <header>: utile per indicare un'area di intestazione, per una pagina o per una sezione, dove è possibile inserire il titolo del sito, il suo logo, il menu principale di navigazione, un modulo per l'effettuazione di ricerche e così via.


• <footer>: utile per indicare un'area di piè di pagina, per una pagina o una sezione, dove è possibile inserire l'autore della pagina o della sezione a cui si riferisce, notizie di copyright, regole per l'accettabilità, link a documenti a esso relativi, contratti di licenza e così via.


• <section>: utile per indicare un'area che rappresenta una generica sezione di un documento che raggruppa tematicamente del contenuto come i capitoli di un libro, dei pannelli a schede, le sezioni di una tesi e così via.


• <article>: utile per indicare un'area che rappresenta un blocco di testo distribuibile altrove come entità a sè stante. All'interno è possibile inserivi contenuti quali post per un forum, un articolo per una rivista, un testo per un blog e per qualsiasi fonte di pubblicazione.


• <nav>: utile per indicare un'area deputata al contenimento dei link che consentono la navigazione tra le pagine principali o più importanti del relativo sito.


• <aside>: utile per indicare un'area il cui contenuto è tangenzialmente relativo ai contenuti di altre aree ma che è comunque da essi separato. Esempi possono essere aree deputate all'inserimento di citazioni, note nel testo, banner pubblicitari, link di navigazione secondari e così via.


• <details> e <summary>: utili per specificare un'area (tag <details>), contenente delle informazioni aggiuntive oppure altri elementi di markup, che può essere resa visibile o invisibile, dotata di un'intestazione che funge da etichetta o da titolo (tag <details>) e di un eventuale simbolo (per esempio, un piccolo triangolo rivolto verso destra ►)