Referensi Belajar HTML header tag. Tutorial dan panduan mengenai element <header>...</header> yang digunakan sebagai konten pengantar (introductory). Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <header>.
HTML <header> element merepresentasikan konten pengantar, pembukaan atau navigasi yang terdiri dari deretan link.
Dalam penggunaannya, <header> element dapat berisi element heading (<h1>-<h6>) tapi tidak diperlukan, daftar isi (table of contents), sebuah logo, form pencarian dan lain sebagainya.
<header> element bukanlah sebuah konten pemisah (sectioning content) karena ia bukanlah konten yang terdiri dari headings dan footers, karena jelas sekali dalam sebuah <header> tidak boleh terdapat element <header> lain.
Elemen <header> tidak boleh digunakan sebagai anak element (descendant) dari <address>, <footer>, atau <header> lainnya.
Dalam sebuah dokumen, dapat ditemukan lebih dari satu <header> element.
<header> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
<header> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
<header> yang ditulis di dalam <body> element, sehingga dapat ditulis informasi yang berlaku pada dokumen secara keseluruhan.
<body> <header> <h1>apaCara Blog</h1> <nav> <ul> <li> <a href="#">Artikel Terbaru</a> </li> <li> <a href="#">Artikel Populer</a> </li> <li> <a href="#">Hubungi Kami</a> </li> </ul> </nav> </header> </body>
<header> ditulis didalam <article> element. Isinya berkenaan dengan catatan kepala dan informasi yang berkaitan dengan article tersebut.
<article> <header> <h2>Mengenal Web Standard</h2> <p>Ditulis oleh: dul, <time datetime="2015-03-07T13:00">07 Maret 2015, pkl. 13:00</time> </p> </header> <p>Apa itu Web Standard? Web Standard adalah teknologi yang dibangun oleh W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web agar memiliki standar yang dapat dinikmati oleh semua kalangan dan dapat diakses di semua <em>device</em>(smartphone, tablet, desktop dan lain sebagainya).</p> </article>
Jika Contoh 1 dan Contoh 2 digabungkan, maka hasilnya dapat dilihat pada demo editor dibawah ini:
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Demo HTML header tag</title> </head> <body> <header> <h1>apaCara Blog</h1> <nav> <ul> <li> <a href="#">Artikel Terbaru</a> </li> <li> <a href="#">Artikel Populer</a> </li> <li> <a href="#">Hubungi Kami</a> </li> </ul> </nav> </header> <article> <header> <h2>Mengenal Web Standard</h2> <p>Ditulis oleh: dul, <time datetime="2015-03-07T13:00">07 Maret 2015, pkl. 13:00</time> </p> </header> <p>Apa itu Web Standard? Web Standard adalah teknologi yang dibangun oleh W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web agar memiliki standar yang dapat dinikmati oleh semua kalangan dan dapat diakses di semua <em>device</em>(smartphone, tablet, desktop dan lain sebagainya).</p> </article> </body> </html>
Berikut adalah keterangan mengenai dukungan (support) dari beberapa browser.
| Element | Chrome | Safari | Firefox | Opera | IE |
| <header> | 5 | 4.1 | 4.0 | 11.10 | 9.0 |
CSS untuk element <header> yang akan diberlakukan ketika awal inisial.
header { display: block; }