Header e piè di pagina
Attraverso gli elementi header e footer è possibile definire l'intestazione e il piè di pagina. Per definire l'intestazione, viene utilizzato l'elemento head. A proposito, non è necessariamente l'intestazione dell'intera pagina. Inoltre, è possibile utilizzare l'elemento head anche per contrassegnare l'intestazione di altri elementi come sezioni e articoli.
Attenzione: Non confondere header> con il noto elemento head, che definisce l'intestazione dei documenti HTML, includendo il titolo del documento, i richiami ai fogli di stile e ai JavaScript.
Per un intero documento, l'uso di header sarebbe il seguente:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Applicato a un elemento section, si avrebbe il seguente risultato:
<section>
<header>
<h1> Creare app Web (Parte 09): jQuery mobile (1)</h1>
<p> jQuery è senza dubbio uno dei framework JavaScript più conosciuti.</p>
</header>
<p>
Sulle pagine web "classiche" jQuery viene usato migliaia di volte. Progettato specificamente per l'uso in app Web, è stato creato il framework jQuery mobile (jQM). Questo framework vi aiuta a far sembrare la vostra app web un'applicazione reale in un batter d'occhio. Abbastanza per dare un'occhiata dettagliata a jQM.
</p>
<footer>
<p>Copyright di PSD-Tutorials.de</p>
</footer>
</section>Assicuratevi sempre che footer e header non contengano elementi aggiuntivi di header e footer.
Raggruppare le intestazioni
In relazione alle sezioni, entrano in gioco le intestazioni. Queste intestazioni possono essere inizialmente gli elementi classici h1 fino a h6. Tuttavia, in HTML5 è consentito anche l'elemento hgroup. All'interno di questi elementi hgroup possono essere contenute più intestazioni.
Prima di tutto, date un'occhiata a un classico documento HTML in cui la struttura "ordinaria" è definita utilizzando gli elementi hx.
<h1>
Libro
</h1>
<h2>
Capitolo 1
</h2>
<h2>
Capitolo 2
</h2>
<h3>
Sottocapitolo 2.1
</h3>
<h3>
Sottocapitolo 2.2
</h3>
<h2>
Capitolo 3
</h2>
Questa definizione comporta la seguente struttura:
Libro
Capitolo 1
Capitolo 2
Sottocapitolo 2.1
Sottocapitolo 2.2
Capitolo 3
Nel browser, tuttavia, le intestazioni non vengono rientrati.
Interessante è soprattutto l'utilizzo di hgroup in relazione ai testi giornalistici. Questi testi spesso consistono di un'intestazione divisa in due parti, composta dal titolo principale e dal sottotitolo. Un esempio chiarirà questo aspetto.
<hgroup> <h1>Cloud OS</h1> <h2>Il Web come sistema operativo</h2> </hgroup> <p>Qui inizia il contenuto dell'articolo …</p>
In questo esempio è evidente che il sottotitolo non introduce una sezione separata all'interno dell'articolo. Piuttosto, si tratta di una parte del titolo dell'articolo. Proprio questo può essere riassunto utilizzando l'elemento hgroup.
All'interno di hgroup sono ammessi gli elementi h1 fino a h6.
Il concetto Outline
Inoltre, in HTML5 entra in gioco il concetto di Outline, che tratta dell'interazione tra l'elemento section e i vari elementi hx. In questo concetto, come è consueto, le intestazioni vengono divise in diverse livelli utilizzando gli elementi h1 fino a h6. In questo caso, h1 corrisponde al livello superiore, mentre h6 rappresenta il livello più basso. Qui non vi è alcuna variazione rispetto al passato. Infatti, ora gli elementi hx possono essere definiti all'interno degli elementi section. E ogni volta che questo avviene, la numerazione riparte da zero, ma sempre con un livello inferiore.
Il concetto Outline può sembrare complicato nella specifica HTML5, ma l'idea alla base è piuttosto semplice. Infatti, attraverso di essa è possibile definire un sommario che rende la struttura del documento leggibile dalle macchine.
Anche in questo caso, un esempio:
<h1>
Capitolo 1
</h1>
<section>
<h1>
Capitolo 2
</h1>
<section>
<h1>
Capitolo 3
</h1>
</section>
</section>
Con il concetto di Outline di HTML5, si ottiene la seguente struttura:
1. Capitolo 1
- Capitolo 2
- Capitolo 3
- Capitolo 3
Un ulteriore esempio serve a chiarire l'effetto. Anche qui, inizialmente, il documento di partenza.
<section>
<h1>Installazione e Configurazione</h1>
<section>
<h2>Installazione</h2>
<p>Tutto ciò che riguarda l'installazione
</section> <section>
<h2>Configurazione</h2>
<p>Qui troverete tutto ciò che riguarda la configurazione
</section>
<aside>
<p>Interessanti libri sul tema...
</aside>
</section>
<footer>
<p>(c) by PSD-Tutorials.de
</footer>
</section>
La struttura risultante appare come segue:
1. Sezione (Installazione e Configurazione)
1.1 Sezione (Installazione)
1.2 Sezione (Configurazione)
1.3 Sezione (aside)
- Sezione (footer)
E un altro esempio:
<body>
<h1>Installazione e Configurazione</h1>
<h2>Installazione</h2>
<p>Tutto sul tema Installazione
...altro contenuto...
<section>
<h3>Requisiti</h3>
<p>Tutto riguardo ai Requisiti di Installazione
...altro contenuto...
<h3>Preparativi</h3>
<p>Tutto riguardo ai Preparativi
...altro contenuto...
<h2>Configurazione</h2>
<p>Tutto riguardo alla Configurazione
...altro contenuto...
</section>
</body>
La struttura del risultato è la seguente:
1. Installazione e Configurazione
1.1 Installazione
1.1.1 Requisiti
1.1.2 Preparativi
1.2 Configurazione
Quindi, la numerazione interna inizia sempre da 1. Gli unici elementi influenzati dal concetto di Outline sono:
• article
• aside
• nav
• section
Al contrario, gli elementi header e footer rimangono esclusi.
Si prega di notare che attualmente i browser non supportano ancora il concetto di Outline.
Tuttavia, sarà solo questione di tempo prima che i produttori di browser agiscano. I vantaggi del concetto di Outline sarebbero troppo grandi. Pensate ad esempio alle barre di navigazione generate automaticamente. Ma anche in questo caso: anche se attualmente i browser ignorano la strutturazione nel modo menzionato, dovreste già provare a strutturare logicamente i vostri documenti. In questo modo otterrete anche una certa sicurezza futura per i vostri siti web.
