Layouting Dasar dengan div

div: Kotak Serbaguna

<div> adalah elemen generik tanpa makna khusus: sebuah kotak untuk mengelompokkan konten. Di sinilah dia bersinar, untuk layout:

<div class="halaman">
  <div class="header">Logo dan menu</div>
  <div class="konten">Isi utama</div>
  <div class="footer">Copyright</div>
</div>

<div> itu block-level: selalu mulai di baris baru dan memenuhi lebar penuh. Sifat ini yang bikin dia cocok sebagai bata penyusun layout.

class: Nama untuk Kelompok

Atribut class memberi nama pada div supaya bisa di-style dengan CSS nanti. Satu elemen boleh punya banyak class dipisah spasi:

<div class="kartu kartu-produk">...</div>

Bedakan dengan id: id unik satu halaman (satu elemen saja), class boleh dipakai berulang. Untuk layout, hampir selalu pakai class.

Pola Layout 1: Header, Konten, Footer

Kerangka paling umum di web:

<div class="halaman">
  <header class="kepala">
    <h1>Situsku</h1>
    <nav>
      <a href="#">Beranda</a>
      <a href="#">Tentang</a>
    </nav>
  </header>

  <main class="isi">
    <h2>Selamat Datang</h2>
    <p>Ini konten utama halaman.</p>
  </main>

  <footer class="kaki">
    <p>&copy; 2026 Situsku</p>
  </footer>
</div>

Perhatikan kombinasinya: tag semantic (<header>, <main>, <footer>) untuk makna, class untuk styling. Ini pola profesional: makna dari tag, tampilan dari class.

Pola Layout 2: Dua Kolom

Konten utama plus sidebar:

<div class="wadah">
  <main class="kolom-utama">
    <h2>Artikel</h2>
    <p>Isi artikel...</p>
  </main>
  <aside class="kolom-samping">
    <h3>Artikel Terkait</h3>
    <ul>
      <li><a href="#">Artikel 1</a></li>
      <li><a href="#">Artikel 2</a></li>
    </ul>
  </aside>
</div>

Struktur HTML-nya selesai di sini. Membuatnya benar-benar tampil bersebelahan adalah tugas CSS (Flexbox/Grid di seri CSS). HTML menyiapkan struktur yang masuk akal, CSS mengatur tampilan.

Pola Layout 3: Grid Kartu

Daftar produk atau galeri:

<div class="daftar-produk">
  <div class="kartu">
    <img src="produk1.jpg" alt="Produk 1">
    <h3>Produk 1</h3>
    <p>Rp50.000</p>
  </div>
  <div class="kartu">
    <img src="produk2.jpg" alt="Produk 2">
    <h3>Produk 2</h3>
    <p>Rp75.000</p>
  </div>
  <div class="kartu">
    <img src="produk3.jpg" alt="Produk 3">
    <h3>Produk 3</h3>
    <p>Rp100.000</p>
  </div>
</div>

Setiap kartu strukturnya identik: gambar, judul, harga. Konsistensi ini penting, karena CSS nanti men-style semua .kartu sekaligus. Kalau strukturnya beda-beda, CSS-nya jadi mimpi buruk.

Catatan teknis: Jangan bungkus semuanya dalam div berlapis-lapis tanpa perlu ("divitis"). Setiap div harus punya alasan: pengelompokan logis atau kebutuhan styling. Kalau satu div cuma membungkus satu elemen tanpa class dan tanpa fungsi, kemungkinan dia tidak dibutuhkan.

span: Saudara Inline dari div

Butuh mengelompokkan sebagian teks di dalam paragraf? Pakai <span>, versi inline dari <div> (tidak pindah baris):

<p>Harga: <span class="harga-coret">Rp100.000</span> <span class="harga-diskon">Rp75.000</span></p>

Aturannya: <div> untuk blok besar, <span> untuk potongan kecil di dalam teks.

Menuju CSS

Dengan modul ini, perjalanan HTML dasarmu hampir lengkap. Kamu sekarang bisa:

• Menyusun struktur dokumen yang valid
• Memakai tag semantic yang bermakna
• Membuat form, tabel, list, dan media
• Menyiapkan layout dengan div dan class

Langkah berikutnya yang alami adalah seri CSS: mengambil struktur HTML ini dan membuatnya cantik. Tapi sebelum itu, buktikan skill-mu di proyek mini terakhir.