Inline adalah tipe tampilan elemen HTML yang mengalir di dalam baris teks — elemennya nempel di samping konten lain dan lebarnya hanya seukuran isinya, contohnya <span>, <a>, dan <strong>. Kebalikannya, block adalah elemen yang selalu mulai dari baris baru dan mengambil seluruh lebar yang tersedia, contohnya <p>, <div>, dan <h1>.

🧪 Tebakan cepat — sebaris atau bertumpuk? Dua <span> ditulis berurutan, terus dua <p> ditulis berurutan. Mana yang tampil sebaris, mana yang bertumpuk? Jawabannya: dua span nempel sebaris (inline), dua p bertumpuk ke bawah (block).

🎯 Inline, block, atau inline-block? Cuma nandain kata di tengah kalimat → inline (span, a, strong). Butuh blok konten satu baris penuh → block (p, div, h1). Pengen sebaris TAPI bisa diatur width/height-nya → display: inline-block.

Coba liat halaman ini sekarang. Tiap paragraf otomatis pindah ke baris baru sendiri-sendiri (block). Tapi pas ada kata tebal di tengah kalimat, tebalnya nempel di antara kata lain di baris yang sama (inline). Itu beda perilaku default dari elemen HTML — udah diatur browser sejak awal, gak perlu CSS.

💡 Default bisa dibajak. Tiap elemen punya display default (block atau inline), tapi CSS bisa override: display: inline-block, flex, grid, dll. <div> yang biasanya block bisa jadi inline pakai display: inline. Tapi inget — override visual gak ngubah aturan semantic HTML (<p> di dalam <span> tetep invalid walau secara CSS keliatan baik).

Container Generik: <span> & <div>

Container generik buat dua perilaku ini: <span> untuk inline, <div> untuk block. Dua-duanya kosong makna — gunanya cuma buat ngelompokin elemen tanpa kasih arti tambahan.

<span>Bagian Inline</span>
<div>Bagian <b>Block</b></div>

Default Display per Elemen

Banyak elemen text-formatting (<b>, <i>, <a>, <em>) default-nya inline. Heading, paragraf, dan <div> default-nya block.

🎭 Analogi sehari-hari

Inline = kata-kata mengalir bersebelahan dalam satu kalimat — <a>, <b>, <span> numpang di tengah teks. Block = blok paragraf yang berdiri sendiri — <p>, <h1>, <div> selalu pindah baris baru.

⚠️ Jebakan yang sering ditemui

• width/height/margin top-bottom diabaikan di inline — kalau perlu, ubah ke inline-block atau block.
• Block tidak boleh di dalam inline secara semantik — <a> boleh berisi <div> di HTML5, tapi <span> berisi <div> aneh.
• <a> boleh berisi block sejak HTML5 — sebelumnya invalid. Sekarang <a><div>...</div></a> valid (cocok untuk card link).
• <button> inline default tapi sering distyle block. Tetap berlaku aturan display.
• display: inline-block = jembatan: bisa atur width/height tapi tetap mengalir di baris.

TL;DR: Inline = nempel di baris yang sama (<a>, <b>, <span>). Block = pindah baris baru, ambil full width (<p>, <h1>, <div>). Container generik: <span> (inline), <div> (block). Inline elements abaikan width/height/margin top-bottom — kalau perlu pakai display: inline-block atau block. Override visual via CSS gak ubah aturan semantic HTML.