HTML header Tag

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;
Element footer dalam penggunaan dan penegasannya adalah sebagai catatan kaki dari konten dokumen yang berada diatas element footer tersebut.
Tidak bisa didalam element address;
Element address digunakan 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 header itu sendiri;
Element <header>, bukan element yang bersifat grouping dan bersarang atau bercabang layaknya element div

Walaupun ketiga point diatas tidak diikuti, browser masih bisa membacanya dengan baik
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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<header>
  <h1>Heading 1</h1>
</header>

<header>
  <h2>Heading 2</h2>
</header>

</body>
</html>

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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

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

</body>
</html>

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>

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

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
a {
 text-decoration:none;
}
.clear {
 clear : both;
}
#header-atas {
    overflow: hidden;
    background: beige;
}
#header-atas nav {
    overflow: hidden;
    background: #4bbd80;
}
#header-atas nav a {
    color: #fdfdfd;
}
#header-atas ul {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#header-atas li {
    float: left;
    margin: 5px 10px;
}
#header-atas h1, 
#header-atas p {
    text-align: center;
    margin: 10px 0px;
}
article,#sidebar {
    padding: 10px;
    border: 1px solid #bbbbbb;
    margin: 20px 0px;
    border-radius: 5px;
}

/*footer widget*/
#area-bawah {
    background: #312f2f;
    color: #c3c3c3;
    padding: 0 10px;
    overflow: hidden;
}
#area-bawah .widget {
    padding: 10px;
    border: 1px solid #3c3a3a;
    margin: 15px 0px;
    border-radius: 5px;
}
/*footer*/
#area-bawah footer {
    padding: 10px;
    text-align: center;
    background: black;
    margin-left: -10px;
    margin-right: -10px;
    font-size: small;
}
/*responsive area - 768px */
@media (min-width:768px){
 .bagian-kiri{
     float : left;
        width : 65%;
    }
 .bagian-kanan{
     float : left;
        width : 35%;
    }
    .batas-tepi {
     padding-left :10px;
        padding-right :10px;
    }
    /*footer bawah*/
    .footer-widget-1,.footer-widget-2 {
     float : left;
        width : 50%;
        padding : 0px;
    }
}

//javascript

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;
}

Judul	`HTML header Tag`
Label	`HTML`
Diposting pada	`28 November 2016 - 19:49`
Diperbaharui pada	`24 Mei 2018 - 17:56`

Penjelasan html `<header>`:

Contoh penerapan html `<header>`

Contoh 2 penerapan html `<header>`

Contoh 3 penerapan html `<header>`

Global Attributes:

Event Attributes:

Browser Support :

`Desktop`

`Mobile`

Default CSS :

Post Info

HTML ELEMENT

Populer Post

Arsip Blog

Label

HTML header Tag

Penjelasan html <header>:

Contoh penerapan html <header>

Contoh 2 penerapan html <header>

Contoh 3 penerapan html <header>

Global Attributes:

Event Attributes:

Browser Support :

Desktop

Mobile

Default CSS :

Post Info

Populer Post

Arsip Blog

Label

Penjelasan html `<header>`:

Contoh penerapan html `<header>`

Contoh 2 penerapan html `<header>`

Contoh 3 penerapan html `<header>`

`Desktop`

`Mobile`