Elemen Block dan Inline di HTML: Bagaimana Elemen Memakai Ruang

Ada satu pertanyaan yang hampir selalu bikin bingung orang yang baru mulai nulis HTML: kenapa dua paragraf <p> menumpuk satu di atas yang lain, tapi dua tautan <a> malah duduk di baris yang sama? Padahal kamu belum nulis CSS apa pun. Belum atur posisi apa pun. Tapi browser sudah keburu mengambil keputusan soal bagaimana tiap elemen harus mengalir.

Keputusan itu bermuara pada satu sifat bawaan yang dimiliki setiap elemen: dia itu kalau bukan block-level ya inline. Begitu konsep ini nyantol, banyak sekali perilaku HTML yang tadinya terasa acak jadi masuk akal. Kamu bakal tahu duluan apakah sebuah elemen bakal mulai di baris baru atau menyelip di samping tetangganya, dan kamu juga paham elemen mana yang sah ditaruh di dalam elemen mana.

Artikel ini menganggap kamu sudah tahu apa itu tag dan elemen — kalau kamu benar-benar baru, mulai dulu dari apa itu HTML, baru balik ke sini. Kalau sudah, mari kita bahas.

Dua cara sebuah elemen mengalir

Setiap elemen HTML yang terlihat termasuk ke salah satu dari dua kategori tampilan bawaan. Kategori ini ditetapkan oleh stylesheet bawaan browser, dan dialah yang mengatur perilaku alami elemen sebelum kamu menyentuh CSS sedikit pun.

Elemen block-level berperilaku seperti kotak selebar penuh. Dia mulai di baris baru, dan dia juga mendorong apa pun yang datang sesudahnya ke baris berikutnya. Secara bawaan dia melebar mengisi seluruh lebar wadahnya, tidak peduli sesedikit apa pun isi di dalamnya. Paragraf, heading, dan daftar semuanya termasuk elemen block.

Elemen inline justru kebalikannya. Dia hanya memakan lebar seperlunya isi yang ada, dan dia menyatu dengan aliran teks di sekitarnya — berdampingan dengan elemen inline lain dan kata-kata, tanpa memaksa ganti baris. Tautan, teks tebal, dan gambar termasuk inline.

Ini perbandingannya dalam satu potongan kode:

<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>

<a href="#">Tautan pertama</a>
<a href="#">Tautan kedua</a>

Dua paragraf tadi tampil di baris yang berbeda, masing-masing membentang selebar penuh halaman. Sementara dua tautan tampil bersebelahan di baris yang sama. Strukturnya sama saja — dua elemen bersaudara — tapi tata letaknya beda jauh, semata-mata karena yang satu block dan yang lain inline.

Elemen block-level: kotak-kotak besar

Elemen block adalah balok-balok penyusun struktur halaman. Mereka membagi halaman menjadi bagian-bagian yang bertumpuk — sebuah header, sebuah paragraf, sebuah daftar, satu bagian konten. Karena masing-masing menguasai satu baris penuh untuk dirinya sendiri, mereka secara alami membentuk kerangka vertikal dari tata letakmu.

Beberapa elemen block yang bakal terus kamu pakai:

<h1>Sebuah heading</h1>
<p>Satu paragraf teks.</p>
<ul>
  <li>Satu item daftar</li>
</ul>
<div>Wadah generik</div>
<section>Satu bagian konten</section>
<article>Sebuah artikel yang berdiri sendiri</article>

Semua elemen ini mulai di baris baru dan mengambil seluruh lebar yang tersedia. Coba taruh dua elemen <div> berurutan, dan kamu bakal lihat keduanya menumpuk ke bawah, walaupun masing-masing cuma berisi satu kata.

Elemen block yang paling generik adalah <div> (singkatan dari “division”). Dia tidak punya makna sendiri — sekadar kotak polos yang kamu pakai untuk mengelompokkan elemen-elemen lain supaya bisa kamu tata atau kamu posisikan sebagai satu kesatuan. Kalau tidak ada elemen semantik yang pas, <div> jadi wadah serbaguna.

Pilih elemen semantik dulu sebelum div polos

