tRikSonic

HTML header Tag

Terakhir diperbarui : 24 Mei 2018 - 17.56

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>
background html
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 :
  1. Tidak bisa didalam element footer;
    Element footer dalam penggunaan dan penegasannya adalah sebagai catatan kaki dari konten dokumen yang berada diatas element footer tersebut.
  2. 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.
  3. 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

Chrome5
Safari4.1
Firefox4
Opera11.1
IE9
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox Android4
Opera Android11
iOs Safari4.2
Samsung InternetYa

Default CSS :

Browser yang support dengan element <header>, mempunyai nilai default :
header { 
    display: block;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.