Tag HTML <header>
Il tag <header> definisce l'intestazione di una pagina o sezione. Descrizione, attributi ed esempi.
Il tag <header> definisce il contenuto introduttivo di una pagina o di una sezione. Di solito contiene un logo, il titolo del sito, una casella di ricerca e link di navigazione come un menu <nav>.
Questo tag non introduce una nuova sezione nella struttura del documento. Un elemento <header> contiene comunemente un'intestazione (un elemento <h1>–<h6>) per la sezione circostante, ma un'intestazione non è obbligatoria.
Il tag <header> è uno degli elementi semantici HTML5. In un singolo documento è possibile utilizzare più tag <header>. Vengono comunemente inseriti all'interno di elementi <body>, <article> o <section>. L'elemento corrispondente per chiudere il contenuto è il tag <footer>.
Perché usare più header
Una pagina può avere più di un <header> perché gli header esistono a livelli diversi:
- Header a livello di pagina — figlio diretto di
<body>. Introduce l'intero documento: il logo del sito, la navigazione globale, un campo di ricerca. Di norma ne esiste uno solo. - Header a livello di sezione — un header inserito all'interno di un
<article>o di una<section>. Introduce solo quel blocco di contenuto, ad esempio il titolo, l'autore e la data di pubblicazione di un post del blog.
Si consideri una pagina indice di un blog. Il <header> a livello di pagina contiene il nome del sito e il menu principale. Ogni post è poi un <article> con il proprio <header> che riporta il titolo e i metadati di quel post. Entrambi sono header, ma descrivono ambiti diversi, il che aiuta browser, screen reader e motori di ricerca a comprendere la struttura.
Accessibilità e il landmark banner
Quando <header> è un figlio diretto di <body>, le tecnologie assistive lo espongono come landmark ARIA banner — la regione introduttiva dell'intero sito. Gli utenti di screen reader possono raggiungerlo direttamente, quindi non è necessario aggiungere role="banner" manualmente.
Questa associazione scompare quando <header> è annidato all'interno di un <article>, <section>, <main>, <aside> o <nav>. In tal caso l'header introduce solo la propria sezione e non viene trattato come il landmark banner. Un documento dovrebbe avere un solo landmark banner, quindi è opportuno mantenere un singolo <header> a livello di pagina come figlio di <body>.
Sintassi
Il tag <header> va in coppia. Il contenuto viene scritto tra il tag di apertura (<header>) e quello di chiusura (</header>).
Esempio del tag HTML <header>
Questa pagina ha due header: un header a livello di pagina all'interno di <body> e un header a livello di sezione all'interno di un <article>.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
padding: 0;
}
ul li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr>
</header>
<article>
<header>
<h2>The section title</h2>
<p>The text paragraph.</p>
</header>
</article>
</body>
</html>Esempio del tag HTML <header> con proprietà CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 2;
}
h2 {
text-align: center;
}
ul {
padding: 0;
}
ul li {
list-style-type: none;
display: inline-block;
margin-right: 10px;
}
a {
display: block;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
</li>
<li>
<a href="https://www.w3docs.com/learn-git.html">Learn Git</a>
</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr>
</header>
<main>
<h2>Get answers to your coding questions</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</main>
</body>
</html>Attributi
Il tag <header> supporta gli Attributi Globali e gli Attributi Evento. Non possiede attributi propri.
Aggiungere id e class per lo stile
<header id="main-header" class="site-header">
<h1>Page Title</h1>
</header>Tag correlati
<footer>— il corrispettivo di chiusura di<header>.<main>— il contenuto principale del documento.<nav>— link di navigazione, spesso inseriti all'interno di un header.<section>— una sezione autonoma che può avere il proprio header.<article>— contenuto autonomo che può avere il proprio header.