HTMl5 Details Dialog Canvas SVG Inline
Ringkasan
HTML5 membawa elemen interaktif tanpa JS berat: <details>/<summary> (disclosure), <dialog> (modal), <canvas> (bitmap), <svg> (vektor inline).
Konsep Dasar
<details><summary>— konten tersembunyi bisa dibuka tanpa JS.<dialog>— modal/non-modal; buka viashowModal().<canvas>— gambar via JS (getContext('2d')).<svg>— grafik vektor, scalable, bisa di-style CSS.
Cara Kerja / Struktur
html<details><summary>FAQ</summary><p>Jawabannya di sini.</p></details>
<dialog id="d"><p>Halo modal</p><button onclick="d.close()">Tutup</button></dialog>
<button onclick="d.showModal()">Buka</button>
<svg width="50" height="50"><circle cx="25" cy="25" r="20" fill="tomato"/></svg>Catatan Implementasi
<canvas>butuh JS untuk menggambar;<svg>deklaratif.<dialog>native lebih accessible daripada modal buatan sendiri.
Kesalahan Umum
- Pakai
<div>+ JS untuk accordion padahal<details>cukup. - Canvas tanpa fallback teks (no-JS users buta konten).
Glosarium
- Disclosure widget: konten yang bisa ditoggle.
- Vector vs Bitmap: svg skala tak terbatas, canvas piksel.