Mengenal Tata Letak Blog & Website: Header, Sidebar, Konten, Footer

Mengenal Tata Letak Blog & Website: Header, Konten, Sidebar, dan Footer

Kalau kamu sering membuka situs atau blog, pasti pernah melihat tampilannya yang terbagi menjadi beberapa bagian. Masing-masing bagian ini punya nama khusus, fungsi yang jelas, dan bisa diatur susunannya sesuai kebutuhan. Memahami struktur ini sangat penting jika kamu ingin mengelola, mengubah tampilan, atau menambahkan fitur pada blog sendiri. Berikut penjelasan lengkap beserta contoh kodenya.

Gambar: Contoh susunan bagian-bagian dasar pada sebuah halaman web

1. Header (Bagian Atas)

Header adalah bagian paling atas dari halaman web. Biasanya berisi logo, nama situs, dan menu navigasi utama. Fungsinya sebagai identitas situs dan memudahkan pengunjung menjelajahi halaman lain.

Contoh kode sederhana:

<!-- Bagian Header -->
<header style="background: #008151; color: white; padding: 18px; text-align: center; border-radius: 6px;">
  <h2>ABM Garage</h2>
  <p>Berbagi ilmu servis motor & dunia balap</p>
  <nav>
    <a href="/" style="color: white; margin: 0 10px; text-decoration: none;">Beranda</a>
    <a href="/p/tutorial.html" style="color: white; margin: 0 10px; text-decoration: none;">Tutorial</a>
    <a href="/p/kontak.html" style="color: white; margin: 0 10px; text-decoration: none;">Kontak</a>
  </nav>
</header>

2. Konten Utama / Postingan

Bagian ini adalah inti dari halaman. Di sinilah artikel, tulisan, gambar, dan informasi utama ditampilkan. Ukurannya biasanya paling besar agar nyaman dibaca dan menjadi fokus utama pengunjung.

Contoh kode sederhana:

<!-- Bagian Konten Utama -->
<main style="max-width: 750px; margin: 20px auto; padding: 20px; background: #ffffff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);">
  <h3>Judul Artikel Kamu</h3>
  <p>Di sini tuliskan isi artikel, penjelasan, panduan, atau informasi yang ingin dibagikan kepada pembaca.</p>
  <p>Bisa ditambahkan gambar, daftar, atau kode lain sesuai kebutuhan tulisan.</p>
</main>

3. Sidebar (Bagian Samping)

Sidebar terletak di sisi kiri atau kanan konten utama. Isinya informasi tambahan seperti daftar artikel populer, kotak pencarian, kategori tulisan, atau profil singkat. Berfungsi melengkapi informasi di bagian utama.

Contoh kode sederhana:

<!-- Bagian Sidebar -->
<aside style="width: 260px; padding: 15px; background: #f8f9fa; border-radius: 6px; float: right; margin: 20px 0;">
  <h4>Artikel Populer</h4>
  <ul style="padding-left: 20px; font-size: 15px;">
    <li><a href="#" style="color: #2d3748; text-decoration: none;">Cek Tegangan Aki Motor</a></li>
    <li><a href="#" style="color: #2d3748; text-decoration: none;">Cara Servis Karburator</a></li>
    <li><a href="#" style="color: #2d3748; text-decoration: none;">Penyebab Lampu Redup</a></li>
  </ul>
</aside>

4. Footer (Bagian Bawah)

Footer adalah bagian paling bawah halaman. Biasanya berisi informasi hak cipta, tautan ke halaman kebijakan, kontak, atau alamat situs. Berfungsi sebagai penutup halaman yang rapi dan informatif.

Contoh kode sederhana:

<!-- Bagian Footer -->
<footer style="clear: both; margin-top: 30px; padding: 15px; background: #2d3748; color: white; text-align: center; border-radius: 6px;">
  <p>© 2026 ABM Garage. Semua Hak Dilindungi.</p>
</footer>

Kesimpulan

Secara sederhana, struktur dasar halaman web terdiri dari empat bagian utama yang saling melengkapi. Dengan mengenal nama dan fungsinya, kamu akan lebih mudah mengatur tampilan, menambahkan fitur, atau memperbaiki susunan blog agar lebih rapi dan nyaman dikunjungi.

blogabm | abmgarage.com