L’header è l’intestazione di un sito web, un elemento ricorrente che compare in alto nella home page e spesso si ripete in tutte le pagine, riportando alcune informazioni essenziali per l’utente
L’header, o intestazione della pagina, è la parte superiore di un sito. Può essere considerato il biglietto da visita, l’imprinting che un visitatore ha appena approda su una pagina web. Lo si può paragonare ad una vetrina di un negozio, che attira l’attenzione dei passanti per strada. L’header è importante perché trasmette in modo immediato l’immagine del sito. E, allo stesso, tempo, offre alcune informazioni essenziali. Vediamo quali sono e come realizzarlo al meglio.
Cos’è l header di un sito?
L’Header è l’elemento tipografico collocato in alto nella homepage di un sito web. In altri casi (come sarebbe opportuno) si ripete in ogni pagina del sito stesso. L’header contiene il logo del brand e rispecchia i colori aziendali. Spesso è “cliccabile” e permette di procedere con la navigazione. Le intestazioni della pagina possono essere sticky (o fissi): significa che, se l’utente effettua uno scrolling verso il basso, l’header resta comunque in primo piano. La scelta dipende dalla tipologia del sito web. L’aspetto varia inoltre in base al design del sito o del template selezionato, se si utilizza un CMS. In ogni caso, L’intestazione deve caricarsi rapidamente, dunque dev’essere “leggera” e semplice.
A cosa serve l header?
L’intestazione è un elemento centrale di ogni sito web, sia da desktop, sia da mobile. Essa contiene infatti informazioni determinanti per aiutare gli utenti a capire su quale sito si trovano e come muoversi al suo interno. Inoltre, può aiutare ad ottimizzare il portale in un’ottica SEO. L’header veicola il messaggio principale del sito web e del brand. Deve avere una funzione precisa, specialmente se è una toolbar completa, ma anche se è una semplice icona.
Cosa contiene?
L’intestazione può contenere diversi elementi, a secondo dal tipo di sito e delle caratteristiche dell’azienda. Tra i più diffusi ricordiamo:
- nome dell’azienda
- contatti o link ai social media
- logo
- slogan
- menu di navigazione
- elementi di branding
- call to action (ad esempio “contattaci”)
- informazioni su un prodotto specifico
- offerte speciali
- promozioni
- cambio lingua
- link verso un accesso ad aree personali o per registrarsi, oppure al carrello nel caso di e-commerce.
Si tratta di un elemento molto versatile da sfruttare in base alle necessità. Come il footer, va organizzato secondo una logica precisa, scegliendo gli elementi più utili per la navigazione degli utenti.
Markup HTML
L’header è realizzato in HTML. E il linguaggio HTML prevede due tag relativi all’header. Parliamo dei tag <head> e <header>. Che cosa significano? Il tag <head> si usa per la gestione della intestazione del documento HTML, ovvero per l’inserimento dei meta-tag, dei fogli di stile, degli script e di altri elementi non visibili all’utente, ma che costituiscono la struttura del sito web. Il tag <header>, invece, contiene le sezioni introduttive e si utilizza come “contenitore” per l’header di una pagina web. Non è però indispensabile, in quanto alcuni siti gestiscono l’header collocandolo all’interno di altri tag.
