HTML Block dan Inline Elements

Dalam HTML, elemen dibagi menjadi dua kategori utama berdasarkan perilakunya dalam tata letak halaman:

Block-level elements: Mengisi seluruh lebar kontainer dan selalu memulai baris baru.
Inline elements: Hanya mengisi lebar yang dibutuhkan dan tidak memulai baris baru.

Contoh Elemen Block-level

Contoh umum elemen block: <div>, <p>, <h1>–<h6>, <ul>, <ol>, <li>, <section>, <article>, dll.

<h2>Judul</h2>
<p>Ini adalah paragraf.</p>
<div>Ini adalah div.</div>

Contoh umum elemen inline: <span>, <a>, <strong>, <em>, <img>, <input>, <label>, dll.

<p>
  Ini adalah <strong>teks penting</strong> dan <a href="#">link</a>.
</p>

Block Element	Inline Element
Mulai di baris baru	Tidak mulai baris baru
Mengisi lebar penuh	Hanya selebar konten
Dapat berisi block/inline	Hanya bisa berisi inline (umumnya)

<div>
  Teks dalam div.
  <span style="color:red;">Teks dalam span.</span>
</div>

Gunakan elemen blok untuk menyusun struktur halaman, dan elemen inline untuk format konten di dalam blok.