<div> memang bisa dipakai di mana saja, tapi dia tidak memberi tahu apa-apa soal isi di dalamnya, baik ke screen reader maupun ke mesin pencari. Kalau kontennya punya peran yang jelas — header halaman, bilah navigasi, konten utama, atau footer — sebaiknya pakai elemen semantik yang sesuai (<header>, <nav>, <main>, <footer>). Mereka juga block-level, jadi tata letaknya tetap berperilaku sama persis, tapi mereka membawa makna yang tidak dimiliki <div> kosongan. Ada satu artikel khusus soal HTML semantik kalau kamu mau mendalaminya.

Elemen inline: mengalir di dalam teks

Elemen inline hidup di dalam baris-baris teks dan ikut membungkus bersama teks itu. Mereka tidak memutus aliran — mereka menghias atau menautkan sepotong konten persis di tempatnya berada. Ini justru yang kamu butuhkan untuk menandai kata atau frasa di dalam sebuah kalimat.

<p>
  Kunjungi <a href="https://acy-partner.com">situs kami</a> untuk baca lebih lanjut.
  Kata ini <strong>penting</strong>, dan yang ini
  <em>ditekankan</em>. Ini juga ada <code>kode inline</code>.
</p>

Perhatikan bagaimana <a>, <strong>, <em>, dan <code> semuanya duduk di dalam paragraf, mengalir bersama kata-kata di sekitarnya. Tidak ada satu pun yang memaksa ganti baris. Mereka hanya mengambil lebar seukuran teksnya sendiri.

Elemen inline yang umum antara lain:

<a> — tautan
<strong> dan <b> — teks tebal
<em> dan <i> — teks miring / ditekankan
<span> — wadah inline generik (saudara inline dari <div>)
<code> — kode inline
<img> — gambar
<br> — pemutus baris
<input>, <label>, <button> — kontrol form

Sama seperti <div> adalah wadah block yang tanpa makna, <span> adalah wadah inline yang juga tanpa makna. Kamu pakai <span> untuk membungkus beberapa kata supaya bisa kamu tata atau kamu targetkan — misalnya memberi warna pada satu kata di dalam kalimat — tanpa mengganggu tata letak di sekitarnya.

Gambar itu inline, dan ini sering bikin kaget

<img> adalah elemen inline, dan kenyataan ini bikin banyak pemula salah duga. Artinya, gambar mengalir bersama teks dan duduk di garis dasar (baseline) teks, dan itulah kenapa kamu kadang melihat celah kecil misterius di bawah sebuah gambar. Celah itu adalah ruang yang disisakan untuk bagian huruf yang menjulur ke bawah (seperti ekor huruf “y”), karena browser memperlakukan gambar seolah-olah ia satu karakter di dalam baris. Solusi lazimnya pakai CSS — display: block atau vertical-align: bottom pada gambar — tapi untuk sekarang, cukup tahu saja bahwa celah itu wajar dan munculnya karena <img> bersifat inline.

Aturan penyarangan yang benar-benar penting

Begitu kamu tahu elemen mana yang block dan mana yang inline, ada satu aturan yang mencegah hampir semua kesalahan HTML tidak valid: elemen inline tidak boleh memuat elemen block.

Elemen block boleh memuat anak yang block maupun yang inline. Ini wajar dan memang seharusnya begitu:

<div>
  <h2>Judul</h2>
  <p>Sebuah paragraf dengan <a href="#">tautan</a> di dalamnya.</p>
</div>

Di sini <div> (block) memuat <h2> (block) dan <p> (block), dan <p>-nya memuat <a> (inline). Semuanya benar.

Tapi kebalikannya melanggar aturan. Kamu tidak boleh menaruh elemen block di dalam elemen inline:

<!-- Salah: <div> block di dalam <span> inline -->
<span>
  <div>Ini seharusnya tidak di sini</div>
</span>

<!-- Salah: <p> block di dalam <a> inline -->
<a href="#"><p>Jangan lakukan ini</p></a>

Versi yang paling sering terjadi dari kesalahan ini adalah membungkus elemen block ke dalam sebuah tautan. Browser memang pemaaf dan mungkin tetap menampilkannya, tapi tetap saja itu HTML yang tidak valid dan bisa menimbulkan masalah nyata — styling yang berantakan, perilaku yang tidak terduga, atau isu aksesibilitas.

