L’header, o intestazione della pagina, è la parte superiore del layout di una pagina web che, solitamente, si ripete identica all’interno di tutte le pagine dello stesso sito. All’interno dell’header, solitamente, trovano posto il logo del sito e la navbar (cioè il menu di navigazione che contiene i link alle principali sezioni/pagine del sito web).
Di seguito uno screenshot dell’header di questo sito nel momento in cui scriviamo:
Com’è fatto l’header di un sito web?
L’header di un sito web può avere un aspetto differente a seconda del design del sito web e/o del template adottato nel caso si tratti di CMS.
L’header si trova nella porzione alta della pagina e solitamente – rispetto all’asse verticale – è il primo elemento visibile di una pagina web (spesso coincide col margine superiore della finestra del browser).
Non è infrequente, nel web-design moderno, che l’header della pagina resti sempre in primo piano nonostante l’utente effettui lo scrolling dei contenuti. In questo caso di parla di fixed header o sticky header.
Cosa contiene l’header della pagina?
Solitamente l’header di un sito web contiene una serie di elementi tipici di cui è possibile fare un elenco:
- il logo del sito web
- la navbar (menu di navigazione primario)
- alcuni link a funzionalità importanti come, ad esempio, il link per accedere ad aree private o per effettuare la registrazione
- eventuali pulsanti call to action (come ad esempio il pulsante "contattaci", "registrati" o "acquista")
- nel caso di siti di commercio elettronico, solitamente, contiene il link al carrello della spesa
In linea di massima possiamo dire che nell’header sono contenuti, oltre al riferimento grafico al brand, tutti i principali elementi di navigazione del sito.
Header della pagina e markup HTML
Il linguaggio HTML contempla due tag che potrebbero venire alla mente quando si parla di header. Si tratta dei tag <head> e <header>.
Il primo tag – <head> – è utilizzato per gestire le intestazioni del documento HTML (si noti che ho parlato di intestazioni del documento e non intestazione della pagina) cioè per ospitare i meta-tag, gli script, i fogli di stile ed altri elementi strutturali e "invisibili" all’utente.
Il secondo tag – <header> – è stato introdotto da HTML5 per contenere le "sezioni introduttive" quindi può essere utilizzato come contenitore per l’header della pagina web ma non è obbligatorio che ciò accada (molti siti, ad esempio, gestiscono l’header incapsulandolo all’interno di comuni tag <div> opportunamente stilizzati).
In altre parole è necessario non fare confusione quando si parla di header nell’ottica del web-design in quanto ciò non attiene strettamente all’utilizzo di alcun tag HTML a prescindere dal suo nome!
