Some text some message..
Some text some message..
Some text some message..
Some text some message..

Elemen Header Pada HTML

Previous Page

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> :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo Menggunakan Elemen Header HTML</title>
6.     <style>
7.     ul li{
8.       display : inline;
9.       margin : 5px;
10.    }
11.    header {
12.    border : 1px solid #aaa;
13.    text-align : center;
14.    }
15.    </style>
16. </head>
17. <body>
18.    <header>
19.      <a href="?"><img src="logo.png" alt="logo"></a>
20.      <nav>
21.         <ul>
22.            <li><a href="?">Home</a>
23.            <li><a href="?">About</a>
24.            <li><a href="?">Copyright</a>
25.            <li><a href="?">Privacy</a>
26.         </ul>
27.      </nav>
28.    
29.    </header>
30.    <article>
31.      <p>Article's content here..</p>
32.    <article>
33.  </body>
34.  </html>
35. 
36. 

Jika dijalankan akan menghasilkan seperti gambar di bawah ini :

header tag

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<header>6.09.04.05.011.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 :

Nilai default pengaturan gaya untuk elemen <header> pada HTML :

header{
display : block;
}

facebooktwittergoogle pluswhatapplinkedinpinterest

Previous Page

Daftar Isi HTML