Topik ini menjelaskan alur normal (normal flow), yaitu skema tata letak bawaan yang digunakan browser untuk menyusun dokumen HTML sebelum satu aturan layout pun ditulis. Pembahasan mencakup perilaku elemen block yang menumpuk secara vertikal, elemen inline yang mengalir secara horizontal dan melipat, serta kehadiran blok di dalam elemen inline. Setelah membacanya, perilaku bawaan sebuah halaman dapat dijelaskan dengan pasti, dan setiap model layout lain dapat dipandang sebagai penyimpangan yang disengaja dari perilaku dasar ini.
Definisi alur normal#
Alur normal adalah skema pemosisian bawaan browser: setiap elemen ditempatkan menurut urutan kemunculannya di dalam HTML, dan tidak ada satu properti tata letak pun yang perlu ditulis untuk mengaktifkannya. Browser membedakan dua perilaku pada alur normal, yaitu partisipasi sebagai blok yang berdiri sendiri dan partisipasi sebagai teks yang mengalir. Elemen dengan peran block membentuk kotak tersendiri, sedangkan elemen dengan peran inline menyatu dengan aliran teks di sekitarnya. Peran ini ditentukan oleh nilai bawaan elemen pada stylesheet browser dan dapat diubah melalui properti display. Berkas HTML yang dibuka langsung dari penyimpanan pun sudah tersusun rapi karena skema ini tidak menuntut satu deklarasi pun.
Hampir semua elemen berpartisipasi dalam alur normal. Partisipasi itu hanya terputus apabila elemen dikeluarkan secara eksplisit, misalnya melalui pemosisian absolute atau fixed, apungan (float), atau nilai display tertentu. Selama elemen tetap berada di dalam alur, posisinya sepenuhnya ditentukan oleh urutan dokumen dan perannya. Dua bagian berikut menguraikan kedua jenis partisipasi tersebut secara terpisah.
Elemen block menumpuk vertikal#
Elemen block seperti div, p, h1 hingga h6, ul, dan section membentuk kotak yang menempati satu baris penuh pada arah horizontal. Satu baris penuh berarti selebar ruang yang tersedia di induknya, bukan selebar isinya. Elemen block berikutnya selalu dimulai di bawah elemen sebelumnya, sehingga halaman tersusun seperti tumpukan blok dari atas ke bawah. Tinggi setiap kotak mengikuti tinggi isinya, sedangkan lebarnya secara bawaan mengisi seluruh ruang yang tersedia.
Perilaku tersebut dapat diamati dari markup sederhana berikut:
<div>Kotak pertama</div>
<div>Kotak kedua</div>Browser menampilkan teks Kotak kedua di bawah teks Kotak pertama, meskipun kedua isinya jauh lebih pendek daripada lebar halaman. Batas antar kotak baru terlihat setelah kotak diberi latar atau garis tepi, seperti pada gaya berikut:
div {
background-color: #dbeafe;
margin-bottom: 8px;
}Kedua kotak kini terlihat selebar jendela. Fakta ini menjelaskan mengapa dokumen yang ditulis tanpa CSS tetap terbaca: setiap paragraf dan daftar sudah menempati bloknya masing-masing. Penataan seperti lebar tetap atau penyusunan berdampingan adalah pekerjaan model layout yang lebih lanjut, bukan pekerjaan alur normal.
Elemen inline mengalir horizontal#
Elemen inline seperti span, a, strong, em, dan code tidak memutus aliran teks. Elemen semacam ini duduk di dalam baris yang sama dengan teks di sekitarnya dan berpindah ke baris berikutnya apabila lebar baris sudah habis. Perpindahan barisnya mengikuti aturan pelipatan teks biasa, sehingga kata-kata yang tergolong satu elemen inline dapat terbagi ke dua baris. Tinggi setiap baris ditentukan oleh line-height konten yang tersusun di dalamnya. Karena tidak membentuk kotak sendiri, dua elemen inline yang berdekatan hanya dipisahkan oleh spasi yang ditulis pada markup.
Contoh berikut memuat satu paragraf dengan tiga elemen inline di dalamnya:
<p>
Daftar belanja hari ini berisi
<strong>telur</strong>,
<span>susu kedelai</span>, dan
<a href="laporan.html">laporan mingguan</a>.
</p>Ketiga elemen ditampilkan berurutan pada baris yang sama persis seperti teks biasa, tanpa jeda baris sebelum atau sesudahnya. Apabila jendela dipersempit, potongan susu kedelai melipat ke baris berikutnya tanpa mengubah struktur dokumen. Perhatikan pula bahwa strong, span, dan a tidak memerlukan satu deklarasi pun agar berperilaku demikian, karena peran inline memang bawaan dari elemen-elemen tersebut.
Blok di dalam inline dan anonymous box#
Apabila elemen block berada di dalam elemen inline, browser tetap wajib menyusunnya menurut aturan alur normal. Kotak inline yang terpotong oleh blok dipecah menjadi beberapa bagian, dan setiap bagian dibungkus kotak blok tanpa nama yang disebut anonymous box. Kotak anonim tidak memiliki selector, sehingga tidak dapat ditata langsung melalui CSS, tetapi properti yang dapat diwariskan tetap mengalir dari induknya ke kotak-kotak itu.
Susunan berikut menempatkan satu div di dalam span:
<span>
Teks sebelum blok.
<div>Blok di dalam span</div>
Teks sesudah blok.
</span>Hasilnya bukan satu kotak, melainkan tiga blok berturut-turut: teks sebelum blok, blok div, lalu teks sesudah blok. Kotak span terpecah di sekitar div, dan bagian-bagiannya dibungkus kotak anonim. Browser menangani susunan semacam ini tanpa error, tetapi penulisannya tidak dianjurkan karena melanggar model konten HTML, yaitu aturan tentang elemen apa yang boleh berada di dalam elemen tertentu.
Alur normal sebagai titik acuan#
Model layout yang lebih modern seluruhnya didefinisikan terhadap alur normal. Flexbox mendistribusikan anak-anaknya pada satu sumbu, grid menempatkan anak-anaknya pada kisi baris dan kolom, sedangkan pemosisian menggeser elemen atau mengeluarkannya dari alur. Ketiganya hanya dapat dijelaskan secara presisi apabila titik acuannya jelas, yaitu apa yang seharusnya terjadi sebelum model itu diterapkan.
Alur normal juga menjadi alasan halaman tanpa CSS tetap dapat dibaca. Judul, paragraf, dan daftar sudah tersusun rapi sebelum satu aturan gaya pun diterapkan. Karena itu, saat layout tidak berperilaku seperti harapan, langkah pemeriksaan pertama adalah membandingkan perilaku tersebut dengan alur normal, lalu menelusuri deklarasi mana yang menyimpang darinya. Kebiasaan ini lebih cepat daripada menambah aturan baru untuk memperbaiki susunan yang sebenarnya sudah benar. Pembandingan ini juga berlaku saat memeriksa hasil di DevTools: elemen yang tampak menyimpang biasanya membawa deklarasi yang mengubah alurnya. Spesifikasi CSS menyebut skema ini sebagai model pemformatan visual, dan rinciannya dikumpulkan pada panduan alur normal yang dirujuk di bagian Referensi.
Kesalahan umum#
Kesalahan pertama adalah menganggap halaman tanpa aturan layout sebagai halaman tanpa layout. Alur normal sudah bekerja penuh sejak halaman dimuat, sehingga masalah yang dirasakan biasanya terletak pada ekspektasi, bukan pada ketiadaan susunan. Perbaikannya, amati dahulu perilaku bawaan elemen yang bersangkutan pada DevTools sebelum menulis aturan apa pun. Perilaku bawaan bukan keadaan kosong yang menunggu diisi, melainkan skema yang sudah lengkap.
Kesalahan kedua adalah menempatkan elemen block di dalam p dengan harapan keduanya menyatu. Parser HTML menutup p lebih awal, sehingga struktur DOM berbeda dari tulisan pada berkas dan selector mencocokkan sesuatu yang tidak terduga. Perbaikannya, gunakan elemen penanda yang sesuai model konten, seperti strong atau em, di dalam paragraf.
Kesalahan ketiga adalah mengandalkan elemen inline untuk membentuk tumpukan. Menyusun beberapa span berturut-turut tidak menghasilkan blok tersendiri, sehingga seluruhnya menyatu dalam satu baris. Perbaikannya, pilih elemen berperan block seperti div, atau ubah nilai display-nya secara eksplisit. Apabila tumpukan yang diinginkan, alur normal sudah menyediakannya melalui elemen block tanpa penyesuaian apa pun.
Ringkasan#
- Alur normal adalah skema tata letak bawaan browser dan bekerja tanpa satu properti layout pun.
- Elemen block membentuk kotak yang menumpuk secara vertikal dan mengisi lebar yang tersedia.
- Elemen inline mengalir di dalam baris teks, melipat mengikuti lebar baris, dan tidak membentuk blok tersendiri.
- Blok yang berada di dalam elemen inline memecah kotak inline itu, dan bagian-bagiannya dibungkus anonymous box.
- Model layout lain hanya dapat dijelaskan sebagai penyimpangan dari alur normal, sehingga alur normal menjadi titik acuan penilaian.
Referensi#
- Flow layout — MDN — Panduan resmi MDN tentang alur normal block dan inline.
- Visual formatting model — MDN — Uraian model pemformatan visual CSS, termasuk pembentukan kotak anonim.
- Learn CSS — web.dev — Kursus resmi tim Google Chrome yang membahas dasar rendering dan layout.