Pola Layout Halaman

Chapter sebelumnya merancang struktur satu halaman dari nol. Pada praktiknya, pembagian wilayah antarhalaman di web tidak acak: halaman-halaman dengan kebutuhan serupa mengikuti pola yang mirip. Chapter ini mengenalkan pola layout yang paling sering dijumpai, memetakan setiap pola ke elemen semantik HTML, lalu menuliskan dua pola utama sebagai markup yang utuh. Fokus kita tetap pada peran wilayah — penataan visual dua kolom ke atas dan sebagainya adalah pekerjaan CSS yang dibahas terpisah.

Pola yang Berulang di Web #

Empat pola berikut mencakup sebagian besar halaman yang kita temui sehari-hari:

Pola holy grail kita cukup kenali namanya: pola tiga kolom klasik yang penataannya membutuhkan CSS tingkat lanjut. Untuk saat ini, tiga pola pertama dapat kita tuliskan dengan struktur HTML murni — urutan elemennya yang menentukan pola, bukan gaya visualnya.

Pola Satu Kolom untuk Artikel #

Pola satu kolom adalah bentuk paling sederhana: seluruh konten mengalir dari atas ke bawah dalam satu jalur baca. Halaman artikel, dokumentasi, dan materi belajar seperti yang sedang kita baca memakainya:

<header>
  <h1>Judul Artikel</h1>
</header>
<main>
  <article>
    <p>Isi artikel mengalir dalam satu jalur baca.</p>
  </article>
</main>
<footer>
  <p>&copy; 2025 example.com</p>
</footer>

Kesederhanaan inilah kekuatannya: tidak ada wilayah yang bersaing memperebutkan perhatian, sehingga pembaca fokus pada satu konten. Setiap kali ragu memilih pola, mulailah dari satu kolom — pola lain dapat menyusul bila kontennya memang menuntut.

Pola Header-Konten-Sidebar untuk Blog #

Blog memiliki kebutuhan tambahan: di samping daftar artikel, pengunjung sering mencari tautan cepat seperti artikel populer. Kebutuhan sekunder semacam itu masuk ke aside, dan polanya menjadi header-konten-sidebar. Simpan file berikut sebagai pola-blog.html:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blog Kebun Budi</title>
</head>
<body>
  <header>
    <h1>Blog Kebun Budi</h1>
    <nav>
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="tentang.html">Tentang</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Menanam Cabai di Pot</h2>
      <p>Cabai ternyata cocok untuk pekarangan rumah yang sempit.</p>
      <a href="artikel/menanam-cabai.html">Baca selengkapnya</a>
    </article>
    <article>
      <h2>Pupuk Kompos Rumahan</h2>
      <p>Sisa dapur berubah menjadi pupuk dalam empat pekan.</p>
      <a href="artikel/pupuk-kompos.html">Baca selengkapnya</a>
    </article>
  </main>
  <aside>
    <h2>Artikel Populer</h2>
    <ul>
      <li><a href="artikel/menanam-cabai.html">Menanam Cabai di Pot</a></li>
      <li><a href="artikel/pupuk-kompos.html">Pupuk Kompos Rumahan</a></li>
    </ul>
  </aside>
  <footer>
    <p>&copy; 2025 Blog Kebun Budi</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Nama blog "Blog Kebun Budi" beserta menu Beranda dan Tentang
  - Dua rangkuman artikel, masing-masing dengan judul dan tautan baca
  - Daftar "Artikel Populer" di bawah konten utama
  - Baris hak cipta di bagian paling bawah

Mari kita telaah peran tiap wilayah:

1. header + nav: identitas situs dan navigasi global yang berlaku untuk seluruh halaman blog.
2. main: wilayah konten utama; setiap rangkuman tulisan dibungkus article karena masing-masing berdiri sebagai satu unit mandiri.
3. aside: wilayah pendamping di luar alur utama; daftar artikel populer berguna, tetapi halaman tetap utuh tanpanya.
4. footer: penutup halaman berisi hak cipta.

Tanpa CSS, aside tampil di bawah main; setelah penataan visual diterapkan, wilayah yang sama dapat berpindah ke sisi kanan konten. Peran wilayah tidak berubah — hanya posisinya yang diatur CSS.

