W3C İşaretleme Doğrulayıcısı
W3C Markup Validation Service ile HTML hatalarını bulun ve düzeltin
W3C İşaretleme Doğrulayıcısı, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Doğrulayıcının Denetledikleri
W3C İşaretleme Doğrulayıcısı (validator.w3.org), HTML'yi resmi belirtime göre ayrıştırır ve belirtim ihlallerinin tümünü raporlar: kapatılmamış etiketler, geçersiz iç içe yerleşim (bir <p> öğesinin başka bir <p> içinde bulunması), gerekli özniteliklerin eksik olması (alt özniteliği olmayan img), tanınmayan öğeler ve daha birçok sorun.
Doğrulama Neden Önemlidir
Geçersiz HTML bugün her tarayıcıda oluşturulabilir; ancak her tarayıcı hatayı farklı biçimde gidermekte özgürdür. Chrome'da düzgün görünen bir şey Firefox'ta bozulabilir. Geçerli HTML, öngörülebilir ve tutarlı bir görüntüleme sağlar; ekran okuyucularında, arama tarayıcılarında ve e-posta istemcilerinde şaşırtıcı davranışları önler.
Göndermenin Üç Yolu
URL ile (sayfanın URL'sini yapıştırarak), dosya yükleyerek veya doğrudan girdiyle (HTML'yi yapıştırarak) doğrulama yapabilirsiniz. URL, canlı sayfalar için en iyisidir; dosya henüz herhangi bir yerde yayında değilken geliştirme sırasında doğrudan girdi kullanışlıdır.
Sonuçları Okuma
Hatalar bir satır numarası, soruna neden olan işaretleme parçası ve bir açıklama listeler. Yukarıdan aşağıya doğru düzeltin; birçok hata, daha önceki tek bir yanlışın zincirleme sonucudur. İlk birkaçını düzelttikten sonra yeniden çalıştırarak kalan uyarıların kaçının gerçekten geçerli olduğunu görün.
Uyarılar ve Hatalar Arasındaki Fark
Hatalar, görüntülemeyi bozabilecek belirtim ihlalleridir. Uyarılar, teknik olarak geçerli ancak muhtemelen amaçlanmamış şüpheli kalıplardır (yazım hatası izlenimi veren öznitelik adları, erişilebilirlik ipuçları gibi). Hataları mutlaka düzeltin; uyarıları ise araştırmaya değer olarak ele alın.
Yaygın Hatalar
img öğesinde alt özniteliğinin eksik olması. Kapanmayan kendini kapatan etiket (<br> yerine geçerli olan eski biçimdeki <br/> kullanımı). Sayfada yinelenen id bulunması. Bir input id'siyle eşleşen for özniteliği olmayan form etiketi. İç içe etkileşimli öğeler (bir a öğesinin içinde button bulunması). Bu beş sorun, doğrulayıcı çıktılarının çoğunu oluşturur.
Şablonları Doğrulama
HTML'niz şablonlar tarafından oluşturuluyorsa şablon kaynağını değil, son çıktıyı (oluşturulan sayfayı) doğrulayın. Bir {{ }} yer tutucusu geçerli HTML değildir — yalnızca altyapının ürettiği içerik önemlidir. Doğrulayıcıyı CI'da bir sınama derlemesinden oluşturulan sayfalara karşı çalıştırın.
html-validate CLI
CI tümleştirmesi için html-validate npm paketini kullanın: npx html-validate "public/**/*.html" bir derlemedeki her sayfayı doğrular. Kuralları .htmlvalidate.json içinde yapılandırın. Doğrulama gerilemelerinde derlemeleri başarısız kılmak için bunu kullanın.
Kaynakta Stylelint ve Lint Denetimi
Yazma sırasında yapılan lint denetimi (CSS için stylelint, React için eslint-plugin-jsx-a11y), birçok sorunu doğrulayıcıya ulaşmadan yakalar. Bunu CI'daki uçtan uca doğrulamayla birleştirerek katmanlı savunma sağlayın — sorunların çoğunu erken, kalanını da dağıtımdan önce yakalayın.
Doğrulamanın NOT Yakaladığı Şeyler
Doğrulama, anlam bilgilerini değil işaretlemenin doğruluğunu denetler. Her başlığın <h6> olduğu bir sayfa geçerli HTML'dir, ancak anlam bilgileri açısından kötüdür. Lighthouse erişilebilirlik denetimleri ve elle yapılan inceleme, doğrulayıcının yakalayamadığı anlamsal sorunları ortaya çıkarır.
Quirks Mode Uyarısı
<!doctype html> eksikliği Quirks Mode'u tetikler — tarayıcılar, modern CSS'i bozan eski bir uyumluluk katmanı kullanır. Doğrulayıcı, eksik doctype bildirimini ilk hata olarak işaretler; doctype bildirimi olmayan bir sayfayı asla dağıtıma çıkarmayın.
Sürekli Doğrulama
Her PR'da GitHub Actions aracılığıyla doğrulama çalıştırın: html-validate'i kurun, oluşturulan siteye karşı çalıştırın ve hata varsa PR'ı başarısız kılın. Yeni hatalar, aylar boyunca birikip sonradan düzeltilmesi bunaltıcı hâle gelmek yerine inceleme sırasında yakalanır.
Bilginizi Sınayın
Eksik bir <!doctype html> bildirimi W3C doğrulayıcısı için neden bu kadar önemlidir?
Özet
W3C İşaretleme Doğrulayıcısı, HTML'yi belirtime göre ayrıştırır ve geçersiz işaretlemeyi bildirir. Tek seferlik denetimler için web arayüzü üzerinden, sürekli kapsam için CI'da html-validate CLI aracılığıyla kullanın. Yaygın sorunlar şunlardır: eksik alt, yinelenen id'ler, eksik doctype ve iç içe etkileşimli öğeler. Doğrulama işaretleme hatalarını yakalar; anlamsal ve erişilebilirlik kalitesi için bunu Lighthouse ve elle yapılan incelemeyle tamamlayın.
Sıkça Sorulan Sorular
“W3C İşaretleme Doğrulayıcısı” dersi ücretsiz mi?
Evet — “W3C İşaretleme Doğrulayıcısı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“W3C İşaretleme Doğrulayıcısı” dersinde ne öğreneceğim?
W3C Markup Validation Service ile HTML hatalarını bulun ve düzeltin HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“W3C İşaretleme Doğrulayıcısı” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- W3C İşaretleme Doğrulayıcısı
- Lighthouse HTML Denetimi
- Erişilebilirlik Testleri için Pa11y ve axe
- HTML Anlık Görüntü Testleri