HTML Yapısı nedir?

Bu konuda neler öğreneceksin?

• HTML5 belge iskeletini (DOCTYPE, head, body, meta) ve semantik etiketlerin işlevini açıklar.
• Form alanlarını doğrulama nitelikleriyle tasarlar ve label-alan eşleşmesini uygular.
• Başlık hiyerarşisi, klavye erişimi ve kontrast ölçütleri açısından erişilebilir belge oluşturur.
• Geçersiz işaretleme kaynaklı hataları denetim araçlarıyla tespit edip giderir.
• Karakter seti, dil ve açıklama meta bilgilerini doğru kullanarak sayfanın doğru okunmasını sağlar.

Anahtar fikirler

• Semantik etiketler anlamı bildirir; div ve span yalnızca düzen içindir.
• label'ın for değeri ile alanın id değeri birebir aynı olmalıdır.
• required, type, pattern, min-max nitelikleri hatayı gönderimden önce yakalar.
• Karakter seti UTF-8, viewport bildirimi ve tek title tüm sayfalarda bulunur.
• Tarayıcı tarafı doğrulama, sunucu tarafı doğrulamanın yerine geçmez.
• Başlık seviyeleri atlanmaz; yalnız büyük yazı için CSS kullanılır.

Konunun özeti

Formlarda label-eşleşme ile required, pattern gibi nitelikler veriyi baştan doğrular; esas denetim ise sunucu tarafında yapılır. Erişilebilirlik için kontrast oranı, klavye erişimi ve tek h1 kuralı gözetilir.

Sık yapılan hatalar

• Semantik etiket yerine div yığını kullanmak: Ekran okuyucu bölümleri ayırt edemez, arama motoru içerik hiyerarşisini okuyamaz.
• Label ile alanın for ve id değerlerini farklı yazmak: Alana tıklamak etikete düşmez, mobil klavye ve ekran okuyucu bozulur.
• Form verisini yalnız tarayıcıda doğrulamak: İstek konsoldan doğrudan atılabildiği için hatalı veri sunucuya ulaşır.

İlgili konular

• CSS ile Biçimlendirme
• Web Performansı ve Optimizasyon
• Bulut Bilişim ve Sanallaştırma