Validator Markup W3C
Temukan dan perbaiki kesalahan HTML dengan W3C Markup Validation Service.
Validator Markup W3C adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Yang Diperiksa Validator
Validator Markup W3C (validator.w3.org) mengurai HTML berdasarkan spesifikasi resmi dan melaporkan setiap pelanggaran spesifikasi: tag yang tidak ditutup, penyarangan yang tidak valid (sebuah <p> di dalam <p> lain), atribut wajib yang hilang (elemen img tanpa atribut alt), elemen yang tidak dikenali, dan masih banyak lagi.
Mengapa Validasi Penting
HTML yang tidak valid mungkin ditampilkan di peramban mana pun saat ini, tetapi setiap peramban bebas memperbaikinya dengan cara yang berbeda—sesuatu yang tampak baik di Chrome mungkin rusak di Firefox. HTML yang valid menghasilkan tampilan yang dapat diprediksi dan konsisten serta menghindari perilaku mengejutkan pada pembaca layar, perayap mesin telusur, dan klien surel.
Tiga Cara Mengirimkan
Lakukan validasi berdasarkan URL (tempelkan URL halaman), melalui unggahan berkas, atau dengan masukan langsung (tempelkan HTML). URL paling baik untuk halaman produksi; masukan langsung berguna selama pengembangan ketika berkas belum tersedia di mana pun.
Membaca Hasil
Kesalahan mencantumkan nomor baris, cuplikan markah yang bermasalah, dan penjelasan. Perbaiki dari atas ke bawah—banyak kesalahan merupakan akibat berantai dari satu kesalahan sebelumnya. Setelah memperbaiki beberapa kesalahan pertama, jalankan kembali untuk melihat berapa banyak peringatan yang tersisa dan memang beralasan.
Peringatan atau Kesalahan
Kesalahan adalah pelanggaran spesifikasi yang dapat merusak tampilan. Peringatan adalah pola mencurigakan yang secara teknis valid tetapi kemungkinan tidak disengaja (nama atribut yang tampak seperti salah ketik, petunjuk aksesibilitas). Perlakukan kesalahan sebagai hal yang wajib diperbaiki dan peringatan sebagai hal yang layak diselidiki.
Kesalahan Umum
Alt pada img tidak ada. Tag yang menutup dirinya sendiri tidak ditutup (<br> alih-alih <br/> versi lama yang juga valid). Id duplikat pada halaman. Label formulir tanpa atribut for yang cocok dengan id input. Elemen interaktif bersarang (button di dalam a). Kelima hal ini mencakup sebagian besar keluaran alat validasi.
Memvalidasi Templat
Jika HTML Anda dibuat oleh templat, validasi keluaran akhir (halaman yang dirender), bukan sumber templat. Placeholder {{ }} bukan HTML valid—yang penting hanyalah hasil yang dihasilkan mesin. Jalankan alat validasi di CI terhadap halaman yang dirender dari hasil pembangunan pengujian.
CLI html-validate
Untuk integrasi CI, gunakan paket npm html-validate: npx html-validate "public/**/*.html" memvalidasi setiap halaman dalam hasil pembangunan. Konfigurasikan aturan di .htmlvalidate.json. Gunakan ini untuk membuat hasil pembangunan gagal saat terjadi regresi validasi.
Stylelint dan Pemeriksaan Kode pada Sumber
Pemeriksaan saat penulisan (stylelint untuk CSS, eslint-plugin-jsx-a11y untuk React) menemukan banyak masalah sebelum mencapai alat validasi. Gabungkan dengan validasi menyeluruh di CI sebagai pertahanan berlapis—temukan sebagian besar masalah lebih awal, lalu sisanya sebelum rilis.
Apa yang Validasi NOT Tangkap
Validasi memeriksa kebenaran markup, bukan semantiknya. Halaman dengan setiap judul sebagai <h6> merupakan HTML valid, tetapi semantiknya buruk. Audit aksesibilitas Lighthouse dan peninjauan manual menangkap masalah semantik yang tidak ditangkap alat validasi.
Peringatan Quirks Mode
Tidak adanya <!doctype html> memicu Quirks Mode—peramban menggunakan lapisan kompatibilitas lama yang merusak CSS modern. Alat validasi menandai doctype yang hilang sebagai kesalahan pertama; jangan pernah merilis halaman tanpa deklarasi doctype.
Validasi Berkelanjutan
Jalankan validasi pada setiap PR melalui GitHub Actions: pasang html-validate, jalankan terhadap situs hasil pembangunan, dan gagalkan PR jika ada kesalahan. Kesalahan baru tertangkap saat peninjauan, bukan menumpuk selama berbulan-bulan hingga terlalu sulit diperbaiki secara retroaktif.
Uji Pengetahuan
Mengapa deklarasi <!doctype html> yang hilang sangat berpengaruh bagi validator W3C?
Ringkasan
W3C Markup Validator mengurai HTML berdasarkan spesifikasi dan melaporkan markup yang tidak valid. Gunakan melalui antarmuka web untuk pemeriksaan sekali jalan dan melalui CLI html-validate di CI untuk cakupan berkelanjutan. Masalah umum: alt yang hilang, id duplikat, doctype yang hilang, dan elemen interaktif bersarang. Validasi menangkap kesalahan markup; padukan dengan Lighthouse dan peninjauan manual untuk kualitas semantik dan aksesibilitas.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Validator Markup W3C” gratis?
Ya — teks lengkap “Validator Markup W3C” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Validator Markup W3C”?
Temukan dan perbaiki kesalahan HTML dengan W3C Markup Validation Service. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Validator Markup W3C” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Validator Markup W3C
- Audit HTML Lighthouse
- pa11y dan axe untuk Pengujian Aksesibilitas
- Pengujian Snapshot HTML