Elemento header in HTML 5
La presente è la traduzione dell' articolo - The header element - pubblicato originariamente su http://html5doctor.com/the-header-element/. La traduzione viene riportata con il consenso dell' autore Richard Clark.
Recentemente pare sia aumentato un certo interesse nei confronti dell' HTML 5 da parte di molti webmaster. Nelle specifiche HTML 5 possiamo notare, infatti, l'introduzione di nuovi tag tra cui l' elemento <header>, del quale ce ne occuperemo in questo articolo. Si affronterà il caso in cui deve o non deve essere utilizzato, se necessario o meno. Cominciamo.
Attualmente, in una pagina xHTML si scrive
<div id="header">
nella stragrande maggioranza dei siti web che si visita. Adesso con HTML 5 non è più necessario perchè si potrebbe dare un valore più semantico all'elemento <header>.
Che cosa rappresenta l'elemento?
Secondo le specifiche l' elemento header rappresenta
una introduzione o aiuti per la navigazione. L' elemento header, solitamente, racchiude i titoli (da H1 ad H6 oppure il tag hgroup), ma può contenere anche altri tipi di contenuti quali una tabella, un modulo di ricerca oppure il logo del sito web.
E' importante notare come il tag <header> non crea una nuova sezione ma è esso stesso la parte iniziale del sito. Si deve anche fare attenzione a non confondere <header> con la parte di codice HTML <head>. Sono da considerarsi due cose distinte e separate.
La corretta posizione dell' elemento <header>
Ovviamente, la sua posizione corretta dovrebbe essere all' inizio della pagina. Si potrebbe cominciare una pagina con un codice simile al seguente:
<header>
<h1>Titolo principale della pagina</h1>
</header>
Una cosa importante da notare è che non si è limitati ad utilizzarne solo uno per pagina. Si possono anche avere più tag <header>, ognuna delle quali sarà l' intestazione di quella parte del documento. Potremmo avere un codice simile a quello che segue:
<header>
<h1>Titolo princilale della pagina</h1>
</header>
<article>
<header>
<h1>Titolo secondo articolo</h1>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
Si noti l' uso di due tag <h1> nel pezzo di codice riportato. Questo è perfettamente valido in HTML 5 (ed HTML 4) ma potrebbero esserci ripercussioni sull' accessibilità. Sarebbe bene utilizzare il tag con molta cautela se si dovessero inserire molti articoli in una pagina. Questo lo si potrà vedere in un prossimo post.
Cosa inserire nell' elemento <header>
Adesso sappiamo che è possibile avere più elementi <header> in una pagina ma quale codice deve essere scritto affinchè possa essere validato? In breve, <header> normalmente dovrebbe racchiudere (ma non è una restrizione) uno dei tag per contraddistingere un titolo (<h1> - <h6>). E' possibile anche includere l' elemento <hgroup>, del quale ce ne occuperemo uin un altro articolo (si legga, in proposito, la specifica per il tag hgroup). <header> può racchiudere altri tipi di contenuto all'interno del flusso del documento, quale una tabella, un logo oppure un form di ricerca. A seguito di una recente modifica apportata alle specifiche, è del tutto legittimo avere l' elemento <nav> all' interno di <header>.
Formattare l' elemento <header>
Un brevissimo appunto da fare riguarda l' interpretazione della maggior parte dei browser riguardo al tag <header>; deve essere utilizzato come elemento a livello di blocco, dichiarandolo nel codice CSS:
header {display:block;}
Effettivamente è necessario dichiarare il codice appena riportato sia per questo che per gli altri elementi di blocco per l' HTML 5. La modalità in cui i browsers visualizzeranno tali elementi, verrà subito messa a conoscenza, in modo tale da scrivere il codice nel foglio di stile. Nel frattempo, leggere gli aggiornamenti che vengono scritti nel wiki.
Conclusioni
In sintesi, l' elemento <header> aggiunge un ottimo valore semantico per delimitare la parte iniziale di una sezione.
Approfondimenti
| < Prec. | Succ. > |
|---|
