Tentukan perilaku tampilan elemen halaman web pada HTML dengan display CSS

Sultan Fajar Ramadhan

11 min red

September 22, 2025

Display roles CSS adalah properti yang menentukan bagaimana elemen ditampilkan dan berinteraksi dengan elemen lain di halaman web (Duckett, 2011). Properti ini mempengaruhi layout dasar dan posisi elemen dalam container.

Dengan display roles, developer dapat mengontrol apakah elemen muncul sebagai blok, inline, inline-block, grid, atau flex. Hal ini penting untuk mengatur tata letak halaman agar rapi dan responsif.

Display roles juga membantu dalam pengelolaan hierarki visual. Elemen dengan display berbeda dapat menonjol atau menyesuaikan diri dengan elemen lain sesuai kebutuhan desain (Frain, 2015).

Selain itu, pemahaman display roles mempermudah penyesuaian halaman untuk berbagai perangkat. Developer dapat menciptakan layout adaptif dan interaktif tanpa menulis kode kompleks tambahan.

2. Kenapa Penting

Mengatur Layout Halaman

Display roles CSS memungkinkan developer mengontrol posisi dan urutan elemen di halaman (Duckett, 2011). Dengan display yang tepat, elemen bisa ditampilkan sebagai blok atau inline sesuai kebutuhan.

Pengaturan layout yang baik membuat halaman mudah dibaca dan navigasi menjadi intuitif. Elemen yang tersusun rapi memandu mata pengguna dan meningkatkan pengalaman.

Selain itu, display roles mempermudah pengelolaan container dan nested element. Hal ini penting untuk desain yang konsisten di berbagai ukuran layar dan perangkat.

Mendukung Responsivitas

Display roles berperan penting dalam desain responsif (Frain, 2015). Dengan mengubah display elemen, layout dapat menyesuaikan ukuran layar tanpa merusak struktur halaman.

Elemen blok dapat berubah menjadi inline atau flex pada tampilan mobile. Hal ini membantu menjaga keterbacaan dan estetika konten.

Selain itu, display roles mempermudah penggunaan grid atau flex untuk layout kompleks. Developer dapat menciptakan halaman adaptif dengan lebih sedikit kode dan efisien.

Meningkatkan Interaksi Pengguna

Display roles juga berpengaruh pada interaksi pengguna (MDN Web Docs, 2024). Elemen yang ditampilkan dengan display inline-block atau flex memudahkan pengguna berinteraksi dengan tombol atau form.

Konten yang tersusun dengan benar meminimalkan kebingungan dan mempercepat tindakan pengguna. Hal ini meningkatkan UX secara keseluruhan.

Dengan display roles, developer dapat mengatur prioritas visual dan fokus pengguna. Elemen penting bisa ditonjolkan tanpa mengganggu layout halaman secara keseluruhan.

3. Konsep Dasar

Display roles CSS adalah properti yang mengontrol cara elemen muncul dan berinteraksi dengan elemen lain dalam layout halaman (Duckett, 2011). Properti ini menentukan apakah elemen bersifat blok, inline, inline-block, grid, flex, atau none.

Contoh dasar:

<div style="display: block; border: 1px solid black; padding: 20px;">
  Elemen blok
</div>
<span style="display: inline;">Elemen inline</span>

Penjelasan: display: block membuat elemen menempati seluruh lebar container, sementara display: inline menempati hanya ruang konten. Pemahaman dasar ini penting untuk menyusun layout halaman.

Display roles juga digunakan untuk elemen kompleks seperti flex container atau grid container (Frain, 2015). Properti ini mempermudah pengaturan posisi child element secara horizontal dan vertikal.

Selain itu, display roles memengaruhi flow dokumen. Elemen dengan display berbeda akan memengaruhi jarak, wrapping, dan posisi elemen lain. Developer dapat memanfaatkan ini untuk menciptakan layout modular dan responsif.

Display roles dapat dikombinasikan dengan properti lain seperti margin, padding, atau positioning. Kombinasi ini memungkinkan fleksibilitas tinggi dalam desain halaman, menjaga estetika, dan mempermudah interaksi pengguna.

Properti display: none juga termasuk display role yang umum digunakan untuk menyembunyikan elemen tanpa menghapusnya dari DOM. Hal ini berguna untuk fitur interaktif, pop-up, atau elemen dinamis.

4. Jenis dan Contoh

Block

Display block membuat elemen menempati seluruh lebar container dan memulai baris baru (Duckett, 2011). Elemen blok biasanya digunakan untuk container, paragraf, atau div.