Pola Header-Nav-Footer untuk Landing Page #

Landing page bertugas memperkenalkan satu usaha atau produk secara ringkas: pembuka yang menarik, penjelasan penawaran, lalu ajakan menghubungi. Simpan file berikut sebagai pola-landing.html:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jasa Desain Siti</title>
</head>
<body>
  <header>
    <p><strong>Jasa Desain Siti</strong></p>
    <nav>
      <ul>
        <li><a href="#layanan">Layanan</a></li>
        <li><a href="#kontak">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="layanan">
      <h1>Undangan digital untuk setiap acara</h1>
      <p>Kami merancang undangan digital yang rapi dan cepat dibuka.</p>
      <ul>
        <li>Konsultasi awal melalui email</li>
        <li>Revisi dua kali untuk setiap pesanan</li>
        <li>File akhir siap unduh</li>
      </ul>
    </section>
  </main>
  <footer id="kontak">
    <h2>Kontak</h2>
    <p>Surat elektronik: <a href="mailto:[email protected]">[email protected]</a></p>
    <p>&copy; 2025 Jasa Desain Siti</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Nama usaha dan menu berisi dua tautan: Layanan, Kontak
  - Hero berisi judul besar, satu paragraf, dan daftar keunggulan
  - Klik tautan "Layanan" atau "Kontak" melompat ke seksi tujuannya
  - Wilayah kontak beserta hak cipta di bagian bawah

Yang menarik dari pola ini: nav menunjuk ke seksi di dalam halaman yang sama melalui fragment #layanan dan #kontak, materi yang telah kita pelajari pada Chapter Navigasi Internal. Kontak pun menumpang di footer — landing page yang ringkas tidak butuh wilayah kontak terpisah, sehingga polanya tetap header-nav-footer.

Dua file di atas berbeda pola, namun keduanya berbagi banyak kesamaan: head yang serupa, header dengan nav, dan footer di ujung. Kemiripan semacam ini muncul di hampir semua situs multi-halaman, dan Chapter berikutnya membahas cara menjaga kerangka itu tetap konsisten dengan prinsip yang dapat dipakai ulang.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Structuring documents
• MDN Web Docs — Referensi elemen HTML
• web.dev — Learn HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blog Kebun Budi</title>
</head>
<body>
  <header>
    <h1>Blog Kebun Budi</h1>
    <nav>
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="tentang.html">Tentang</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Menanam Cabai di Pot</h2>
      <p>Cabai ternyata cocok untuk pekarangan rumah yang sempit.</p>
      <a href="artikel/menanam-cabai.html">Baca selengkapnya</a>
    </article>
    <article>
      <h2>Pupuk Kompos Rumahan</h2>
      <p>Sisa dapur berubah menjadi pupuk dalam empat pekan.</p>
      <a href="artikel/pupuk-kompos.html">Baca selengkapnya</a>
    </article>
  </main>
  <aside>
    <h2>Artikel Populer</h2>
    <ul>
      <li><a href="artikel/menanam-cabai.html">Menanam Cabai di Pot</a></li>
      <li><a href="artikel/pupuk-kompos.html">Pupuk Kompos Rumahan</a></li>
    </ul>
  </aside>
  <footer>
    <p>&copy; 2025 Blog Kebun Budi</p>
  </footer>
</body>
</html>

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jasa Desain Siti</title>
</head>
<body>
  <header>
    <p><strong>Jasa Desain Siti</strong></p>
    <nav>
      <ul>
        <li><a href="#layanan">Layanan</a></li>
        <li><a href="#kontak">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="layanan">
      <h1>Undangan digital untuk setiap acara</h1>
      <p>Kami merancang undangan digital yang rapi dan cepat dibuka.</p>
      <ul>
        <li>Konsultasi awal melalui email</li>
        <li>Revisi dua kali untuk setiap pesanan</li>
        <li>File akhir siap unduh</li>
      </ul>
    </section>
  </main>
  <footer id="kontak">
    <h2>Kontak</h2>
    <p>Surat elektronik: <a href="mailto:[email protected]">[email protected]</a></p>
    <p>&copy; 2025 Jasa Desain Siti</p>
  </footer>
</body>
</html>