Con l’arrivo degli elementi strutturali introdotti da HTML5, ci è finalmente stata data la possibilità di descrivere la struttura di una pagina web con tag standard, permettendoci di dare tregua ai nostri cari <div>.
Con l’aiuto di questi elementi, il nostro sito non solo gioverà di una semantica più appropriata, ma se usati correttamente ci permetteranno anche di definire l’outline del documento in modo logico.
Per verificare i diversi esempi all’interno dell’articolo, vi suggerisco di utilizzare il seguente outliner online.
Che cos’è l’outline di un documento?
L’outline di un documento HTML è un algoritmo che riesce a descrivere la struttura di una pagina come l’indice di un libro: avremo quindi i capitoli principali che potrebbero comporsi a loro volta da altri sottocapitoli, con una gerarchia tra gli elementi visibile a colpo d’occhio.
Il concetto di oultine nelle pagine web già esisteva in HTML4 stabilendo una gerarchia in base ai tag heading (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>).
[code type=”markup”]
Il lago di Como
Quel ramo del lago di Como, che volge a mezzogiorno,
tra due catene non interrotte di monti, tutto a seni e a golfi,
a seconda dello sporgere e del rientrare di quelli, vien quasi a un tratto,
tra un promontorio a destra e un’ampia costiera dall’altra parte.
Turismo
Territorio
Musei
Alloggi
[/code]
La struttura di esempio genererà il seguente outline:
1 Il lago di Como
1.1 Turismo
1.1.1 Territorio
1.1.2 Musei
1.2 Alloggi
Per quanto questo approccio sia semplice è piuttosto restrittivo poichè siamo limitati a sei livelli e bisogna essere certi che il titolo abbia un valore di heading appropriato a livello globale della pagina.
Outline con gli elementi di struttura
Con HTML5 l’outline della pagina viene approfondito con i tag strutturali <section>, <article>, <aside> e <nav>. Rivediamo l’esempio precedente:
[code type=”markup”]
Il lago di Como
Quel ramo del lago di Como, che volge a mezzogiorno,
tra due catene non interrotte di monti, tutto a seni e a golfi,
a seconda dello sporgere e del rientrare di quelli, vien quasi a un tratto,
tra un promontorio a destra e un’ampia costiera dall’altra parte.
Turismo
Territorio
Musei
Alloggi
[/code]
Generiamo l’outline della pagina: noterete che sarà esattamente come il precedente. I tag di struttura, infatti, definiscono delle sezioni dell’elemento padre, facendo cosi ricadere le loro intestazioni sotto l’intestazione principale, indipendentemente dal loro livello gerarchico. In questo modo, potremo potenzialmente includere infinite gerarchie tra gli elementi e nel contempo realizzare una pagina web semanticamente corretta.
Per avere un outline corretto quando creiamo il nostro sito utilizzando i tag di struttura, ogni sezione deve contenere un’intestazione: se aggiungiamo un tag di sezione senza utilizzare un titolo che lo caratterizzi, verrà riportato nell’outline come una sezione “Untitled”.
[code type=”markup”]
[/code]
In questo esempio, ci saranno due Untitled Section, uno (il più interno) per la mancanza dell’intestazione del tag <aside>, l’altro per l’intero documento, in quanto anche il tag <html> rappresenta una sezione. Se non desideriamo dare un’intestazione a un particolare elemento, ci è sufficiente nasconderlo con i CSS.
Vi suggerisco la lettura di questo articolo di Smashing Magazine per capire come utilizzare al meglio i tag di sezione.
Perchè preoccuparsi dell’outline di una pagina web?
Definire correttamente l’outline della pagina è vantaggioso da diversi punti di vista. Uno di questi è senza dubbio legato all’accessibilità, permettendo a dispositivi ausiliari, come gli screen reader, di dare la possibilità di navigare la pagina esattamente nei punti desiderati. In secondo luogo, l’outline sarà utile per il SEO del nostro sito e le nostre pagine saranno più facilmente gestite dai motori di ricerca. Si potrà inoltre contare su una struttura che è stata correttamente impostata, dandoci una solida base per sviluppi futuri.
