Come creare un header in HTML
Racchiudi la parte alta della pagina (logo, nome del sito, menu principale) in un elemento <header>. È un riquadro a blocco senza un aspetto predefinito, quindi bastano poche righe di CSS per trasformarlo in una barra:
margin-inline-end: auto sul logo spinge il menu e il pulsante all'altra estremità della barra. Togli l'elemento <style> e hai ancora un header: è il tag a renderlo tale, non lo sfondo scuro.
header, head e h1 a confronto
Tre nomi simili che fanno lavori diversi:
| Elemento | Dove | Visibile | Quanti |
|---|---|---|---|
<head> | Direttamente dentro <html>, prima di <body> | No: contiene <title>, <meta>, <link> | Esattamente uno |
<header> | Dentro <body> | Sì: contenuto introduttivo di una pagina o sezione | Quanti vuoi |
Da <h1> a <h6> | Ovunque in <body> | Sì: un titolo | Quanti vuoi |
Il <head> qui sotto imposta il titolo della pagina che il browser mostra nella scheda. Tutto quello che vedi nell'anteprima viene da <body>:
Un header contiene spesso un titolo, ma non è obbligatorio, e un titolo non ha bisogno di un header intorno.
Header dentro gli articoli
<header> introduce l'articolo o la sezione più vicini, non solo la pagina. Un elenco di post di un blog in cui ogni post ha il suo header è valido e comune:
Per i lettori di schermo, solo l'header a livello di pagina (uno che non si trova dentro article, aside, main, nav o section) diventa il landmark banner. Gli header degli articoli sono semplici gruppi, quindi non ti ritrovi con più banner.
Header fisso (sticky)
position: sticky tiene l'header in alto mentre il contenuto sotto scorre. Scorri dentro il riquadro qui sotto:
Tre dettagli lo fanno funzionare: top: 0 (sticky non fa nulla senza uno scostamento), un colore di sfondo (altrimenti le righe si vedono attraverso) e z-index perché il contenuto posizionato non gli venga disegnato sopra. In una pagina vera il riquadro che scorre è la pagina stessa, quindi l'header sta direttamente in <body>.
Anche un header con position: fixed resta fermo, ma esce dal flusso della pagina, quindi il contenuto gli scivola sotto e ha bisogno di padding in alto. Sticky mantiene il suo spazio nel layout.
Cosa può stare in un header
Un header può contenere quasi qualsiasi contenuto: titoli, un'immagine del logo, un <nav>, un form di ricerca, un pulsante. Non può contenere un altro <header> o un <footer>, e non può stare dentro un <footer>, un <address> o un altro <header>.
<header>
<a href="/"><img src="logo.svg" alt="Acme home"></a>
<nav aria-label="Main">...</nav>
<form role="search">...</form>
</header>
Quando il logo è un link alla home page, il suo testo alt deve dire dove porta il link ("Acme home"), perché è quello che annuncia un lettore di schermo.
Errori comuni
- Confondere
<header>con<head>. I metadati vanno in<head>; il contenuto visibile mai. - Usare
<header>per ogni titolo. Un titolo da solo non ha bisogno di un header intorno. Usa<header>quando c'è un gruppo di contenuti introduttivi. - Un header sticky senza sfondo. Il testo della pagina ci scorre attraverso in modo visibile. Imposta un
background. - Sticky che non resta fermo. Un antenato con
overflow: hiddenooverflow: autodiventa il riquadro di scorrimento per sticky, quindi l'header resta fermo dentro quel riquadro (o per niente). Controlla gli antenati. - Mettere il menu del sito in un
<div>dentro l'header. Usa<nav>così chi usa un lettore di schermo può saltarci direttamente.
Domande frequenti
Cos'è il tag header in HTML?
<header> è un elemento semantico per il contenuto introduttivo: il logo e il menu di un sito in cima alla pagina, o il titolo e la firma in cima a un articolo. È un normale riquadro a blocco senza stile predefinito.
Che differenza c'è tra head e header in HTML?
<head> è la parte invisibile del documento con il <title>, i tag <meta> e i link ai fogli di stile, e ce n'è esattamente uno. <header> è contenuto visibile dentro <body>, e una pagina può averne diversi.
Una pagina può avere più di un elemento header?
Sì. Una pagina di solito ha un header del sito, e ogni <article> o <section> può avere il suo <header> per titolo e metadati. Solo un header che non si trova dentro article, aside, main, nav o section vale come banner della pagina per i lettori di schermo.
Il nav va dentro l'header?
Può starci, e spesso ci sta quando il menu principale è in cima alla pagina. Anche mettere <nav> fuori da <header> è valido; scegli quello che corrisponde al tuo layout.
Come faccio a tenere l'header in alto mentre si scorre?
Dagli position: sticky; top: 0; più un colore di sfondo e uno z-index, così il contenuto scorre sotto. Sticky funziona solo finché il genitore dell'header è più alto dell'header, e un antenato con overflow: hidden gli impedisce di restare fermo rispetto alla pagina.
