Apa itu header dan footer pada html?

Question

Kita akan membuat header tetap berada di atas dan footer tetap berada di bawah jika posisi content di-scroll seperti pada gambar di atas. Walaupun content hanya berisi beberapa baris namun header dan footer tetap di posisinya.

Table of Contents Show

Share this:
Menyukai ini:
Global AttributesAtribut Secara Global (Keseluruhan)
Event AttributesAtribut event (Peristiwa)
ExampleContoh HTML <header> element
Contoh Lengkap
Apa itu header dalam HTML?
Apa yang dimaksud dengan footer pada HTML?
Apa yang dimaksud dengan elemen header?
Apa itu footer di CSS?

Pada bagian div class fixed-header diberikan CSS properti top:0 untuk membuat header pada posisi atas layar dan pada bagian div class fixed-footer diberikan CSS properti bottom:0 untuk membuat footer pada posisi bawah layar. Untuk membuat posisi header dan footer tetap di posisinya, maka kita berikan CSS properti position: fixed; Walaupun halaman web ini di scroll namun posisi header tetap berada di atas dan footer tetap berada di bawah. Sebagai testing scroll halaman web diberikan CSS properti line-height: 100px; supaya halaman lebih panjang untuk scroll.

Berikut coding CSS dan HTML selengkapnya.

        body {
            margin: 0;
            padding: 0;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
            display: inline-block;
        }

        nav a:hover {
            background-color: red;
        }

        .fixed-header,
        .fixed-footer {
            width: 100%;
            position: fixed;
            background: #333;
            padding: 5px;
            color: #fff;
        }

        .fixed-header {
            top: 0;
        }

        .fixed-footer {
            bottom: 0;
            text-align: center;
        }


        .content {
            width: 100%;
            padding-top: 60px;
            padding-bottom: 50px;
        }

        .content p {
            line-height: 100px;
            padding: 10px;
        }
    



    <div class="fixed-header">
        
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Products</a>
            <a href="#">Contact Us</a>
        
    </div>
    <div class="content">
        <h1>Membuat Fixed Header dan Footer dengan CSS</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.
            Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum
            scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet
            elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus
            nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum
            neque porttitor. Integer faucibus ligula.
        </p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh,
            facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae
            est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum
            viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique,
            accumsan nunc eu, hendrerit tellus.
        </p>
    </div>
    <div class="fixed-footer">
        Copyright &copy; 2021
    </div>

Selamat mencoba. Happy coding…

Twitter
Facebook

Menyukai ini:

Suka Memuat...

Terkait

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

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

0,

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

1, atau <header> lainnya.

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

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

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

Apa itu header dalam HTML?

Heading atau lebih tepatnya TAG Heading merupakan TAG khusus yang disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web. TAG Heading secara default ditampilkan oleh browser dengan ukuran lebih besar dan lebih tebal (bold) dari teks biasa.

HTML tag elemen footer merupakan elemen struktural yang digunakan untuk mengidentifikasi bagian catatan kaki sebuah halaman, dokumen, seksi, ataupun artikel. Elemen footer biasanya diletakkan pada posisi bagian paling bawah suatu halaman HTML.

Apa yang dimaksud dengan elemen header?

Header adalah bagian atas dari sebuah website. Biasanya berisi nama situs, logo dan deskripsinya. Header berfungsi untuk menampilkan identitas utama dari sebuah situs.

Posisi footer sendiri berada di bagian bawah tampilan halaman sebuah website. Seperti contoh footer responsive mobile css yang bisa Anda lihat di blog ini. Fungsi dari widget Footer itu sendiri adalah sebagai catatan kaki dari bagian tampilan website.

kode html