Terkadang konten perlu ada di dalam markup tetapi belum layak tampil: bagian draf, pesan yang hanya relevan setelah pengguna melakukan aksi, atau item yang sedang tidak tersedia. Atribut hidden menyembunyikan elemen seperti itu secara utuh.

hidden adalah atribut boolean sekaligus global attribute — sah pada semua elemen, dan cukup dituliskan namanya tanpa nilai.

Cara Kerja #

Browser menerapkan presentasi “tidak tampil” pada elemen yang membawa hidden: elemen tidak menempati ruang di layar, dan seluruh isi di dalamnya ikut tersembunyi — termasuk elemen anak dan gambarnya.

html 
<h2>Menu Hari Ini</h2>
<p hidden>Sementara tutup karena libur.</p>
<ul>
  <li>Kopi susu</li>
  <li>Teh melati</li>
</ul>

Hasil Render:

Paragraf “Sementara tutup karena libur.” tidak tampil dan tidak meninggalkan ruang kosong — daftar langsung mengikuti judul.

Mari kita telaah kode di atas:

  1. Baris 2 (hidden): paragraf disembunyikan sepenuhnya beserta isinya.
  2. Baris 3-6: daftar tampil normal di posisinya, seolah paragraf tersembunyi tidak pernah ditulis.

Elemen tersembunyi juga tidak dibacakan pembaca layar — seluruh presentasi, visual maupun audio, dihapus.

hidden atau CSS display: none? #

Kedua cara menghasilkan tampilan yang sama: elemen tidak tampak. Bedanya terletak pada maknanya. Atribut hidden menyatakan secara semantik bahwa konten belum relevan — browser, pembaca layar, dan alat bantu lain memperlakukan elemen tersebut sebagai tidak ada. Sementara itu, display: none pada CSS murni urusan presentasi.

Aturan praktisnya: sembunyikan karena kontennya belum relevan → pakai hidden; sembunyikan demi tata letak atau animasi → atur lewat CSS.

Menampilkan Kembali: toggle #

Karena hidden adalah atribut boolean, menampilkan kembali elemen berarti menghapus atributnya. JavaScript melakukannya lewat removeAttribute("hidden"), dan menyembunyikan kembali lewat setAttribute("hidden", "").

Pola ini dipakai untuk konten bersyarat: pesan “stok habis” bisa kita sembunyikan di awal lalu dimunculkan otomatis ketika skrip membaca data stok kosong — tanpa memuat ulang halaman.

hidden dan aria-hidden #

Satu pasangan istilah yang mudah tertukar: hidden menyembunyikan elemen dari semua presentasi (layar dan pembaca layar), sedangkan aria-hidden menyembunyikan elemen dari teknologi bantu saja sementara tampilannya tetap ada. Detailnya dibahas pada Section accessibility-html.

Ringkasan #

  • hidden menyembunyikan elemen beserta seluruh isinya — tidak tampil, tidak menempati ruang, tidak dibacakan pembaca layar.
  • hidden menyatakan konten belum relevan; CSS display: none urusan presentasi.
  • Toggle dilakukan dengan menambah atau menghapus atributnya.
  • Konten tersembunyi tetap terbaca di sumber HTML — bukan tempat data rahasia.

Chapter berikutnya merangkai semuanya: aturan penyarangan (nesting) dan konten model yang menentukan elemen apa yang boleh memuat elemen apa.