HTML Hasil AI: Gue Tes 4 Model Bikin Landing Page, Semuanya Nol Tombol

Sebuah thread di Threads ramai minggu ini. Intinya begini: hasil AI website builder kelihatan cantik di preview, tapi begitu CSS dimatikan, isinya div semua. Nol heading, nol section, nol nav.

Thread itu dapat 44.020 tayangan, 414 suka, dan 72 repost. Balasan Meta AI ikut merangkum klaimnya, jadi makin banyak yang percaya.

Gue nggak langsung percaya, tapi juga nggak langsung membantah. Klaimnya masuk akal, cuma ada satu masalah: dia mencampur dua lapisan yang berbeda. Builder seperti Lovable, Bolt, v0, dan Cursor itu lapisan atas. Yang sebenarnya menulis HTML adalah model di baliknya. Kalau mau tahu siapa yang salah, ukur lapisan yang bisa diukur.

Jadi gue ukur. Empat model, satu prompt identik, satu berkas HTML masing-masing. Hasilnya bukan persis seperti yang thread itu klaim, dan justru itu yang lebih menarik.

TL;DR

• Empat dari empat model menghasilkan nol <button>. Semua tombol jadi <a>. Di screen reader, tombol “Mulai Gratis” dibacakan sebagai tautan.
• Empat dari empat menghasilkan nol <img>. Jadi alt text bukan lupa dipasang, memang tidak ada gambarnya.
• Klaim “nol heading” tidak terbukti di model 2026. Ketiga model yang berhasil menulis <h1>, <header>, <section>, dan <footer>.
• Yang benar-benar hilang adalah <main> (2 dari 3) dan elemen kontrol yang punya role.
• Biaya bikin satu landing page: Rp3,66 sampai Rp104,40 tergantung model.
• Model gratis glm-5.3-flash menghabiskan 6.000 token untuk berpikir lalu mengembalikan string kosong.

Isi thread yang bikin ramai

Akun @ladomextzy menulis delapan bagian. Bagian pertama cerita pengalaman: dia generate landing page dari beberapa AI editor, preview-nya mulus, animasi jalan, gradient rapi. Lalu dia buka DevTools, tab Elements, dan membaca HTML-nya. Bukan visualnya, isinya. Hasilnya hampir seragam: semuanya div.

Bagian kedua sampai ketiga menyebut tiga dampak. SEO, karena crawler membaca struktur. Screen reader, karena pengguna tunanetra menavigasi lewat heading dan landmark. Keyboard, karena tombol tanpa focus-visible tidak kelihatan saat di-Tab.

Bagian keempat sampai kelima kasih empat langkah audit gratis: cek <h1> di view source, tekan Tab sepuluh kali, scan kontras di WAVE, cek LCP dan byte JavaScript di PageSpeed. Bagian keenam kasih contoh prompt yang spesifik, bukan “bikin lebih SEO friendly”. Bagian ketujuh jujur soal limitasi. Bagian kedelapan jualan PromptedSite.

Komentar yang masuk juga masuk akal. Ada yang bilang akar masalahnya React, karena komponen React isinya div semua. Ada yang bilang ini cuma masalah prompt. Ada yang bilang accessibility baru disentuh kalau klien minta optimasi SEO.

Semua poin itu valid. Tapi belum ada satu pun angka tentang seberapa parah, dan model apa yang paling parah. Di situ gue masuk.

Cara gue nguji

Gue pakai satu prompt netral. Tidak ada kata “semantik”, tidak ada kata “aksesibilitas”, tidak ada instruksi HTML5. Persis seperti orang biasa yang minta landing page.

Buat landing page untuk SaaS manajemen inventori bernama Stokara. Keluarkan satu file HTML lengkap dengan CSS di dalam <style>. Sertakan hero section, 3 fitur, harga, dan footer. Hanya kode, tanpa penjelasan.

Empat model, semuanya berstatus aktif di gateway, temperature 0,7, max_tokens 6000. Hasilnya gue ukur pakai hitungan tag langsung, lalu gue lempar ke validator W3C supaya angkanya bukan cuma hitungan regex buatan gue sendiri.

