Mengenal Elemen Details dan Dialog Pada HTML5

Ada sangat banyak tag-tag atau elemen-elemen pada HTML 5 nya. Kita akan bahas tag yang menurut saya menarik dan unik yaitu tag dialog atau tag details. Langsung saja yang pertama tag dialog yang digunakan untuk menampilkan pop-up atau info info singkat untuk websitenya contohnya sebagai berikut

kita berikan attribute open agar kotak dialognya otomatis terbuka. Maka dari itu jika kita tampilkan hasilnya di chrome kotak dialognya akan tampil ditengah tengah browser dan otomatis punya nilai default border dan paddingnya.

dan berikutnya adalah tag details dan tag summary digunakan untuk menyembunyikan isi text terlebih dahulu dan isi text akan tampil ketika kita mengklik bagian summarynya seperti berikut

kode diatas text yang akan disembunyikan yaitu tag p yang dibungkus dengan tag detailsnya. nah jika kita jalankan maka akan ada tombol tanda panah otomatis yang bisa klik.

Itu dia tag-tag terbaru pada HTML 5nya. Perlu catatan bahwa tag-tag tersebut belum support di semua browser. Oke sampai jumpa diartikel berikutnya.

18 Juni 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat