Antarmuka nyata sering menuntut elemen untuk tidak tampil sama sekali: panel tab yang belum aktif, menu yang belum dibuka, atau baris form yang relevan hanya jika opsi tertentu dipilih. Nilai display: none adalah jawaban paling tegas untuk kebutuhan itu — elemen yang diberi nilai ini diperlakukan seolah tidak pernah ada di halaman. Karena dampaknya menyeluruh, kita perlu memahami persis apa yang terjadi pada layout, pada interaksi, dan pada pembaca layar.

Keluar dari Render Tree #

Saat sebuah elemen diberi display: none, browser tidak membuat kotak untuk elemen tersebut sama sekali. Dokumentasinya ada pada MDN: display . Tidak ada kotak berarti tiga konsekuensi sekaligus:

  • Ruangnya hilang — elemen setelahnya naik mengisi posisi kosong, sehingga layout tersusun ulang.
  • Seluruh keturunannya ikut tersembunyi — tidak ada properti anak yang dapat membatalkan display: none milik induknya.
  • Interaksi terputus — tautan dan tombol di dalamnya tidak dapat menerima fokus, klik, atau tab dari keyboard.

Ketiga sifat ini berbeda dari visibility: hidden yang hanya menyembunyikan gambar tanpa melepas ruang — perbandingan lengkapnya ada di Chapter Visibility .

Contoh: Langkah yang Disembunyikan dan Panel yang Dapat Dialihkan #

html index.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <style>
    * { box-sizing: border-box; margin: 0; }
    .kartu {
      padding: 12px 16px;
      margin-bottom: 8px;
      background: rgb(226, 232, 240);
      border-radius: 8px;
    }
    #kartu-2 { display: none; }
    .tersembunyi { display: none; }
  </style>
</head>
<body>
  <div class="kartu" id="kartu-1">Langkah 1 — Siapkan data</div>
  <div class="kartu" id="kartu-2">Langkah 2 — Verifikasi email</div>
  <div class="kartu" id="kartu-3">Langkah 3 — Mulai belajar</div>

  <button id="tombol-panel">Sembunyikan panel</button>
  <div id="panel-detail">
    Panel ini dapat disembunyikan lewat tombol di atasnya.
  </div>
  <script>
    const tombol = document.getElementById("tombol-panel");
    const panel = document.getElementById("panel-detail");
    tombol.addEventListener("click", () => {
      panel.classList.toggle("tersembunyi");
      const kini = panel.classList.contains("tersembunyi");
      tombol.textContent = kini ? "Tampilkan panel" : "Sembunyikan panel";
    });
  </script>
</body>
</html>

Hasil di Browser:

text 
Daftar hanya menampilkan Langkah 1 dan Langkah 3; Langkah 2 yang
bernilai display: none tidak mengambil ruang sama sekali (computed
display: none).
Panel detail tampil di bawah daftar (computed display: block) dan
beralih ke display: none saat tombol ditekan — pada kondisi itu panel
keluar dari render tree dan dari accessibility tree.

Mari kita bedah aturan yang bekerja:

  1. Baris 9 (#kartu-2 { display: none; }): kartu kedua tidak dirender, sehingga urutan yang terlihat langsung melompat dari Langkah 1 ke Langkah 3. Inilah cara paling umum menandai langkah bersyarat pada alur pendaftaran.
  2. Baris 10 (.tersembunyi { display: none; }): kelas utilitas ini dipakai bersama JavaScript. Memindahkan nilai display ke kelas (bukan menulis style.display langsung) membuat perilaku tampil/sembunyi tetap dikelola dari CSS.
  3. Baris 21–30 (script): tombol menambah atau menghapus kelas tersembunyi pada panel. Pergantian berlangsung tanpa animasi karena kotak benar-benar dibuat dan dihentikan seketika — pola transisi untuk perubahan ini dibahas pada Section Transitions dan Animations .

Dampak pada Aksesibilitas #

display: none menghapus elemen dari accessibility tree: pembaca layar tidak akan membacanya, dan elemen yang dapat difokus di dalamnya dilewati ketika pengguna menekan Tab. Sifat ini boleh dipakai dua arah — tepat untuk panel yang memang tidak relevan, tetapi berbahaya bila kita hanya ingin “menyembunyikan secara visual” sambil tetap dibacakan. Untuk kebutuhan terakhir, teknik khusus tersedia dan dibahas pada Section Accessibility .

Sebagai gambaran singkat sebelum chapter berikutnya: visibility: hidden juga menyembunyikan elemen beserta keturunannya, tetapi ruangnya tetap dipakai dan elemen tetap berada di dalam alur layout. Kapan nilai mana yang tepat — termasuk opacity: 0 yang ternyata masih dapat diklik — kita rangkum pada tabel perbandingan di Chapter Visibility .

Pembanding: Atribut hidden #

HTML menyediakan jalan pintas untuk kebutuhan yang sama: atribut hidden pada elemen apa pun. Browser menerapkannya melalui stylesheet bawaan yang berisi aturan [hidden] { display: none }, sehingga hasil akhirnya identik — tanpa kotak, tanpa ruang, tanpa aksesibilitas. Gunakan atribut ini ketika penyembunyiannya bagian dari struktur dokumen (konten yang memang tidak berlaku untuk kondisi saat ini).

Ada satu jebakan yang wajib diantisipasi. Karena aturan bawaan tersebut hanya berupa satu selector atribut, deklarasi display milik kita dengan specificity lebih tinggi akan menimpanya: elemen ber-atribut hidden yang diberi display: flex di CSS author akan tetap tampil. Bila proyek menata display secara luas, tambahkan aturan pengaman [hidden] { display: none !important; } atau reset serupa di awal stylesheet.