Model	Byte	div	Tag semantik	h1	<button>	<img>	aria-*	focus-visible	Error W3C	Biaya	Waktu
deepseek-v4.1-flash-1017	6.114	22	6	1	0	0	0	0	1	Rp3,66	14,6 s
gemini-3.8-flash	15.320	31	3	1	0	0	0	0	5	Rp8,19	36,6 s
gpt-6.1-sol	17.744	24	14	1	0	0	21	2	1	Rp104,40	101,5 s
glm-5.3-flash	0	0	0	0	0	0	0	0	gagal	Rp0	138,5 s

Kolom “tag semantik” menghitung header, nav, main, section, article, dan footer yang benar-benar muncul.

Tiga temuan yang bikin gue berhenti

1. Nol tombol, empat dari empat

Ini yang paling mengejutkan. Empat model menghasilkan nol <button>. Nol. Padahal setiap landing page punya call to action, dan promptnya minta bagian harga.

Yang mereka tulis bukan tombol yang salah, tapi tautan yang dibungkus CSS supaya kelihatan seperti tombol. Secara visual tidak ada bedanya. Secara aksesibilitas beda jauh.

WCAG 4.1.2 (Name, Role, Value) minta setiap komponen antarmuka punya nama, peran, dan nilai yang bisa dibaca teknologi bantu. Screen reader mengumumkan <a> sebagai “link”. Jadi pengguna tunanetra mendengar “tautan, Mulai Gratis”, bukan “tombol, Mulai Gratis”. Untuk aksi yang mengubah state, itu informasi yang salah.

Lebih nyata lagi buat pengguna keyboard: pada <a>, tombol Enter jalan, tombol Space tidak. Pada <button>, dua-duanya jalan. Orang yang menavigasi dengan keyboard akan menekan Space dan tidak terjadi apa-apa.

2. Nol gambar, jadi alt text mustahil

Sama mengejutkannya: nol <img> di keempat output. Landing page 17 ribu byte itu visualnya sepenuhnya CSS, gradient dan bentuk, bukan gambar.

Kabar baiknya, ini justru aman dari sisi WCAG 1.1.1 (Non-text Content), karena tidak ada gambar yang perlu alt. Kabar buruknya, begitu lo ganti ilustrasi CSS itu dengan foto asli, tidak ada satu pun alt yang bisa diwarisi. Dan di situlah manusia mulai lupa.

3. Model yang paling niat justru satu-satunya yang error ARIA

gpt-6.1-sol adalah satu-satunya yang peduli. Dia menulis <main>, enam <article>, 21 atribut aria-*, dan dua aturan focus-visible. Rasio tag semantiknya paling sehat: 14 tag semantik untuk 24 div.

Tapi validasi W3C-nya justru gagal karena satu hal:

The aria-label attribute must not be specified on any div element unless the element has a role value other than …

Dia menaruh aria-label di div tanpa role. Niatnya benar, eksekusinya salah. Dan ini pola yang penting: ARIA yang salah lebih berbahaya daripada tidak ada ARIA sama sekali, karena dia memberi jaminan palsu.

Dua model lain punya masalah berbeda. gemini-3.8-flash lupa menutup tiga div, jadi validator melaporkan “end of file seen and there were open elements” dan browser harus menebak sendiri di mana elemennya berakhir. deepseek-v4.1-flash-1017 paling bersih dari sisi validasi: satu error sisa karakter di luar </html>, selebihnya rapi.

glm-5.3-flash gagal total. Dia menghabiskan 6.000 token, seluruh kuota output, untuk reasoning, lalu mengembalikan string kosong setelah 138 detik. Model ini gratis, dan hasilnya memang nol. Perlu gue akui: max_tokens 6000 itu batas yang gue set sendiri, jadi ini sebagian salah metode gue, bukan murni salah modelnya. Tapi kalau kalian pakai model reasoning dengan batas output ketat, ini akan kejadian juga.

Klaim thread-nya perlu dikoreksi sedikit

