Perbedaan Antara Display None dan Visibility Hidden

CSS - Untuk menyembunyikan objek dengan CSS, ada beberapa alternatif kode yang digunakan, diantaranya display:none dan visibility:hidden. Bahkan ada juga alternatif lainnya, yaitu membuat objek transparan dengan menambahkan kode opacity:0.

Sebelum melangkah pada perbedaan, sebaiknya kita ketahui dulu properti dari keduanya.

Display none dan visibility hidden

Display mempunyai 2 property yaitu :
  • none (tidak kelihatan)
  • block (kelihatan)
Begitupun visibility mempunyai 2 property yaitu :
  • hidden (tidak kelihatan)
  • visible (kelihatan)

Inti perintah display:none dan visibility:hidden sebetulnya sama saja yaitu menghilangkan objek dari halaman HTML. Perbedaannya sebenarnya tidak teralu mencolok, hanya pada masalah space saja.

Dengan menggunakan display:none maka space akan hilang, sedangkan dengan visibility:hidden space tetap ada. Sebagai contoh lihat tulisan CONTOH di bawah ini

saya sembunyikan CONTOH2 dengan display:none maka space hilang seperti di bawah ini :


apabila disembunyikan dengan visibility:hidden maka space tetap ada :

Baca juga :

Apakah display:none akan terbaca oleh google?

Ya, google memiliki sistem tertentu walaupun objek disembunyikan dengan display:none atau visibility:hidden objek akan tetap terbaca. display:none atau visibility:hidden hanya memanipuasi browser saja.

Apakah display:none bagus untuk SEO?

Penggunaan display:none atau visibility:hidden masih menjadi perdebatan, tapi menurut kebanyakan sumber, hal ini tidak akan mengganggu atau bermasalah dalam SEO. Akan tetapi khusus untuk text dianjurkan untuk tidak menggunakan display:none atau visibility:hidden sebagaimana dikatakan Matt Cutts di webnya.

Semoga bermanfaat...