{"id":14538,"date":"2013-06-04T10:30:05","date_gmt":"2013-06-04T08:30:05","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=14538"},"modified":"2023-02-27T14:41:24","modified_gmt":"2023-02-27T14:41:24","slug":"document-outline-html5","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/document-outline-html5\/","title":{"rendered":"Document Outline: strutturare al meglio pagine HTML5"},"content":{"rendered":"

Con l\u2019arrivo degli elementi strutturali introdotti da HTML5<\/a>, ci \u00e8 finalmente stata data la possibilit\u00e0 di descrivere la struttura di una pagina web con tag standard, permettendoci di dare tregua ai nostri cari <div>.<\/p>\n

Con l\u2019aiuto di questi elementi, il nostro sito non solo giover\u00e0 di una semantica pi\u00f9 appropriata, ma se usati correttamente ci permetteranno anche di definire l\u2019outline del documento<\/strong> in modo logico.<\/p>\n

Per verificare i diversi esempi all\u2019interno dell\u2019articolo, vi suggerisco di utilizzare il seguente outliner online<\/a>.<\/p>\n

Che cos\u2019\u00e8 l\u2019outline di un documento?<\/h2>\n

L\u2019outline di un documento HTML<\/strong> \u00e8 un algoritmo che riesce a descrivere la struttura di una pagina come l\u2019indice 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\u2019occhio.<\/p>\n

Il concetto di oultine nelle pagine web<\/strong> gi\u00e0 esisteva in HTML4 stabilendo una gerarchia in base ai tag heading\u00a0(<h1>, <h2>, <h3>, <h4>, <h5>, <h6>).<\/p>\n

[code type=”markup”]<\/p>\n

Il lago di Como<\/h1>\n

Quel ramo del lago di Como, che volge a mezzogiorno,
\ntra due catene non interrotte di monti, tutto a seni e a golfi,
\na seconda dello sporgere e del rientrare di quelli, vien quasi a un tratto,
\ntra un promontorio a destra e un’ampia costiera dall’altra parte.<\/p>\n

Turismo<\/h2>\n

Territorio<\/h3>\n

Musei<\/h3>\n

Alloggi<\/h2>\n

[\/code]<\/p>\n

La struttura di esempio generer\u00e0 il seguente outline:<\/p>\n

1 Il lago di Como
\n1.1 Turismo
\n1.1.1 Territorio
\n1.1.2 Musei
\n1.2 Alloggi<\/p>\n

Per quanto questo approccio sia semplice \u00e8 piuttosto restrittivo poich\u00e8 siamo limitati a sei livelli e bisogna essere certi che il titolo abbia un valore di heading appropriato a livello globale della pagina.<\/p>\n

Outline con gli elementi di struttura<\/h2>\n

Con HTML5 l\u2019outline della pagina viene approfondito con i tag strutturali <section>, <article>, <aside> e <nav>. Rivediamo l\u2019esempio precedente:<\/p>\n

[code type=”markup”]<\/p>\n

Il lago di Como<\/h1>\n

Quel ramo del lago di Como, che volge a mezzogiorno,
\ntra due catene non interrotte di monti, tutto a seni e a golfi,
\na seconda dello sporgere e del rientrare di quelli, vien quasi a un tratto,
\ntra un promontorio a destra e un’ampia costiera dall’altra parte.<\/p>\n

\n

Turismo<\/h1>\n

Territorio<\/h2>\n

Musei<\/h2>\n<\/section>\n
\n

Alloggi<\/h1>\n<\/section>\n

[\/code]<\/p>\n

Generiamo l\u2019outline della pagina: noterete che sar\u00e0 esattamente come il precedente. I tag di struttura, infatti, definiscono delle sezioni dell\u2019elemento padre<\/strong>, facendo cosi ricadere le loro intestazioni sotto l\u2019intestazione 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.<\/p>\n

Per avere un outline corretto quando creiamo il nostro sito utilizzando i tag di struttura, ogni sezione deve contenere un\u2019intestazione<\/strong>: se aggiungiamo un tag di sezione senza utilizzare un titolo che lo caratterizzi, verr\u00e0 riportato nell\u2019outline come una sezione “Untitled”.<\/p>\n

[code type=”markup”]<\/p>\n