blockinlinedisplayPemula3 mnt baca

Block vs Inline

Pahami dua perilaku dasar elemen: block yang memenuhi lebar dan inline yang mengalir dalam teks.

Analogi: Gerbong Kereta dan Penumpang

Bayangkan rangkaian kereta. Setiap gerbong menempati jalurnya sendiri dari ujung ke ujung: gerbong tidak berbagi baris dengan gerbong lain. Itulah elemen block. Sekarang bayangkan penumpang di dalam gerbong: mereka duduk berdampingan, mengisi kursi satu per satu sampai penuh, lalu lanjut ke baris kursi berikutnya. Itulah elemen inline.

Di HTML, div, p, dan h1 itu gerbong: masing-masing mengambil lebar penuh dan selalu mulai di baris baru. Sedangkan span, a, dan strong itu penumpang: mereka mengalir di dalam baris teks, berdampingan dengan teks di sekitarnya. Sekali kamu memegang gambaran ini, separuh misteri layout web langsung terpecahkan.

Kenapa Perbedaan Ini Ada (Masalah yang Dipecahkannya)

Browser butuh aturan main yang jelas untuk menyusun konten di layar. Tanpa pembagian block dan inline, browser tidak tahu apakah sebuah elemen harus "makan" satu baris penuh atau cukup menempel di samping teks. Bayangkan menata dokumen Word tanpa tahu bedanya paragraf dan kata: kacau.

Pembagian ini memecahkan masalah penyusunan otomatis. Elemen struktural (judul, paragraf, daftar, pembungkus) dijadikan block supaya tersusun vertikal dengan rapi tanpa perlu diatur satu per satu. Elemen kecil yang hidup di dalam kalimat (tautan, penekanan, potongan teks) dijadikan inline supaya mengalir natural mengikuti aliran tulisan. Dua perilaku ini adalah fondasi yang membuat CSS seperti Flexbox dan Grid bisa bekerja dengan masuk akal nantinya.

Contoh 1: Paling Sederhana

html

<p>Paragraf pertama (block, satu baris penuh).</p>
<p>Paragraf kedua otomatis mulai di baris baru.</p>
<p>Klik <a href="#">tautan ini</a> tanpa pindah baris.</p>

Dua p pertama masing-masing menguasai satu baris penuh, walau teksnya pendek. Sisa ruang kosong di kanan tidak bisa ditempati elemen lain. Sebaliknya, a di paragraf ketiga duduk manis di tengah kalimat, mengalir bersama teks. Itulah bedanya: block mengklaim baris, inline berbagi baris.

Contoh 2: Kartu Produk yang Realistis

Contoh yang lebih mirip halaman asli, misalnya kartu produk di toko online:

html

<div class="kartu">
  <h3>Kopi Susu Gula Aren</h3>
  <p>Es kopi susu dengan <strong>gula aren asli</strong>.</p>
  <p>Harga: <span class="harga">Rp18.000</span> <a href="#">Beli</a></p>
</div>
<div class="kartu">
  <h3>Es Teh Manis</h3>
  <p>Teh melati diseduh <em>fresh</em> setiap hari.</p>
  <p>Harga: <span class="harga">Rp8.000</span> <a href="#">Beli</a></p>
</div>

Di sini div berperan sebagai gerbong: tiap kartu produk menempati barisnya sendiri, tersusun vertikal. Di dalamnya, h3 dan p juga block sehingga tersusun rapi ke bawah. Sementara strong, em, span, dan a adalah penumpang yang mengalir di dalam kalimat. Struktur ini rapi tanpa satu baris CSS pun, murni karena perilaku block dan inline.

Aturan Bersarang

Elemen block boleh berisi elemen inline maupun block lain. Gerbong boleh berisi penumpang dan gerbong lain.
Elemen inline tidak boleh berisi elemen block. Menulis <span><div>... itu salah, seperti memaksa penumpang menelan gerbong.
Pengecualian terkenal: <a> boleh membungkus elemen block di HTML5. Ini yang memungkinkan kartu produk yang seluruhnya bisa diklik.

Kesalahan Umum Pemula

Salah: menaruh elemen block di dalam inline.

html

<p>Baca <span>artikel <div>lengkapnya di sini</div></span> ya.</p>

Benar: inline hanya berisi teks atau inline lain.

html

<p>Baca <span>artikel lengkapnya di sini</span> ya.</p>
<div>Artikel lengkapnya ada di bawah.</div>

Kenapa salah? div memaksa pindah baris di tengah kalimat, menghancurkan aliran teks. Browser pun bingung dan kadang "memperbaiki" kodenya dengan cara yang tidak kamu duga, sehingga tampilannya jadi aneh.

Salah: heran kenapa span tidak bisa diatur lebarnya.

html

<span style="width: 200px;">Kotak</span>

Benar: pakai elemen block (atau ubah display-nya) kalau butuh lebar.

html

<div style="width: 200px;">Kotak</div>

Kenapa salah? Elemen inline hanya selebar isinya dan mengabaikan properti lebar. Ini bukan bug, ini memang sifatnya. Kebingungan klasik "kenapa width tidak mempan" hampir selalu berakar dari tidak sadar elemennya inline.

Salah: memakai div untuk menandai kata di dalam kalimat.

html

<p>Diskon <div>50%</div> hari ini saja.</p>

Benar: pakai span untuk potongan teks di dalam baris.

html

<p>Diskon <span>50%</span> hari ini saja.</p>

Kenapa salah? div memecah kalimat menjadi tiga baris, padahal maksudmu cuma menandai kata "50%". Untuk menandai sebagian teks di dalam baris, span adalah alat yang tepat.

Catatan teknis: Perilaku block dan inline bisa diubah dengan CSS, misalnya display: inline-block membuat elemen mengalir seperti inline tapi bisa diatur lebarnya seperti block. Namun struktur HTML yang benar tetap mengikuti aturan aslinya: jangan mengandalkan CSS untuk membenarkan susunan yang salah secara semantik.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tebak Perilakunya

Buat halaman berisi: dua h2 berurutan, lalu satu p yang berisi tiga span dan dua a. Sebelum melihat hasil, tulis komentar HTML yang memprediksi: elemen mana yang pindah baris dan mana yang sejajar. Tantangan ini melatih kemampuan membaca perilaku elemen sebelum menulis CSS, skill yang menghemat berjam-jam debugging layout di kemudian hari.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Block vs Inline</title>
</head>
<body>
  <!-- prediksi + elemen di sini -->
</body>
</html>

Open Sandbox