Elemen <header> merupakan salah satu elemen dalam HTML5 yang mempunyai tujuan khusus atau arti semantik tertentu. Elemen <header> berfungsi header bagi seluruh halaman HTML ataupun sebagai header bagi seksi-seksi tertentu seperti header bagi seksi elemen <article>.
Elemen <header> pada halaman HTML diletakkan pada bagian paling atas. Bagian ini dapat berisi logo, nama website, dan menu navigasi yang terdiri atas deretan tautan / link. Jika pengunjung memasuki menu tersebut, akan diarahkan menuju halaman lain yang masih dalam ruang lingkup halaman web tersebut.
Penulisan elemen <header> dibuka dengan tag <header> dan ditutup dengan tag </header>. Elemen <header> merupakan tag baru pada HTML5 sama halnya seperti elemen <footer>. Jika elemen <header> diletakkan pada awal halaman namun elemen <footer> diletakkan pada akhir halaman.
Berikut contoh pemgunaan elemen <header> :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Latihan Menggunakan Elemen Header HTML</title>
<style>
ul li{
display : inline;
margin : 5px;
}
header {
border : 1px solid #aaa;
text-align : center;
}
</style>
</head>
<body>
<header>
<a href="?"><img src="logo.png" alt="logo"></a>
<nav>
<ul>
<li><a href="?">Home</a>
<li><a href="?">About</a>
<li><a href="?">Copyright</a>
<li><a href="?">Privacy</a>
</ul>
</nav>
</header>
<article>
<p>Article's content here..</p>
<article>
</body>
</html>
Jika dijalankan akan menghasilkan seperti gambar di bawah ini :
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <header> | 6.0 | 9.0 | 4.0 | 5.0 | 11.0 |
Global Attributes :
Tag <header> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <header> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar(onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
header{
display : block;
}
Halaman Terkait
 | Elemen Footer Pada HTML html |
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