Contoh:

<div style="display: block; border: 1px solid black; padding: 10px;">
  Elemen block
</div>

Penjelasan: Elemen ini menempati seluruh baris, sehingga elemen lain akan muncul di bawahnya. Teknik ini penting untuk layout vertikal dan konten utama.

Block juga mempermudah pengaturan margin dan padding. Elemen blok dapat ditumpuk dan diatur jaraknya tanpa memengaruhi elemen inline di sekitarnya.

Selain itu, block adalah dasar untuk struktur halaman modern. Container utama biasanya menggunakan display block untuk mempermudah nested element.

Inline

Display inline membuat elemen menempati ruang sesuai konten dan tidak memulai baris baru (Frain, 2015). Elemen inline biasanya digunakan untuk teks atau link.

Contoh:

<span style="display: inline; color: blue;">Elemen inline</span>

Penjelasan: Elemen ini hanya menempati ruang konten, memungkinkan elemen lain muncul di sampingnya. Inline cocok untuk teks, link, atau icon kecil.

Inline tidak mendukung pengaturan margin vertikal. Margin horizontal dan padding tetap bisa diterapkan.

Penggunaan inline membantu mengatur teks dan elemen kecil tanpa merusak flow halaman. Teknik ini penting untuk desain fleksibel dan konsisten.

Flex

Display flex memungkinkan container mengatur posisi child element secara fleksibel horizontal maupun vertikal (MDN Web Docs, 2024). Flex populer untuk layout modern.

Contoh:

<div style="display: flex; gap: 10px;">
  <div style="border:1px solid black; padding:10px;">Item 1</div>
  <div style="border:1px solid black; padding:10px;">Item 2</div>
</div>

Penjelasan: Elemen child tersusun rapi dengan jarak antar elemen 10px. Flex mempermudah distribusi dan alignment elemen dalam satu baris atau kolom.

Flex sangat berguna untuk navbar, card layout, atau list interaktif. Properti ini mendukung desain responsif dengan mudah.

5. Implementasi dari Setiap Contoh

Block

Implementasi block biasanya digunakan pada elemen container utama, artikel, atau section halaman (Duckett, 2011). Dengan block, struktur halaman bisa dibuat lebih rapi.

<div style="display: block; border: 2px solid black; margin: 10px;">
  Konten utama halaman
</div>

Penjelasan: Elemen block ini menjadi pembungkus utama konten. Dengan menambahkan margin, konten terlihat lebih terpisah dan mudah dipahami.

Inline

Implementasi inline sering digunakan untuk menampilkan teks dengan gaya tertentu atau link navigasi (Frain, 2015). Inline memungkinkan beberapa elemen berada dalam satu baris.

<p>Silakan klik <a style="display: inline; color: red;">tautan ini</a> untuk informasi lebih lanjut.</p>

Penjelasan: Elemen inline tidak memengaruhi flow paragraf. Link tetap berada dalam baris teks, membuat pengalaman membaca lebih alami.

Flex

Implementasi flex berguna untuk membuat layout interaktif, seperti navbar atau daftar produk (MDN Web Docs, 2024). Flex memudahkan distribusi ruang antar item.

<div style="display: flex; justify-content: space-between;">
  <div>Logo</div>
  <div>Menu</div>
  <div>Login</div>
</div>

Penjelasan: Elemen div tersusun dalam satu baris dengan jarak yang merata. Implementasi ini cocok untuk desain modern dan responsif.

6. Kesalahan

6.1. Menggunakan block untuk Elemen yang Harusnya inline

Kesalahan umum pertama adalah memaksa elemen kecil seperti link atau tombol menggunakan display: block;. Hal ini membuat elemen yang seharusnya berada dalam satu baris justru turun ke baris baru (Duckett, 2011). Akibatnya, layout terlihat berantakan dan mengurangi keterbacaan.

Contoh salah:

<a href="#" style="display: block;">Link 1</a>
<a href="#" style="display: block;">Link 2</a>

Contoh benar:

<a href="#" style="display: inline;">Link 1</a>
<a href="#" style="display: inline;">Link 2</a>

Dengan inline, link tetap berada dalam satu baris, sehingga lebih mudah diakses dan lebih hemat ruang.

6.2. Mengabaikan Properti Pendukung flex

Kesalahan berikutnya adalah menggunakan display: flex; tanpa menambahkan properti pendukung seperti justify-content atau align-items. Tanpa properti tersebut, flex container hanya meratakan item sesuai default (Frain, 2015). Hasilnya, layout tidak sesuai ekspektasi.

