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:
Indice
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. La sua progettazione deve tenere conto dell’esperienza utente e della coerenza visiva.
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 si parla di fixed header o sticky header. Utilizzare un header fisso può migliorare l’usabilità del sito, consentendo un accesso rapido alle funzioni di navigazione.
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!
Esempio pratico di Header in HTML e CSS
Un esempio comune di come potrebbe essere strutturato un header in HTML e CSS è il seguente:
<header>
<div class="logo">
<img src="logo.png" alt="Logo del sito">
</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">Chi Siamo</a></li>
<li><a href="#services">Servizi</a></li>
<li><a href="#contact">Contatti</a></li>
</ul>
</nav>
</header>In questo esempio, creiamo una sezione di intestazione che include un logo e una barra di navigazione. Gli stili di base per rendere questo header funzionale e attraente potrebbero essere definiti in CSS come segue:
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f8f9fa;
}
.logo img {
max-width: 100px;
}
nav ul {
list-style: none;
display: flex;
gap: 15px;
}
nav a {
text-decoration: none;
color: #333;
}
nav a:hover {
color: #007bff;
}Questa implementazione assicura che l’header sia responsivo e facile da navigare, utilizzando Flexbox per un layout flessibile.
Header Sticky: Un’ottima soluzione per la navigazione
Un header sticky, ovvero ancorato alla cima della pagina, consente di mantenere sempre a disposizione il menu di navigazione anche durante lo scrolling. Questo accorgimento migliora notevolmente l’esperienza dell’utente, poiché non è necessario tornare in cima per poter accedere alle varie sezioni del sito. Per implementare un sticky header, è possibile utilizzare il seguente codice:
header {
position: sticky;
top: 0;
z-index: 1000;
}In questo esempio, position: sticky consente all’header di rimanere visibile in cima alla pagina mentre si scorre verso il basso. L’attributo top: 0 specifica che l’header deve rimanere ancorato al margine superiore della finestra del browser.
In conclusione, l’header rappresenta un elemento fondamentale della navigazione di un sito web, in grado di influenzare l’usabilità e l’estetica. Con le giuste tecniche di design e implementazione, come l’uso di un header sticky, puoi migliorare significativamente l’esperienza utente del tuo sito.