Ini bagian yang bikin gue nggak mau sekadar mengutip. Thread itu bilang “nol heading, nol section, nol nav”. Di pengujian gue, itu tidak terjadi.

Tag	Thread bilang	Hasil pengukuran
<h1>	nol	ada di 3 dari 3 output yang berhasil
<header>	nol	ada di 3 dari 3
<section>	nol	ada di 3 dari 3 (2 sampai 4 buah)
<footer>	nol	ada di 2 dari 3
<nav>	nol	ada di 2 dari 3
<main>	nol	ada di 1 dari 3
<button>	tidak dibahas	nol di 3 dari 3
<img>	tidak dibahas	nol di 3 dari 3

Jadi soal heading, pengalaman orang itu kemungkinan nyata tapi sudah tidak lagi mewakili model 2026. Yang masih bermasalah justru bagian yang tidak dia sebut sama sekali: elemen kontrol dan main.

Kenapa ini penting? Karena orang yang baca thread itu lalu audit websitenya, cari <h1>, ketemu ada, lalu menyimpulkan “oh aman”. Padahal masalahnya pindah ke tempat lain yang lebih sulit dilihat.

Soal SEO juga perlu diluruskan. Google bisa merender JavaScript, jadi div bukan penghalang halaman masuk indeks. Yang hilang bukan indeksnya, tapi sinyal strukturnya: mana judul, mana isi, mana navigasi. Kalau kalian menunda perbaikan karena takut tidak terindeks, ketakutan itu salah alamat.

Biaya bikin satu landing page

Angka di bawah dihitung dari daftar harga gateway dalam rupiah per 1 juta token, dikalikan pemakaian token yang benar-benar tercatat di respons API. Bukan konversi kurs manual.

Model	Input / 1 jt	Output / 1 jt	Biaya 1 halaman	100 halaman
glm-5.3-flash	Rp0	Rp0	Rp0 (output kosong)	Rp0, tapi nol hasil
deepseek-v4.1-flash-1017	Rp381	Rp1.524	Rp3,66	Rp366
gemini-3.8-flash	Rp272	Rp1.361	Rp8,19	Rp819
gpt-6.1-sol	Rp3.627	Rp18.133	Rp104,40	Rp10.440

Selisih termurah ke termahal: 28 kali. Tapi perhatikan juga efisiensinya. gpt-6.1-sol 28 kali lebih mahal dari deepseek-v4.1-flash-1017, dan yang dia dapat cuma tag semantik lebih lengkap plus ARIA (yang sebagian salah). gemini-3.8-flash dua kali lebih mahal dari deepseek dan justru punya rasio div terburuk, 31 div untuk 3 tag semantik.

Kalau tujuan kalian cuma menghasilkan halaman, deepseek menang telak. Kalau tujuan kalian halaman yang lebih mudah dibersihkan, selisih Rp100 per halaman itu tidak berarti apa-apa dibanding 20 menit waktu lo memperbaikinya.

Empat langkah audit, versi yang bisa lo ulang

Empat langkah dari thread itu benar semua, gue cuma menambahkan cara yang lebih cepat dan bisa diotomatiskan.

1. Hitung tag, jangan cuma cari h1. Mencari <h1> saja tidak cukup, karena masalahnya sering di tempat lain. Jalankan ini di console browser:

const all = document.querySelectorAll('*');
const c = {};
all.forEach(e => c[e.tagName.toLowerCase()] = (c[e.tagName.toLowerCase()] || 0) + 1);
const sem = ['header','nav','main','section','article','footer'].reduce((a,t) => a + (c[t] || 0), 0);
console.log('div:', c.div || 0, '| semantik:', sem, '| button:', c.button || 0, '| img:', c.img || 0);

Kalau button nol padahal ada tombol yang bisa diklik, itu temuan. Kalau div di atas 20 dengan semantik di bawah 5, itu temuan.

2. Tab sepuluh kali, lalu lihat. Ini yang tidak bisa diotomatiskan. Tekan Tab dan cari satu hal: apakah elemen yang aktif punya garis fokus yang kelihatan. Kalau tidak ada, pengguna keyboard tidak tahu dia sedang di mana. WCAG 2.4.7 (Focus Visible) itu level AA, bukan saran.