Contoh salah:

<div style="display: flex;">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</div>

Contoh benar:

<div style="display: flex; justify-content: space-between; align-items: center;">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</div>

Dengan penambahan justify-content dan align-items, elemen lebih tertata, serasi, dan responsif.

6.3. Mencampur inline dan block Tanpa Perencanaan

Banyak pemula mencampur elemen inline dan block tanpa memperhatikan konsistensi layout. Misalnya, menaruh heading (block) di tengah-tengah teks inline, membuat tampilan tidak harmonis (MDN Web Docs, 2024).

Contoh salah:

<p>Teks pembuka <h2>Judul Tengah</h2> teks penutup.</p>

Contoh benar:

<p>Teks pembuka <span style="font-weight: bold;">Judul Tengah</span> teks penutup.</p>

Heading seharusnya berdiri sendiri sebagai elemen block, bukan dicampur dalam paragraf. Jika ingin efek tebal, gunakan span dengan styling, bukan h2.

Tabel Perbandingan Kesalahan

7. Best Practice Display Roles

Block untuk Struktur Utama

Penggunaan display role block sangat dianjurkan untuk elemen-elemen utama yang menjadi pondasi layout halaman web. Elemen dengan sifat block secara otomatis mengambil seluruh lebar baris, sehingga cocok digunakan untuk bagian besar seperti header, footer, atau section. Dengan cara ini, halaman memiliki alur visual yang lebih jelas dan konsisten (Meyer & Winer, 2019).

Konsistensi dalam pemakaian block memudahkan developer menjaga struktur halaman tetap rapi. Setiap elemen yang bersifat block akan tersusun dari atas ke bawah, sehingga tidak menimbulkan tumpang tindih atau kebingungan dalam tata letak. Hal ini sangat membantu ketika halaman harus dikembangkan lebih lanjut oleh tim yang berbeda (Marcotte, 2020).

Selain itu, block juga memudahkan penerapan prinsip desain responsif. Karena elemen block sudah menempati seluruh lebar, pengembang dapat dengan mudah menyesuaikan ukurannya menggunakan aturan proporsional tanpa mengganggu keterbacaan konten. Oleh karena itu, block sebaiknya selalu menjadi pilihan pertama untuk membentuk kerangka layout dasar (Cederholm, 2017).

Inline untuk Konten Teks

Display role inline paling tepat digunakan untuk elemen yang harus mengalir bersama teks. Elemen inline tidak memulai baris baru dan hanya menempati ruang sesuai kebutuhan kontennya. Contoh penerapan terbaik adalah pada tautan, penekanan kata, atau ikon kecil dalam aliran teks (W3C, 2021).

Menggunakan inline secara konsisten membantu menjaga alur bacaan agar tetap natural. Jika pengembang salah memilih role dan menggunakan block untuk konten kecil, maka aliran teks bisa terputus dan menurunkan pengalaman pengguna. Inline memungkinkan teks tetap terjaga dengan keteraturan dan harmonis (Keith, 2010).

Inline juga mendukung keberlanjutan dalam hal aksesibilitas. Karena inline mengikuti pola teks, pembaca layar akan membacanya dengan runtut tanpa jeda yang mengganggu. Dengan demikian, penggunaan inline dapat meningkatkan keterbacaan dan inklusivitas halaman (Kirkpatrick et al., 2018).

Inline-block untuk Elemen Modular

Display role inline-block digunakan ketika pengembang membutuhkan elemen kecil yang tetap sejajar namun bisa diatur ukurannya. Inline-block menggabungkan keunggulan inline yang bisa berada dalam satu baris, sekaligus keunggulan block yang memungkinkan kontrol tinggi terhadap dimensi elemen (Coyier, 2018).

Best practice dalam penggunaan inline-block adalah untuk elemen navigasi, ikon dengan teks, atau daftar produk kecil. Dengan pendekatan ini, pengembang dapat menjaga kerapian layout sekaligus memberikan fleksibilitas pengaturan ukuran setiap elemen. Hasilnya, tampilan lebih konsisten dan mudah disesuaikan (Holmes, 2021).

Selain itu, inline-block membantu mengurangi ketergantungan pada float yang sering menyebabkan bug pada layout. Karena inline-block sudah mendukung pengaturan dimensi dan margin secara natural, struktur halaman menjadi lebih stabil. Oleh sebab itu, inline-block direkomendasikan untuk desain modular yang tidak terlalu kompleks (Keith, 2010).

