Struktur Dasar Halaman Web: Header, Body, Footer

Ketika kamu membuka sebuah halaman web, mungkin yang terlihat hanya desain menarik, warna-warna yang serasi, atau tulisan yang enak dibaca. Tapi di balik tampilannya, setiap halaman web memiliki struktur dasar yang hampir selalu sama: Header, Body, dan Footer.

Memahami struktur ini sangat penting, terutama jika kamu ingin membuat website sendiri, terlibat dalam pengembangan web, atau sekadar ingin memahami bagaimana halaman internet bekerja. Artikel ini akan membahas secara sederhana apa itu header, body, dan footer lengkap dengan fungsi dan perannya dalam sebuah halaman web.

Secara teknis, setiap halaman web dibangun menggunakan bahasa HTML (Hypertext Markup Language), dan ditata menggunakan CSS (Cascading Style Sheets). Struktur dasar HTML itu seperti kerangka rumah, dan tiga bagian utama yang selalu ada adalah:

• Header (bagian atas)

• Body (isi utama)

• Footer (bagian bawah)

Struktur ini membantu browser menampilkan konten secara berurutan dan rapi. Selain itu, pembagian ini juga memudahkan developer mengelola, mendesain, dan mengoptimasi tampilan maupun fungsi website.

Header adalah bagian paling atas dari sebuah halaman web. Biasanya, di bagian ini kamu akan menemukan elemen-elemen penting yang bersifat tetap di setiap halaman website.

Fungsi Header:

• Menampilkan identitas website: seperti logo, nama brand, atau tagline.

• Navigasi utama: menu-menu seperti “Beranda”, “Tentang Kami”, “Kontak”, dan lainnya.

• Call to Action: tombol daftar, login, atau tombol utama lainnya.

• Desain konsisten: biasanya header muncul sama persis di semua halaman agar pengguna tidak bingung.

Contoh Elemen dalam Header:

• Logo atau gambar brand

• Menu navigasi (navbar)

• Ikon media sosial

• Tombol pencarian atau login

Dalam kode HTML, header biasanya ditulis seperti ini:

Body adalah inti dari sebuah halaman web. Semua konten yang ingin disampaikan ke pengunjung — baik berupa teks, gambar, video, formulir, hingga tombol interaktif — berada di dalam bagian ini.

Fungsi Body:

• Menyampaikan informasi utama: artikel, produk, layanan, berita, dll.

• Menampilkan konten visual: gambar, grafik, ilustrasi, infografik.

• Berinteraksi dengan pengguna: formulir kontak, tombol beli, kolom komentar, dan lainnya.

• Menjadi tempat halaman dinamis: konten bisa berubah tergantung halaman yang dibuka.

Elemen yang Umum Digunakan dalam Body:

• Judul dan paragraf

• Gambar dan video

• Tabel dan daftar

• Tombol dan tautan

• Konten dinamis dari database (untuk website interaktif)

HTML-nya biasanya ditulis seperti ini:

Footer terletak di bagian paling bawah dari halaman web. Meski sering diabaikan, bagian ini sebenarnya sangat penting karena berisi informasi penutup atau tambahan yang relevan.

Fungsi Footer:

• Memberikan navigasi tambahan: seperti sitemap, kategori, link penting.

• Menampilkan informasi legal: hak cipta, disclaimer, syarat dan ketentuan.

• Kontak dan lokasi: alamat kantor, email, atau peta lokasi.

• Media sosial dan newsletter: ikon untuk mengikuti akun sosial media atau form langganan.

Elemen Umum dalam Footer:

• Copyright

• Link ke halaman kebijakan privasi

• Logo partner

• Informasi kontak

• Ikon sosial media

Contoh HTML-nya:

• Memudahkan Navigasi
  Pengunjung website bisa mengenali bagian-bagian penting tanpa harus berpikir ulang setiap kali membuka halaman baru.

• Konsistensi Desain
  Website dengan struktur rapi dan konsisten lebih terlihat profesional dan mudah digunakan.

• SEO dan Aksesibilitas
  Mesin pencari seperti Google juga membaca struktur halaman. Struktur yang jelas akan membantu website kamu lebih mudah ditemukan.

• Responsif di Semua Perangkat
  Struktur yang baik memudahkan desain responsif — tampilan yang menyesuaikan diri dengan layar HP, tablet, maupun desktop.

Memahami struktur dasar halaman web bukan hanya penting bagi programmer, tapi juga bagi siapa pun yang ingin membangun kehadiran online yang profesional. Dengan mengetahui peran dari header, body, dan footer, kamu bisa membuat website yang lebih terorganisir, ramah pengguna, dan lebih mudah berkembang ke depannya.

Entah kamu membangun website sendiri atau bekerja sama dengan developer, memahami struktur ini akan membuat proses kerja jadi jauh lebih efisien dan terarah.