Menyembunyikan Elemen HTML ~ Pemrograman dan Teknologi

Ada 3 cara yang bisa kalian gunakan untuk menyembunyikan elemen HTML dengan CSS. Untuk menyembunyikan elemen HTML, kalian perlu memberi nilai tertentu pada properti-properti CSS seperti opacity, visibility, dan display. Nilai-nilai yang bisa kalian gunakan pada properti-properti tersebut bisa kalian lihat di bawah ini.

opacity : 0%
visibility : hidden
display : none

Opacity yang diberi nilai 0% akan membuat elemen HTML tidak terlihat karena transparansinya. Walaupun begitu, elemen tersebut masih ada pada tempatnya. Ini juga berlaku untuk properti visibility yang bernilai hidden yang membuat elemen HTML tidak terlihat tapi masih ada pada tempatnya. Bedanya, visibility hanya mengatur agar elemen terlihat atau tidak terlihat. Sebaiknya, kalian menggunakan visibility untuk membuat elemen HTML tidak terlihat jika kalian tidak butuh transparansi.

Visibility hanya punya 2 nilai khusus selain initial dan inherit. Nilai dari visibility bisa berupa hidden atau visible. Visible merupakan nilai default dari. Visibile merupakan nilai default dari visibility. Visible membuat elemen HTML terlihat, sebaliknya hidden membuat elemen HTML tidak terlihat.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
    	body{
    	    background:white;
    	}
    
    	#gambarku{
	    opacity : 0%;
	}
	
	.tersembunyi{
            visibility : hidden;
        }
		
	.hilang{
            display : none;
	}
		
	.teks{
            background: yellow;
            color:red;
	}
    </style>
</HEAD>
<BODY>
    <img src="gambarku.jpeg" id="gambarku">
    <div class="teks">
        <p>Paragraf kesatu</p>
        <p class="tersembunyi">Paragraf kedua</p>
        <p>Paragraf ketiga</p>
    </div>
    
    <div class="teks">
        <p>Paragraf kesatu</p>
        <p class="hilang">Paragraf kedua</p>
        <p>Paragraf ketiga</p>
    </div>
</BODY>
</HTML>

Kode HTML di atas membuat gambar tidak terlihat dengan mengubah transparansinya jadi 0%. Sebagian teks juga disembunyikan dan dihilangkan dengan properti visibility dan display.

Berbeda dengan 2 properti lainnya, display yang bernilai "none" akan menghilangkan elemen HTML dari tampilan. Walaupun begitu, elemen HTML tersebut masih dianggap ada. Elemen yang "dihilangkan" dengan visibility maupun display masih bisa ditampilkan lagi dengan menggunakan script. Perbedaan visibility dan none bisa kalian lihat dari "paragraf kedua" yang dihilangkan dari halaman.