Flex untuk Tata Letak Responsif

Display role flex paling ideal untuk tata letak satu dimensi, baik dalam baris maupun kolom. Flexbox memungkinkan pengembang mengatur distribusi ruang antar elemen secara fleksibel, sehingga sangat cocok digunakan pada navbar, daftar produk, atau card layout (W3C, 2021).

Best practice dalam penggunaan flex adalah memanfaatkan properti alignment seperti justify-content dan align-items agar elemen tersusun dengan proporsional. Hal ini memudahkan halaman untuk beradaptasi pada berbagai ukuran layar tanpa perlu penyesuaian manual berulang kali (Marcotte, 2020).

Selain itu, flex dapat mengurangi kebutuhan terhadap positioning yang rumit. Dengan memanfaatkan aturan flex, tata letak lebih mudah dipahami dan dikelola oleh tim pengembang. Oleh karena itu, flex menjadi solusi praktis untuk layout responsif modern (Meyer & Winer, 2019).

Grid untuk Layout Kompleks

Display role grid sangat cocok digunakan untuk tata letak dua dimensi yang kompleks. Grid memungkinkan pengembang membagi halaman ke dalam baris dan kolom yang dapat diatur secara presisi. Dashboard, galeri, dan majalah online adalah contoh ideal untuk penerapan grid (Holmes, 2021).

Best practice dalam grid adalah merancang template area sejak awal agar struktur halaman tetap konsisten. Dengan cara ini, pengembang dapat menempatkan elemen sesuai dengan peranannya tanpa harus khawatir terjadi perubahan posisi yang tidak diinginkan. Grid juga mendukung layout responsif dengan kombinasi aturan fr dan auto-fit (Cederholm, 2017).

Selain fleksibilitas, grid juga membantu meningkatkan keterbacaan kode. Struktur yang terorganisir dalam grid memudahkan kolaborasi tim, terutama pada proyek besar yang melibatkan banyak komponen. Karena alasan ini, grid dianggap sebagai standar emas untuk layout kompleks di era modern (W3C, 2021).

8. Kesimpulan

Display roles merupakan elemen penting dalam pengembangan layout halaman web karena menentukan bagaimana setiap komponen ditampilkan dan berinteraksi dengan konten lainnya. Pemahaman mendalam tentang block, inline, inline-block, flex, dan grid memberikan landasan kokoh bagi pengembang untuk membangun struktur halaman yang responsif, efisien, serta ramah pengguna. Dengan pemilihan display role yang tepat, pengembang dapat menciptakan pengalaman visual yang konsisten tanpa mengorbankan fleksibilitas desain (Meyer & Winer, 2019).

Selain itu, display roles berfungsi sebagai panduan teknis yang mempermudah kolaborasi antar anggota tim pengembang. Ketika best practice diterapkan dengan baik, halaman tidak hanya lebih mudah dirawat, tetapi juga lebih adaptif terhadap perubahan kebutuhan pengguna maupun perkembangan perangkat. Dengan demikian, display roles dapat dipandang sebagai komponen fundamental dalam pengembangan web modern yang memadukan estetika, fungsionalitas, dan skalabilitas (W3C, 2021).

Gagasan Utama

• Display roles menentukan struktur dan alur visual halaman web.
• Block, inline, inline-block, flex, dan grid memiliki fungsi spesifik yang saling melengkapi.
• Pemilihan display role yang tepat meningkatkan konsistensi dan aksesibilitas.
• Penerapan best practice mempermudah perawatan serta pengembangan lanjutan.
• Display roles adalah dasar utama bagi desain responsif dan modern.

9. Referensi

• Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. (2011). World Wide Web Consortium (W3C). Retrieved from https://www.w3.org/TR/CSS2/

• W3C. (2021). CSS Display Module Level 3. World Wide Web Consortium. Retrieved from https://www.w3.org/TR/css-display-3/

• Meyer, E. A., & Winer, B. (2019). CSS: The Definitive Guide (4th ed.). O’Reilly Media.

• Robbins, J. N. (2018). Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics (5th ed.). O’Reilly Media.

• Cederholm, D. (2017). CSS3 for Web Designers. A Book Apart.

• Keith, J. (2010). HTML5 for Web Designers. A Book Apart.

• Pilgrim, M. (2010). Dive Into HTML5. O’Reilly Media.

• Mozilla Developer Network (MDN). (2023). CSS: Cascading Style Sheets. Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS