Elemen HTML Website yang Tidak Memerlukan JavaScript Lagi

Dulu developer sering menulis library JavaScript hanya untuk accordion FAQ, modal, popover, date picker, atau slider; kini browser menangani banyak pola itu lewat elemen HTML tanpa JavaScript yang perilakunya sudah tertanam di spesifikasi. Yang berubah bukan bahwa JavaScript sudah usang, melainkan batas antara markup declarative dan script untuk interaksi dasar.

Meski demikian, satu halaman company profile masih bisa memuat puluhan listener jika tim mengabaikan primitif native. HTML modern (interactive elements WHATWG) memberi komponen keyboard-friendly tanpa framework. Anda tetap membutuhkan JavaScript untuk API, state aplikasi, dan business logic—topik terpisah dari JavaScript SEO dan audit client-side rendering bila konten bergantung pada render dinamis.

1. <details> dan <summary>: Accordion/Disclosure Native

<details> adalah disclosure: browser menyembunyikan konten sampai pengguna mengaktifkan label di <summary>. Berikutnya browser mengelola state buka/tutup, fokus, dan interaksi keyboard—FAQ produk, spesifikasi teknis, atau “baca selengkapnya” yang benar-benar sekadar expand/collapse.

Sebelum HTML native, pola umum memakai <div> + <button> + class toggle + update manual aria-expanded; sesudahnya markup cukup ringkas:

<details>
  <summary>Apa itu HTML native?</summary>
  <p>Fitur yang perilakunya sudah disediakan browser.</p>
</details>

Accordion eksklusif (hanya satu terbuka) memakai atribut name yang mengelompokkan beberapa <details>—fitur Baseline 2024 di MDN:

<details name="faq">
  <summary>Pertanyaan pertama</summary>
  <p>Jawaban pertama.</p>
</details>
<details name="faq">
  <summary>Pertanyaan kedua</summary>
  <p>Jawaban kedua.</p>
</details>

Kelebihan: tanpa script untuk toggle, semantik lebih jelas dari <div> generik, styling lewat selector [open], dan panel tetap usable bila JS gagal dimuat. Walau begitu, animasi atau desain sangat custom butuh CSS atau script; state dari URL, API, atau analytics tetap butuh JavaScript. Pakai native bila hanya buka/tutup konten statis; pakai script bila deep-link, orchestration antar komponen, atau animasi kompleks.

2. <dialog> + Invoker Commands: Modal Deklaratif

<dialog> adalah elemen modal atau non-modal dengan top layer bawaan browser, dan Invoker Commands memungkinkan tombol membuka atau menutup dialog tanpa addEventListener—lihat Invoker Commands API. Dulu modal berarti overlay CSS, class .open, trap fokus, dan Escape handler manual; native dialog menangani banyak perilaku fokus dan inert, meski Invoker Commands (Baseline 2025) lebih muda dari elemen dialog itu sendiri.

<button type="button" command="show-modal" commandfor="info-dialog">
  Buka Dialog
</button>
<dialog id="info-dialog">
  <p>Informasi dari dialog native.</p>
  <button type="button" command="close" commandfor="info-dialog">Tutup</button>
</dialog>

Modal konfirmasi sederhana cocok native; wizard multi-step, isi dari API, atau validasi asynchronous tetap butuh script.

3. Popover HTML dan popovertarget Tanpa JavaScript

Atribut global popover menampilkan elemen di top layer sebagai popover non-modal—menu kecil, panel bantuan, action menu. Lalu tombol memakai popovertarget; browser menangani show/hide dan light-dismiss pada pola dasar (WHATWG popover).

<button type="button" popovertarget="help-popover">Bantuan</button>
<div id="help-popover" popover>
  <p>Informasi bantuan.</p>
</div>

Alternatif modern: commandfor dengan command="toggle-popover". Popover bukan dialog semantik; tooltip hover kompleks atau menu nested berat masih sering butuh JavaScript. Jadi untuk popup sederhana yang pengguna buka dengan klik, native mengurangi handler outside-click dan masalah z-index.

4. <datalist>: Suggestion Statis, Bukan Autocomplete API

<label for="kota">Kota:</label>
<input id="kota" name="kota" list="daftar-kota">
<datalist id="daftar-kota">
  <option value="Jakarta">
  <option value="Depok">
  <option value="Tangerang">
</datalist>

<datalist> memberi daftar saran pada <input> tanpa filtering script untuk data kecil. Tetapi MDN masih menandai Limited availability: styling dropdown terbatas, UX beda antar-browser, aksesibilitas kombinasi screen reader perlu uji. Cocok untuk kategori statis; fuzzy search, ribuan baris, atau data remote tetap butuh JavaScript.

5. Native <input> Types: Date, Time, Color, Range

Kelompok ini menggantikan plugin kalender atau slider sederhana. Date, time, dan datetime-local umumnya Widely available sejak 2021 (WHATWG input).

<label for="tanggal">Tanggal:</label>
<input type="date" id="tanggal" name="tanggal">
<label for="jam">Jam:</label>
<input type="time" id="jam" name="jam">
<label for="warna">Pilih warna:</label>
<input type="color" id="warna" name="warna" value="#3366ff">
<label for="volume">Volume:</label>
<input type="range" id="volume" min="0" max="100" value="50">

type="month" dan type="week" jangan disamakan dengan date/time: dukungan picker tidak seragam di Firefox/Safari desktop (Limited availability). Lantaran booking dengan tanggal yang server blokir, harga dinamis per hari, atau timezone kompleks tetap butuh logic aplikasi. Range native tidak otomatis menampilkan nilai live di elemen lain—hubungkan dengan script bila UI membutuhkan preview angka.

6. Validasi Form HTML Tanpa JavaScript

Atribut constraint pada <input>—required, type="email", min, max, pattern, minlength—memberi validasi client-side dasar tanpa validator custom:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <label for="umur">Umur:</label>
  <input type="number" id="umur" name="umur" min="18" max="100" required>
  <button type="submit">Kirim</button>
</form>

Pesan error UI bervariasi antar-browser; tim backend wajib memvalidasi ulang business rule dan keamanan di server—termasuk saat CMS menyaring markup seperti pembahasan wp_kses WordPress 7.2. Selain itu, JavaScript boleh memperhalus UX, bukan menjadi satu-satunya gate keamanan.

7. <progress> dan <meter>: Indikator Semantik

<label for="upload-progress">Upload:</label>
<progress id="upload-progress" value="70" max="100">70%</progress>
<label for="storage">Storage:</label>
<meter id="storage" min="0" max="100" value="72">72%</meter>

<progress> = kemajuan task; <meter> = nilai dalam rentang (skor, kapasitas). Keduanya menggambar UI tanpa plugin, namun browser tidak melacak progress upload sendiri—aplikasi (sering lewat JavaScript) yang meng-update value real-time. Jangan klaim progress bar “tanpa JS” bila datanya dinamis dari XHR.

8. Media: <audio>, <video>, dan <track>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>
<video controls width="800">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="caption-id.vtt" srclang="id" label="Indonesia" default>
</video>

Atribut controls meminta player bawaan browser—play, pause, seek, volume dasar. Kemudian subtitle WebVTT lewat <track> (MDN track). Branding player custom, DRM, analytics playback detail, atau transcript interaktif masih butuh implementasi script.

9. <picture> + <source>: Art Direction Tanpa Ganti src via Script

<picture>
  <source srcset="hero-mobile.webp" media="(max-width: 600px)">
  <source srcset="hero-desktop.webp" type="image/webp">
  <img src="hero-desktop.jpg" alt="Contoh responsive image">
</picture>

Browser memilih sumber berdasarkan media, type, dan srcset—pola yang dulu kadang developer hitung lewat script viewport (MDN responsive images). Markup bertambah karena Anda menyiapkan beberapa asset; ini melengkapi, bukan menggantikan, pipeline CDN/optimasi. Gambar yang URL-nya runtime tentukan dari data aplikasi tetap butuh logic lain.

10. <selectedcontent> dan Customizable <select> (Bonus)

Fitur terbaru: <selectedcontent> merefleksikan label opsi terpilih di dalam customizable <select>, dengan CSS seperti appearance: base-select. Chrome 135+ dan Safari 27+ sudah berjalan; Firefox per 12 Oktober 2026 belum production-ready default—MDN: Limited availability.

<select>
  <button><selectedcontent></selectedcontent></button>
  <option value="wordpress">WordPress</option>
  <option value="laravel">Laravel</option>
</select>

Gunakan hanya sebagai progressive enhancement pada matriks browser yang Anda uji; jangan ganti Select2/Choices.js di proyek yang wajib support Firefox luas tanpa fallback. Namun bila matriks Anda sudah mencakup Chrome 135+ dan Safari 27+, uji dulu apakah markup native cukup sebelum menambah library dropdown.

Elemen yang Bukan “Pengganti JavaScript” Penuh

<output> hanya wadah semantik hasil kalkulasi—tidak menghitung sendiri. <progress> menampilkan nilai, tidak melacak upload. <datalist> bukan search API. <dialog> declarative tidak menggantikan aplikasi modal multi-state. Klaim harus spesifik: HTML native menggantikan bagian UI/interaksi dasar, bukan seluruh stack aplikasi.

Ringkasan: Dulu Script, Kini Markup

* Customizable select: cek browser sebelum produksi. Tabel di bawah merangkum kebutuhan harian; baris Limited availability wajib Anda uji di perangkat klien, bukan hanya di laptop development.

Tabel Kompatibilitas Browser (12 Oktober 2026)

Kemampuan HTML native tidak selalu berarti dukungannya sudah sama pada setiap browser. Karena itu, sebelum mengganti JavaScript dengan fitur HTML tertentu, cek status kompatibilitasnya terlebih dahulu.

“Ya” tidak menjamin tampilan identik—native control mengikuti OS. Baseline mencakup browser utama modern, bukan WebView lama atau setiap assistive technology. Akhirnya, untuk fitur Widely available atau Baseline yang sesuai target proyek, native HTML bisa jadi pilihan utama, sedangkan fitur Limited availability butuh fallback—polisi serupa dengan cadangan non-JS pada pola infinite scroll blog dengan fallback tanpa JavaScript.

Keuntungan dan Batas Memilih Native HTML

Bundle JavaScript bisa mengecil, dependency listener berkurang, dan interaksi dasar tetap hidup saat script gagal—FAQ tetap terbuka lewat keyboard tanpa menunggu bundle React. Crawler dan alat aksesibilitas lebih mudah membaca semantik <details> atau <dialog> dibanding tumpukan <div role="button">, selaras dengan pembahasan SEO untuk AI agent dan HTML semantik.

Batasnya: skin native beda antar OS, styling control terbatas, fitur baru belum selalu Baseline, dan desain produk yang “melawan” control bawaan tetap butuh custom UI. Native-first berpotensi mengurangi beban script, namun Anda perlu mengukur dampak LCP/INP—bukan asumsi otomatis.

Kapan HTML Saja dan Kapan Tetap JavaScript?

Gunakan native bila browser sudah menyediakan perilaku yang sama, data statis di markup, interaksi dasar tanpa state lintas komponen, dan matriks browser proyek mendukung fitur tersebut. Tambahkan JavaScript bila data dari API setelah load, validasi business rule, filtering kompleks, telemetry, animasi custom, atau fitur Limited availability tanpa fallback. Rumus singkat: Native HTML dahulu → CSS untuk tampilan → JavaScript hanya untuk behavior yang HTML belum tangani.

Contoh Halaman Deklaratif (Mini)

<h2>FAQ</h2>
<details name="faq">
  <summary>Apakah modal membutuhkan JavaScript?</summary>
  <p>Tidak selalu. Dialog modern dapat dikontrol deklaratif.</p>
</details>
<button type="button" command="show-modal" commandfor="native-dialog">Buka Dialog</button>
<dialog id="native-dialog">
  <p>Dialog tanpa event listener.</p>
  <button type="button" command="close" commandfor="native-dialog">Tutup</button>
</dialog>
<button type="button" popovertarget="native-popover">Buka Popover</button>
<div id="native-popover" popover><p>Popover native.</p></div>
<label for="tanggal">Tanggal:</label>
<input type="date" id="tanggal" name="tanggal">

Tidak ada listener untuk FAQ, dialog, popover, atau date picker—intinya artikel ini. JavaScript sebaiknya dipakai ketika aplikasi memang membutuhkan logic, bukan hanya karena kebiasaan menulis seluruh interaksi dari script. Sebelum memasang library modal baru, cek apakah <dialog> dan Invoker Commands sudah cukup; tim CodeF menerapkan pola native-first plus progressive enhancement pada proyek WordPress dan front-end custom supaya core UI tetap usable tanpa menanti bundle penuh.

FAQ: Elemen HTML Tanpa JavaScript

Apakah website modern bisa tanpa JavaScript? Banyak situs konten dan form dasar bisa hidup hanya dengan HTML dan CSS; aplikasi dinamis dengan API dan state kompleks tetap membutuhkan script. Apakah dialog bisa dibuka tanpa JavaScript? Ya pada browser yang mendukung Invoker Commands, lewat command dan commandfor—bukan berarti workflow modal kompleks ikut selesai. Apakah datalist menggantikan autocomplete? Hanya untuk daftar statis kecil; pencarian database/API tetap butuh logic tambahan dan pengujian aksesibilitas.