HTML header tag | belajar <header> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML header tag. Tutorial dan panduan mengenai element <header>...</header> yang digunakan sebagai konten pengantar (introductory). Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <header>.

Deskripsi
Penjelasan HTML header

HTML <header> element merepresentasikan konten pengantar, pembukaan atau navigasi yang terdiri dari deretan link.

Dalam penggunaannya, <header> element dapat berisi element heading (<h1>-<h6>) tapi tidak diperlukan, daftar isi (table of contents), sebuah logo, form pencarian dan lain sebagainya.

<header> element bukanlah sebuah konten pemisah (sectioning content) karena ia bukanlah konten yang terdiri dari headings dan footers, karena jelas sekali dalam sebuah <header> tidak boleh terdapat element <header> lain.

Elemen <header> tidak boleh digunakan sebagai anak element (descendant) dari <address>, <footer>, atau <header> lainnya.

Dalam sebuah dokumen, dapat ditemukan lebih dari satu <header> element.

Global Attributes
Atribut Secara Global (Keseluruhan)

<header> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<header> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <header> element

Contoh 1

<header> yang ditulis di dalam <body> element, sehingga dapat ditulis informasi yang berlaku pada dokumen secara keseluruhan.

HTML 
<body>
  <!-- header pertama -->
  <header>
    <h1>apaCara Blog</h1>
    <nav>
      <ul>
        <li>
          <a href="#">Artikel Terbaru</a>
        </li>
        <li>
          <a href="#">Artikel Populer</a>
        </li>
        <li>
          <a href="#">Hubungi Kami</a>
        </li>
      </ul>
    </nav>
  </header>
</body>
Contoh 2

<header> ditulis didalam <article> element. Isinya berkenaan dengan catatan kepala dan informasi yang berkaitan dengan article tersebut.

HTML 
<article>
  <!-- header kedua -->
  <header>
    <h2>Mengenal Web Standard</h2>
    <p>Ditulis oleh: dul,
      <time datetime="2015-03-07T13:00">07 Maret 2015, pkl. 13:00</time>
    </p>
  </header>
  <p>Apa itu Web Standard? Web Standard adalah teknologi yang dibangun oleh
  W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web
  agar memiliki standar yang dapat dinikmati oleh semua kalangan dan dapat
  diakses di semua
  <em>device</em>(smartphone, tablet, desktop dan lain sebagainya).</p>
</article>

Jika Contoh 1 dan Contoh 2 digabungkan, maka hasilnya dapat dilihat pada demo editor dibawah ini:

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Demo HTML header tag</title>
  </head>

  <body>
    <!-- header pertama -->
    <header>
      <h1>apaCara Blog</h1>
      <nav>
        <ul>
          <li>
            <a href="#">Artikel Terbaru</a>
          </li>
          <li>
            <a href="#">Artikel Populer</a>
          </li>
          <li>
            <a href="#">Hubungi Kami</a>
          </li>
        </ul>
      </nav>
    </header>

    <article>
      <!-- header kedua -->
      <header>
        <h2>Mengenal Web Standard</h2>
        <p>Ditulis oleh: dul,
          <time datetime="2015-03-07T13:00">07 Maret 2015, pkl. 13:00</time>
        </p>
      </header>
      <p>Apa itu Web Standard? Web Standard adalah teknologi yang dibangun oleh
        W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web
        agar memiliki standar yang dapat dinikmati oleh semua kalangan dan dapat
        diakses di semua
        <em>device</em>(smartphone, tablet, desktop dan lain sebagainya).</p>
    </article>
  </body>

</html>
SHARE
Previous Article Next Article