HTML Academy · Pelajaran

Pengesah Markup W3C

Cari dan baiki ralat HTML dengan Perkhidmatan Pengesahan Markup W3C

Pelajaran 1 daripada 414 langkah

Pengesah Markup W3C ialah pelajaran HTML Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Perkara yang Disemak oleh Validator

Validator Penanda W3C (validator.w3.org) menghuraikan HTML berdasarkan spesifikasi rasmi dan melaporkan setiap pelanggaran spesifikasi: tag yang tidak ditutup, penyusunan bertingkat yang tidak sah (a <p> di dalam <p> yang lain), atribut wajib yang tiada (img tanpa alt), elemen yang tidak dikenali dan banyak lagi.

Mengapa Pengesahan Penting

HTML yang tidak sah mungkin dipaparkan dalam mana-mana pelayar hari ini, tetapi setiap pelayar bebas memulihkannya dengan cara yang berbeza — perkara yang kelihatan baik dalam Chrome mungkin rosak dalam Firefox. HTML yang sah menghasilkan pemaparan yang boleh diramal dan konsisten serta mengelakkan tingkah laku yang mengejutkan dalam pembaca skrin, perangkak carian dan klien e-mel.

Tiga Cara Menghantar

Buat pengesahan melalui URL (tampal URL halaman), melalui muat naik fail atau melalui masukan terus (tampal HTML). URL paling sesuai untuk halaman produksi; masukan terus berguna semasa pembangunan apabila fail tersebut belum tersedia di mana-mana.

Membaca Hasil

Ralat menyenaraikan nombor baris, petikan penanda yang menyebabkan ralat dan penjelasan. Betulkan dari atas ke bawah — banyak ralat ialah akibat berantai daripada satu kesilapan terdahulu. Selepas membetulkan beberapa ralat pertama, jalankan semula pengesahan untuk melihat jumlah amaran yang masih benar-benar wajar.

Amaran berbanding Ralat

Ralat ialah pelanggaran spesifikasi yang mungkin merosakkan pemaparan. Amaran ialah corak mencurigakan yang sah dari segi teknikal tetapi mungkin tidak disengajakan (nama atribut yang kelihatan seperti tersalah eja, petunjuk kebolehcapaian). Anggap ralat sebagai perkara yang wajib dibetulkan dan amaran sebagai perkara yang wajar disiasat.

Ralat Biasa

Atribut alt yang tiada pada elemen img. Tag tutup sendiri yang tidak ditutup (<br> bukannya <br/> lama yang juga sah). ID pendua pada halaman. Label borang tanpa atribut for yang sepadan dengan ID input. Elemen interaktif bersarang (butang di dalam a). Lima perkara ini merangkumi kebanyakan keluaran pengesah.

Mengesahkan Templat

Jika HTML anda dijana oleh templat, sahkan keluaran akhir (halaman yang dipaparkan), bukannya sumber templat. Pemegang tempat {{ }} bukan HTML yang sah — hanya perkara yang dihasilkan oleh enjin yang penting. Jalankan pengesah dalam CI terhadap halaman yang dipaparkan daripada binaan ujian.

CLI html-validate

Untuk penyepaduan CI, gunakan pakej npm html-validate: npx html-validate "public/**/*.html" mengesahkan setiap halaman dalam binaan. Konfigurasikan peraturan dalam .htmlvalidate.json. Gunakan ini untuk menyebabkan binaan gagal apabila berlaku kemerosotan pengesahan.

Stylelint dan Pemeriksaan Gaya Kod pada Sumber

Pemeriksaan gaya kod semasa menulis (stylelint untuk CSS, eslint-plugin-jsx-a11y untuk React) mengesan banyak isu sebelum sampai kepada pengesah. Gabungkan dengan pengesahan hujung ke hujung dalam CI untuk pertahanan berlapis — kesan kebanyakan isu lebih awal, dan kesan selebihnya sebelum penerbitan.

Perkara yang NOT Dikesan oleh Pengesahan

Pengesahan memeriksa ketepatan penandaan, bukan semantik. Halaman dengan setiap tajuk sebagai <h6> ialah HTML yang sah tetapi semantiknya buruk. Pengauditan kebolehcapaian Lighthouse dan semakan manual mengesan isu semantik yang tidak dikesan oleh pengesah.

Amaran Quirks Mode

Ketiadaan <!doctype html> mencetuskan Quirks Mode — pelayar menggunakan lapisan keserasian lama yang merosakkan CSS moden. Pengesah menandakan doctype yang tiada sebagai ralat pertama; jangan sekali-kali terbitkan halaman tanpa pengisytiharan doctype.

Pengesahan Berterusan

Jalankan pengesahan pada setiap PR melalui GitHub Actions: pasang html-validate, jalankannya terhadap tapak yang dibina, dan gagalkan PR jika terdapat ralat. Ralat baharu dikesan semasa semakan, bukannya terkumpul selama berbulan-bulan sehingga menjadi terlalu sukar untuk dibaiki kemudian.

Semakan Pengetahuan

Mengapakah pengisytiharan <!doctype html> yang tiada sangat penting kepada pengesah W3C?

Ringkasan

W3C Markup Validator menghuraikan HTML berdasarkan spesifikasi dan melaporkan penandaan yang tidak sah. Gunakannya melalui antara muka web untuk pemeriksaan sekali-sekala dan melalui CLI html-validate dalam CI untuk liputan berterusan. Isu biasa termasuk alt yang tiada, ID pendua, doctype yang tiada dan elemen interaktif bersarang. Pengesahan mengesan ralat penandaan; gabungkannya dengan Lighthouse dan semakan manual untuk memastikan kualiti semantik serta kebolehcapaian.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
40
Pelajaran
159

Soalan Lazim

Adakah pelajaran “Pengesah Markup W3C” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Pengesah Markup W3C”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pengesah Markup W3C”?

Cari dan baiki ralat HTML dengan Perkhidmatan Pengesahan Markup W3C Anda berlatih HTML Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan HTML Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Pengesah Markup W3C” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Pengesah Markup W3C
  2. Audit HTML Lighthouse
  3. Pa11y dan axe untuk Ujian Kebolehcapaian
  4. Ujian Syot Kilat HTML
← Kembali ke HTML Academy