Satu pengecualian besar: membungkus seluruh block ke dalam tautan

Ada satu pengecualian modern yang perlu kamu tahu. Sejak HTML5, elemen <a> boleh membungkus konten block-level — misalnya membuat satu kartu jadi bisa diklik seluruhnya dengan membungkus semuanya dalam sebuah tautan. Jadi <a href="#"><div>...</div></a> secara teknis valid di HTML5. Tapi ini pengecualian, bukan aturan umum: <a> itu spesial. Untuk semua elemen inline lain (<span>, <strong>, <em>, dan kawan-kawannya), jangan masukkan elemen block ke dalamnya. Kalau ragu, sarangkan inline di dalam block, jangan pernah block di dalam inline.

Cara cepat mengecek elemen apa pun

Kamu tidak perlu menghafal kategori setiap elemen. Ada dua cara pintas yang bisa diandalkan.

Pertama, pikirkan tugasnya. Kalau sebuah elemen mewakili satu blok atau bagian dari halaman — paragraf, heading, daftar, wadah — hampir pasti dia block. Kalau dia menandai sepotong teks di dalam satu baris — tautan, kata yang ditekankan, cuplikan kode — hampir pasti dia inline.

Kedua, lihat saja bagaimana dia berperilaku. Taruh dua elemen yang sama bersebelahan di sebuah halaman. Kalau keduanya menumpuk ke bawah, berarti block. Kalau keduanya duduk berdampingan, berarti inline. Browser langsung memberi tahu kamu jawabannya.

<!-- Ini menumpuk -> block -->
<p>Satu</p>
<p>Dua</p>

<!-- Ini berdampingan -> inline -->
<span>Satu</span>
<span>Dua</span>

Sedikit soal display di CSS

Semua yang kita bahas tadi adalah perilaku bawaan elemen, yang ditetapkan oleh browser. Itu tidak permanen. Begitu kamu belajar CSS, sifat display memungkinkan kamu menimpanya: kamu bisa membuat elemen block berperilaku inline lewat display: inline, atau membuat elemen inline berperilaku block lewat display: block, atau pakai display: inline-block dan display: flex untuk tata letak yang memadukan kedua perilaku tadi.

Ini model berpikir penting yang perlu kamu bawa terus: block versus inline itu titik awal, bukan kurungan. HTML memberi setiap elemen nilai bawaan yang masuk akal, dan CSS membiarkan kamu mengubahnya kalau tata letakmu butuh sesuatu yang lain. Tapi dengan memahami nilai bawaannya dulu, kamu akan selalu tahu kamu sedang berangkat dari mana — dan itu bikin tata letak CSS jauh lebih tidak membingungkan nanti.

Penutup

Block versus inline adalah salah satu ide kecil yang diam-diam menjelaskan banyak perilaku HTML:

Setiap elemen, secara bawaan, kalau bukan block-level ya inline.
Elemen block (<div>, <p>, <h1>, <ul>, <section>) mulai di baris baru dan mengisi lebar penuh — mereka menumpuk ke bawah dan membentuk struktur halaman.
Elemen inline (<a>, <strong>, <em>, <span>, <img>) hanya memakai lebar seperlunya dan mengalir di dalam satu baris teks.
<div> adalah wadah block generik; <span> adalah pasangannya yang inline. Keduanya tanpa makna sendiri dan ada untuk mengelompokkan serta menata.
Aturan penyarangan intinya: jangan menaruh elemen block di dalam elemen inline — dengan satu pengecualian HTML5 bahwa <a> boleh membungkus konten block.
Semua ini adalah nilai bawaan elemen, yang nanti bisa ditimpa oleh display di CSS.

Biasakan diri menebak apakah sebuah elemen bakal menumpuk atau duduk inline, dan tata letak HTML berhenti terasa seperti tebak-tebakan. Berikutnya, kamu bakal lihat bagaimana class dan id membuatmu bisa melabeli elemen-elemen ini supaya CSS dan JavaScript bisa menemukannya dengan presisi.