Tag Details pada HTML dan Fungsinya
Tag <details> digunakan untuk konten atau informasi yang pada dasarnya tersembunyi tetapi dapat ditampilkan jika user ingin melihatnya. Tag ini digunakan untuk menciptakan widget interaktif sehingga user dapat membuat atapun menutupnya kembali. Konten dari tag detail akan terlihat ketika set atribut dibuka.
Sintak:
<details>
<summary> Teks Konten </summary>
<div> Konten . . . </div>
</details>
Sebelum mempelajari materi tentang Tag Details pada HTML dan Fungsinya, terlebih dahulu pelajari materi tentang: Tag Article pada HTML5 dan Fungsinya, Tag Aside pada HTML5 dan Fungsinya, dan Teks Bidirectional pada HTML5 dan Fungsinya.
HTML5 telah membawa sejumlah tag baru yang memperluas kemampuan pengembang web dalam menyusun dan menyajikan konten dengan lebih baik. Salah satu tag yang bermanfaat dan cukup sering digunakan adalah tag <details>.
Tag <details> dalam HTML5
Tag <details> adalah sebuah tag HTML5 yang digunakan untuk membuat konten interaktif yang dapat diubah menjadi tampilan yang terstruktur dan tersembunyi. Tag ini biasanya digunakan bersama dengan tag <summary>, yang berfungsi sebagai judul atau penanda untuk konten yang tersembunyi.
<details>
<summary> Teks Konten </summary>
<div> Konten . . . </div>
</details>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
details tag
</title>
<style>
summary
{
font-size:40px;
color:#090;
font-weight:bold;}
</style>
</head>
<body>
<details>
<summary>ELfanMauludi</summary>
<p>
Portal ilmu komputer
</p>
<div>
Blog untuk belajar ilmu pemrograman.
</div>
</details>
</body>
</html>
Output:
ELfanMauludi
Atribut dari tag detail adalah atribut 'open' yang digunakan untuk menampilkan informasi tersembunyi secara otomatis.
Sintak:
<details open>
<summary> Teks Konten </summary>
<div> Content . . . </div>
</details>
Contoh: Berikut adalah contoh penggunaan tag <details> dan <summary>.
<!DOCTYPE html>
<html>
<body>
<details>
<summary>
Klik untuk melihat detail
</summary>
<p>
Ini adalah konten yang tersembunyi dan bisa ditampilkan dengan mengklik judul di atas.
</p>
</details>
</body>
</html>
Baca Juga:
Penjelasan: Dari contoh sebelumnya, tag <details> digunakan sebagai wadah untuk konten yang dapat disembunyikan. Tag <summary> digunakan untuk menampilkan judul atau teks yang menandakan adanya konten yang tersembunyi. Ketika pengguna mengklik <summary>, konten yang tersembunyi akan ditampilkan atau disembunyikan sesuai dengan keadaan saat ini.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Membuat atribut dalam tag detail
</title>
<style>
summary
{
font-size:40px;
color:#090;
font-weight:bold;}
</style>
</head>
<body>
<details open>
<summary>ElfanMauludi</summary>
<p>
Portal ilmu komputer
</p>
<div>
Blog untuk belajar ilmu pemrogramman.
</div>
</details>
</body>
</html>
Penggunaan Lanjutan dengan CSS dan JavaScript
Penggunaan CSS dan JavaScript dapat meningkatkan tampilan dan fungsionalitas dari tag <details>. Misalnya, pengembang dapat menyesuaikan tampilan dan animasi yang muncul ketika konten tersembunyi ditampilkan atau disembunyikan. Hal ini dapat memberikan pengalaman pengguna yang lebih menarik.
Manfaat Penggunaan Tag <details>
- Penyajian Konten yang Terstruktur: Tag <details> memungkinkan pengembang untuk mengatur konten dalam tampilan terstruktur yang dapat disembunyikan atau ditampilkan sesuai kebutuhan.
- Interaktivitas: Konten yang disembunyikan dapat dengan mudah ditampilkan atau disembunyikan oleh pengguna hanya dengan mengklik <summary>, yang meningkatkan interaktivitas pengguna dengan halaman web.
- Mengurangi Kebingungan: Dengan kemampuan untuk menyembunyikan detail-detail tertentu, tag <details> membantu mengurangi kebingungan dalam halaman web yang memiliki banyak informasi, memungkinkan pengguna untuk fokus pada konten yang dibutuhkan.
Kelebihan Tag <details> dalam HTML5
Pengenalan tag <details> dalam spesifikasi HTML5 membawa sejumlah kelebihan yang signifikan dalam mengelola dan menyajikan konten pada halaman web. Tag ini memungkinkan pengembang untuk menyembunyikan atau menampilkan sebagian konten secara interaktif, memberikan pengalaman yang lebih dinamis bagi pengguna.
- Pengaturan Konten yang Tersembunyi: Tag <details> memfasilitasi pengaturan konten yang tersembunyi secara efisien. Dengan menggunakan tag ini bersama dengan tag <summary>, pengembang dapat menampilkan judul atau tanda yang mengindikasikan adanya konten yang dapat dibuka atau ditutup, memungkinkan pengguna untuk mengeksplorasi informasi lebih lanjut sesuai kebutuhan.
- Interaktivitas yang Meningkat: Fitur interaktif dari tag <details> mengizinkan pengguna untuk mengendalikan konten yang ingin dilihat. Dengan sekali klik pada <summary>, konten yang tersembunyi bisa ditampilkan atau disembunyikan, memungkinkan akses yang cepat dan mudah terhadap informasi yang relevan.
- Meningkatkan Keterbacaan Halaman Web: Penggunaan tag <details> membantu meningkatkan keterbacaan halaman web. Konten yang tersembunyi memberikan kesan tampilan yang lebih bersih, memungkinkan pengguna untuk fokus pada informasi utama tanpa terganggu oleh detail yang tidak diperlukan pada tahap awal.
- Penggunaan yang Mudah dan Sederhana: Tag <details> mudah diimplementasikan. Dengan struktur yang sederhana, pengembang dapat menambahkan atau mengubah konten yang tersembunyi dengan mudah hanya dengan menambahkan tag <details> beserta tag <summary> pada elemen HTML yang sesuai.
- Responsivitas dan Konsistensi Antar Perangkat: Tag <details> mendukung responsivitas halaman web di berbagai perangkat. Konten yang tersembunyi dapat diakses dengan mudah, baik dari perangkat desktop maupun mobile, meningkatkan konsistensi pengalaman pengguna di berbagai platform.
- Penyajian Konten yang Terstruktur: Dengan memanfaatkan tag <details>, pengembang dapat menyajikan konten secara terstruktur. Penyembunyian bagian tertentu dari konten memungkinkan pembagian informasi menjadi bagian yang lebih terorganisir dan mudah diakses oleh pengguna.
Kekurangan Tag <Details> HTML5
Pada saat terakhir Januari 2022, tag <details> dalam HTML5 umumnya dianggap sebagai alat yang berguna untuk menyajikan konten yang tersembunyi dan memperkaya pengalaman pengguna. Namun, seperti halnya banyak elemen teknologi, ada beberapa pertimbangan yang dapat dianggap sebagai kekurangan atau tantangan terkait penggunaan tag <details>.
- Keterbatasan Dukungan Browser: Pada waktu tertentu, beberapa versi peramban web mungkin tidak mendukung tag <details> dengan sepenuhnya atau tidak konsisten, terutama pada versi yang lebih lama. Ini bisa menyebabkan konten yang dimaksudkan untuk disembunyikan tetap terlihat atau tidak berfungsi sesuai yang diharapkan.
- Kendala Penyesuaian Desain: Meskipun tag <details> memungkinkan pengembang untuk menyembunyikan atau menampilkan konten tambahan, penyesuaian desain untuk tampilan yang responsif dan penanganan yang baik dalam berbagai situasi layar dapat menjadi rumit. Tata letak yang kompleks dan penyesuaian CSS yang memadai diperlukan untuk memastikan tampilan yang konsisten di berbagai perangkat.
- Keterbatasan Fungsionalitas JavaScript: Sementara tag <details> dapat ditingkatkan dengan JavaScript untuk menambahkan fitur tambahan, beberapa fungsi JavaScript mungkin tidak berjalan dengan baik pada elemen tersebut. Hal ini bisa menyebabkan masalah dalam menyesuaikan atau menambahkan fungsionalitas tambahan yang kompleks.
- Aksesibilitas Terhadap Pengguna Dengan Keperluan Khusus: Meskipun tag <details> dan <summary> memberikan fleksibilitas dalam menampilkan dan menyembunyikan konten, pengguna dengan kebutuhan khusus atau perangkat bantuan mungkin mengalami kesulitan dalam mengakses dan memahami bagaimana menggunakan elemen tersebut. Ini bisa mempengaruhi aksesibilitas konten bagi sebagian pengguna.
- SEO dan Konten Tersembunyi: Meskipun tag <details> memungkinkan pengembang untuk menyembunyikan konten, terdapat pertimbangan terkait efek terhadap SEO (Search Engine Optimization). Meskipun penggunaan tag ini tidak secara langsung menyebabkan penalti SEO, namun penggunaannya yang berlebihan untuk menyembunyikan konten penting dapat mempengaruhi peringkat halaman di mesin pencari.
Tag <details> adalah alat yang bermanfaat dalam menyusun konten web secara terstruktur dan interaktif. Dengan kemampuannya untuk menyembunyikan atau menampilkan konten tambahan, tag ini memberikan fleksibilitas kepada pengembang untuk membuat tampilan yang lebih bersih dan memudahkan pengguna untuk menemukan informasi yang dibutuhkan. Dengan penggunaan yang tepat dan kreatif, tag <details> dapat meningkatkan pengalaman pengguna secara keseluruhan dalam menjelajahi dan berinteraksi dengan halaman web.
Referensi Tambahan:
Artikel ini akan dibaca oleh: Ika Putri Rohmatussa'Diyah, Indra Yoga Saputra, Kharisma Dwi Afrilia, M. Kaharudin Nicha Wibowo, dan Maulana Fadil Ibrahim.
6 komentar untuk "Tag Details pada HTML dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa fungsi tag detail pada html?
BalasHapusTag < details > menentukan detail tambahan yang dapat dibuka dan ditutup user sesuai dengan permintaan. Tag Details sering digunakan untuk membuat widget interaktif yang dapat dibuka dan ditutup oleh user. Secara default, widget yang dibuat menggunakan tag detail akan tertutup, dan ketika terbuka widget tersebut kemudian akan mengembang dan menampilkan konten yang disimpan didalamnya.
HapusApa fungsi dari tag details dan tag summary jika digunakan secara bersamaan pada html?
BalasHapusElement < summary > digunakan bersamaan dengan element < details > untuk menyediakan ringkasan yang dapat dilihat oleh user. Ketika ringkasan atau summary di klik, maka konten yang ditempatkan pada elemen < details > akan menjadi terlihat oleh user, yang sebelumnya adalah tersembunyi.
HapusKayak preview yang sering muncul di blog-blog komik hentai gitu ya?
HapusIya, kurang lebih demikian.
Hapus