Penjelasan html <header>:
Element HTML
header adalah satu dari beberapa tag dokumen semantik baru yang diperkenalkan pada HTML5.Element ini digunakan untuk mendefinisikan bagian pembuka atau pengantar pada sebuah element atau sebagai kepala untuk bagian-bagian konten.
Dalam penerapan pada HTML, elemen
<header> sangat cocok jika didalamnya terdapat element <h1>-<h6>
Element
<header> dapat digunakan untuk seluruh halaman (penggunaan yang paling umum), tetapi juga dapat digunakan sebagai header untuk element <article> atau bagian lain pada dokumen html.Dalam penulisan html, element ini diperbolehkan ditulis lebih dari satu element
<header>Catatan : Element ini tidak bisa di tulis pada element
<footer>, <address> , dan juga didalam element <header> itu sendiri.Maksud dari catatan diatas adalah sebagai berikut :
-
Tidak bisa didalam element
footer;
Elementfooterdalam penggunaan dan penegasannya adalah sebagai catatan kaki dari konten dokumen yang berada diatas element footer tersebut. -
Tidak bisa didalam element
address;
Elementaddressdigunakan hanya untuk menyampaikan informasi kontak, misal penulis artikel, jadi jika element<header>berada didalam element address, hal tersebut menjadi sangat tidak tepat. -
Tidak bisa didalam element
headeritu sendiri;
Element<header>, bukan element yang bersifat grouping dan bersarang atau bercabang layaknya elementdiv
Walaupun ketiga point diatas tidak diikuti, browser masih bisa membacanya dengan baik
Tetapi dalam penulisan html yang baik dan benar, hal tersebut tetaplah salah.
Tetapi dalam penulisan html yang baik dan benar, hal tersebut tetaplah salah.
Contoh penerapan html <header>
<header>
<h1>Heading 1</h1>
</header>
<header>
<h2>Heading 2</h2>
</header>
Contoh 2 penerapan html <header>
<header>
<nav>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>etc ....</a></li>
</ul>
</nav>
<h2><a href="#">Lorem Ipsum</a></h2>
<p>Lorem Ipsum...</p>
</header>
Contoh 3 penerapan html <header>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<header id="header-atas">
<nav>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>etc ....</a></li>
</ul>
</nav>
<div class="clear"></div>
<h1><a href="#">Lorem Ipsum</a></h1>
<p>Lorem Ipsum</p>
</header>
<div class="container">
<div class="bagian-kiri">
<div class="batas-tepi">
<article>
<header><h2>Judul Artikel 1</h2></header>
<div>
<p>Lorem ipsum dolor sit amet ....</p>
</div>
</article>
<article>
<header><h2>Judul Artikel 2</h2></header>
<div>
<p>Lorem ipsum dolor sit amet ....</p>
</div>
</article>
<article>
<header><h2>Judul Artikel 3</h2></header>
<div>
<p>Lorem ipsum dolor sit amet ....</p>
</div>
</article>
<article>
<header><h2>Judul Artikel 4</h2></header>
<div>
<p>Lorem ipsum dolor sit amet ....</p>
</div>
</article>
<article>
<header><h2>Judul Artikel 5</h2></header>
<div>
<p>Lorem ipsum dolor sit amet ....</p>
</div>
</article>
</div>
</div><!-- bagian kiri tutup-->
<div class="bagian-kanan">
<div class="batas-tepi">
<aside id="sidebar">
<section>
<header><h3>Popular Post</h3></header>
<ul>
<li>Popular post 1</li>
<li>Popular post 2</li>
<li>Popular post 3</li>
<li>Popular post 4</li>
<li>Popular post 5</li>
<li>Popular post 6</li>
<li>Popular post 7</li>
<li>Popular post 8</li>
<li>Popular post 9</li>
<li>Popular post 10</li>
</ul>
</section>
<section>
<header><h3>Arsip Blog</h3></header>
<ul>
<li>Januari</li>
<li>Februari </li>
<li>Maret</li>
<li>April</li>
<li>Mei</li>
<li>Juni</li>
<li>Juli</li>
<li>Agustus</li>
<li>September</li>
<li>Oktober</li>
<li>Nopember</li>
<li>Desember</li>
</ul>
</section>
</aside>
</div>
</div><!-- bagian kanan tutup-->
</div><!-- container tutup -->
<div class="clear"></div>
<div id="area-bawah">
<section class="footer-widget-1">
<div class="batas-tepi">
<div class="widget">
<header><h3>Widget blog</h3></header>
<div>konten widget</div>
</div>
</div>
</section>
<section class="footer-widget-2">
<div class="batas-tepi">
<div class="widget">
<header><h3>Widget blog</h3></header>
<div>konten widget</div>
</div>
</div>
</section>
<div class="clear"></div>
<footer>Powered by : example.com</footer>
</div>
</body>
</html>
Global Attributes:
Element
<header> mencakup Global Attributes HTML.
Event Attributes:
Element
<header> mencakup Event Attributes HTML.
Browser Support :
Desktop
| Chrome | 5 |
|---|---|
| Safari | 4.1 |
| Firefox | 4 |
| Opera | 11.1 |
| IE | 9 |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | 4 |
| Opera Android | 11 |
| iOs Safari | 4.2 |
| Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<header>, mempunyai nilai default :header {
display: block;
}