Atribut global tersembunyi di HTML5 adalah atribut Boolean. Ini menetapkan bahwa elemen yang ditargetkan lebih relevan atau tidak untuk dokumen HTML. Salah satu contoh penggunaan atribut tersembunyi adalah dapat digunakan untuk menutupi/mengungkap konten tertentu yang ada di halaman web HTML yang tidak diotorisasi kecuali pengguna telah diautentikasi. Sampai saat itu, browser tidak akan merender elemen dengan properti tersembunyi aktif (mis. e. atribut ditetapkan)
Penggunaan Atribut Tersembunyi
Salah satu penggunaan atribut tersembunyi seperti menjauhkan pengguna dari melihat elemen sampai beberapa kondisi terpenuhi (seperti memilih tombol radio, dll. ) setelah itu, kode JavaScript dapat menetapkan kembali atribut tersembunyi, sehingga membuat elemen terlihat. Atribut ini tidak boleh digunakan untuk menyembunyikan konten hanya untuk presentasi individu;
Konten yang disembunyikan tidak boleh dikaitkan dengan konten yang diperlihatkan atau konten turunan dari konten tersembunyi yang belum aktif. Ini memastikan bahwa elemen formulir masih dapat dikirimkan dan elemen skrip masih dapat dijalankan. Namun, Skrip dan Elemen dapat merujuk ke konten apa pun yang disembunyikan dalam beberapa konteks lain
It would be totally incorrect to utilize the attribute in a real-world scenario to connect to a section pronounced with a hidden attribute. If the linked content is neither relevant nor applicable, then there is no need to pack them together. As per the definition of the Hidden attribute, we can hide any content present within an HTML webpage using the hidden attribute and then JavaScript code can be used to access it afterwards. Target to hide an element can also be achieved by CSS with the property as display property (i.e. setting it to none) but using the hidden attribute is an easy approach.
Mulai Kursus Pengembangan Perangkat Lunak Gratis Anda
Pengembangan web, bahasa pemrograman, pengujian Perangkat Lunak & lainnya
Catatan. Mengubah nilai properti tampilan CSS pada elemen dengan atribut tersembunyi akan menggantikan perilakunya. Misalnya, elemen ditata sebagai tampilan. flex akan ditampilkan meskipun ada atribut tersembunyi
Sintaksis
<element hidden> </element>Contoh Elemen Sembunyikan HTML
Diberikan di bawah ini adalah contoh HTML Hide Element
Contoh 1
Kode
<!DOCTYPE html> <html> <head> <title>HTML hide element</title> <style> body { text-align:center; } h1 { color:blue; } </style> </head> <body> <h1>EDUCBA</h1> <h2>HTML Hide element</h2> <!-- hidden paragraph --> <p hidden>A learning portal</p> </body> </html>_Keluaran
Contoh #2
Kode
<!DOCTYPE html> <html> <head> <title>HTML hide element</title> <style> body { text-align:center; } h1 { color:blue; } </style> </head> <body> <h1>EDUCBA</h1> <h2>HTML Hide element</h2> <button id="btn">TOGGLE HIDDEN ELEMENTS</button> <p id="p" hidden>This paragraph uses HTML5's <code>hidde</code> element.</p> <textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea> <!-- hidden paragraph --> <p hidden>A learning portal</p> <script> document.getElementById("btn").addEventListener('click', function () {p.hidden = !p.hidden;ta.hidden = !ta.hidden;}, false); </script> </body> </html>Keluaran
Contoh #3 – Kegunaan Atribut
Sesuai definisi atribut Tersembunyi, kita dapat menyembunyikan konten apa pun yang ada di dalam halaman web HTML menggunakan atribut tersembunyi dan kemudian kode JavaScript dapat digunakan untuk mengaksesnya setelah itu. Target untuk menyembunyikan suatu elemen juga dapat dicapai oleh CSS dengan properti sebagai properti tampilan (mis. e. menyetelnya menjadi tidak ada) tetapi menggunakan atribut tersembunyi adalah pendekatan yang mudah. Oleh karena itu, kita dapat mengatakan bahwa konten dengan atribut tersembunyi adalah bagian dari DOM, tetapi pengguna tidak dapat mengaksesnya
In the below example, we’ll pick the part of a hidden element using JavaScript code:
Paket Pengembangan Perangkat Lunak Semua dalam Satu(600+ Kursus, 50+ proyek)
Harga
Lihat Kursus
600+ Kursus Daring. 50+ proyek. 3000+ Jam. Sertifikat yang Dapat Diverifikasi. Akses Seumur Hidup
4. 6 (86.502 peringkat)
Kode
<!DOCTYPE html> <html> <head> <title>HTML hide element</title> <style> body { text-align:center; } h1 { color:blue; } </style> </head> <body> <h1>EDUCBA</h1> <h2>HTML Hide element</h2> <button id="btn">DISPLAY HIDDEN TEXT</button> <output id="op">(Hidden text will appear here)</output> <textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea> <!-- hidden paragraph --> <p hidden>A learning portal</p> <script> document.getElementById("btn").addEventListener('click', function () {op.innerHTML = ta.innerHTML;}, false); </script> </body> </html>Keluaran
Poin Penting untuk Diingat
Ini adalah beberapa poin penting yang harus diketahui sebelum berinteraksi dengan atribut tersembunyi
- Konten yang dapat diakses pada resolusi diskrit dan ukuran layar tidak boleh menggunakan atribut tersembunyi untuk menyembunyikan konten
- Atribut tersembunyi tidak boleh diuntungkan untuk menyembunyikan/menutupi bagian yang tidak terlihat dari pengalih konten atau komponen tab
- Elemen non-tersembunyi tidak boleh di-hyperlink ke elemen tersembunyi
- Elemen yang ditandai sebagai tersembunyi masih berpotensi aktif
- Jika Anda ingin menyembunyikan konten dari semua pengguna, gunakan atribut tersembunyi HTML5 (bersama dengan tampilan CSS. none untuk browser yang belum mendukung tersembunyi). Tidak perlu menggunakan aria-hidden
Kesimpulan
Disebutkan di bawah ini adalah beberapa poin kunci utama yang harus Anda ingat dari topik ini
Kasus penggunaan yang cocok untuk atribut tersembunyi termasuk
- Konten yang belum relevan tetapi mungkin dibutuhkan nanti
- Konten yang digunakan sebelumnya tetapi tidak diperlukan lagi
- Konten yang dapat digunakan kembali dan digunakan oleh berbagai bagian halaman lainnya dengan gaya seperti template
- Membuat kanvas di luar layar sebagai penyangga gambar
Kasus penggunaan atribut tersembunyi yang tidak sesuai termasuk
- Menyembunyikan panel di dalam kotak dialog bertab
- Menyembunyikan konten dalam presentasi individu sementara bermaksud agar terlihat di orang lain
Catatan. Elemen yang disembunyikan tidak boleh ditautkan dengan elemen lain yang tidak disembunyikan sampai mereka terkait
Artikel yang Direkomendasikan
Ini adalah panduan untuk HTML Hide Element. Di sini kita membahas pengenalan, penggunaan atribut tersembunyi, dan contoh elemen sembunyikan HTML. Anda juga dapat melihat artikel berikut untuk mempelajari lebih lanjut –