3. Validasi, jangan cuma dilihat. Buka validator.w3.org/nu, tempel URL atau upload HTML-nya. Yang gue cari bukan skor, tapi dua jenis error spesifik: elemen tidak ditutup, dan atribut ARIA yang salah tempat.

4. Kontras dan performa. WAVE (wave.webaim.org) untuk kontras, karena ini yang paling sering lolos dari mata. PageSpeed Insights (pagespeed.web.dev) untuk LCP dan total byte JavaScript, bukan skor overall.

Prompt yang bisa lo tempel

Ini versi gue, gabungan dari prompt di thread itu dengan dua tambahan dari hasil pengujian: instruksi eksplisit soal <button> dan soal aria-label di div.

Audit komponen ini. Ganti div generik jadi HTML semantik: header, nav, main, section, h1 untuk judul utama, p untuk paragraf.

Aturan wajib:
1. Semua yang bisa diklik dan mengubah state harus <button>, bukan <div onclick> dan bukan tautan yang href-nya cuma tanda pagar.
2. Semua gambar butuh alt yang menjelaskan isinya. Kalau dekoratif, alt="".
3. aria-label hanya boleh dipasang di elemen yang punya role valid. Jangan pernah taruh aria-label di div tanpa role.
4. Cuma satu h1, dan urutan heading tidak boleh lompat.
5. Tambahkan focus-visible ring yang kontrasnya minimal 3:1.
6. Tampilkan diff dulu sebelum apply.

Poin 1 dan 3 itu yang paling sering hilang, dan dua-duanya adalah penyebab kegagalan di pengujian gue.

Kalau lo nggak mau mengurus ini sendiri

Menjalankan empat langkah di atas untuk satu halaman itu 20 menit. Untuk dua puluh halaman, itu dua hari kerja yang tidak menghasilkan fitur apa pun.

Dua jalan yang masuk akal. Pertama, otomatiskan auditnya: jalankan skrip penghitung tag di atas di CI, gagalkan build kalau button nol atau rasio div terlalu tinggi. Kedua, pakai model yang lebih patuh sejak awal, karena dari pengujian ini jelas tidak semua model sama. Gateway NgodeAI menyatukan 25 model dengan harga rupiah, jadi lo bisa bandingkan sendiri mana yang HTML-nya paling bersih sebelum mengunci pilihan.

Untuk tempat menaruh hasilnya, VPS tahunan RackNerd masih yang paling murah buat halaman statis, dan idcloudhost kalau lo butuh server lokal dengan latensi rendah ke pengguna Indonesia. Kalau butuh yang lebih besar untuk pipeline build, Alibaba Cloud punya free tier yang cukup buat mulai.

Kesimpulan

Thread itu benar soal arah, salah soal detail. HTML hasil AI memang masih bermasalah, tapi bukan karena “semuanya div dan nol heading”. Masalahnya lebih spesifik dan lebih sulit dilihat: tidak ada <button>, tidak ada <img>, <main> sering hilang, dan ARIA dipasang di tempat yang salah.

Kabar baiknya, semuanya bisa dideteksi dalam hitungan detik dengan tiga baris JavaScript dan satu validator. Kabar buruknya, hampir tidak ada yang menjalankannya, karena preview-nya sudah kelihatan bagus.

Kalau lo cuma ingat satu hal dari artikel ini: hitung <button> dan <img>, bukan cuma <h1>. Dua tag itu yang paling sering nol, dan dua-duanya yang paling mahal akibatnya.

Sumber

• Thread @ladomextzy di Threads, 8 bagian, 1 November 2026 (44.020 tayangan, 414 suka, 72 repost, 127 bagikan)
• Daftar model dan harga llm.ngodeai.net/v1/models, dibaca 2 November 2026
• Validator Markup W3C, validator.w3.org/nu
• WCAG 2.2: 1.1.1 Non-text Content, 1.3.1 Info and Relationships, 2.4.7 Focus Visible, 4.1.2 Name Role Value