header | Codingku

Tag <header> mewakili konten pengantar dari sectioning content atau elemen sectioning root.

Sectioning Content adalah konten yang mendefinisikan ruang lingkup heading dan footer seperti <article>, <aside>, <nav>, <section>.

Header dapat berisi judul, subjudul, form pencarian, logo, navigasi, dll.

Syntax

Tag <header> ditulis seperti <header></header> dengan konten header diletakkan diantara tag pembuka dan penutup.

Seperti

<header>
	Konten Header ...
</header>

Contoh Sederhana

<!DOCTYPE html>
<title>Example</title>
<style>
  .example header,
  .example article,
  .example footer,
  .example main,
  .example nav {
    border: 1px solid orange;
    padding: 3px;
    margin: 3px;
    width: 50%;
  }

  .example header {
    background: #FDF7D3;
  }
</style>
<div class="example">
  <header>Header...</header>
  <main>
    Main...
    <article>Article...</article>
    <article>Article...</article>
    <article>Article...</article>
  </main>
  <footer>Footer...
    <nav>Nav...</nav>
  </footer>
</div>

Document Heading

<!DOCTYPE html>
<title>Example</title>
<style>
  .example header,
  .example article,
  .example footer,
  .example main,
  .example nav {
    border: 1px solid orange;
    padding: 3px;
    margin: 3px;
    width: 80%;
  }

  .example header {
    background: #FDF7D3;
  }
</style>
<div class="example">
  <header>
    <h1>Mindfulness Articles</h1>
  </header>
  <main>
    Main...
    <article>
      Mindfulness article 1...
    </article>
    <article>
      Mindfulness article 2...
    </article>
    <article>
      Mindfulness article 3...
    </article>
  </main>
  <footer>Footer...
    <nav>Nav...</nav>
  </footer>
</div>

Article Heading

<!DOCTYPE html>
<title>Example</title>
<style>
  .example header,
  .example article,
  .example footer,
  .example main,
  .example nav {
    border: 1px solid orange;
    padding: 3px;
    margin: 3px;
    width: 80%;
  }

  .example header {
    background: #FDF7D3;
  }

  .example header>p {
    font-weight: bold;
  }
</style>
<div class="example">
  <main>
    Main...
    <article>
      Article...
      <header>
        <h1>Become a Zen Master Today</h1>
        <p>Five experts share their knowledge for attaining enlightenment.</p>
      </header>
      <p>In our recent journey through South East Asia, we...</p>
    </article>
  </main>
  <footer>Footer...
    <nav>Nav...</nav>
  </footer>
</div>

Logo

<!DOCTYPE html>
<title>Example</title>
<style>
  .example header,
  .example article,
  .example footer,
  .example main,
  .example nav {
    border: 1px solid orange;
    padding: 3px;
    margin: 3px;
    width: 80%;
  }

  .example header {
    background: #FDF7D3;
  }
</style>
<div class="example">
  <header>
    <img src="/images/logo-hijacket-solid.png" alt="Logo">
    <input type="search" name="q"><input type="submit" value="Search">
  </header>
  <main>
    Main...
    <article>
      Article...
    </article>
  </main>
  <footer>Footer...
    <nav>Nav...</nav>
  </footer>
</div>

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <header> dengan pengaturan CSS:

header {
  display: block;
}