HTML Yapısı

Konu Anlatımı

HTML Yapısı

HTML, sayfanın içerik ve anlam katmanını kurar; görünümü CSS, davranışını JavaScript üstlenir.9. sınıftaki temel etiket bilgisinin ötesinde bu konu üç şeyi hedefler: arama motorlarının ve ekran okuyucuların okuyabildiği semantik yapı, sunucuya giden form verisinin doğrulanabilirliği ve klavyeyle kullanılabilirlik. Sağlam bir iskelet, kod yazmadan önce kurulur; sonradan düzeltmek iskeleti yeniden kurmaktan çok daha pahalıdır.

1. Belge İskeleti ve Semantik Yapı

Belge, <!DOCTYPE html> bildirimiyle açılır ve <html lang='tr'> etiketiyle sarılır. head bölümü sayfanın tanıtım bilgilerini taşır: karakter seti <meta charset='UTF-8'>, küçük ekran bildirimi <meta name='viewport' …> ve sayfa içinde tek bir title. body ise görünen içeriğin yeridir. Semantik etiket kutuyu değil anlamı bildirir; ekran okuyucu, rastgele div yığını ile main arasında farkı anında algılar. Her bölgeye karşılık gelen etiketler ve görevleri aşağıdadır.

Yalnızca görsel düzen için div ve span uygundur; bir bölge anlam taşıyorsa semantik etiket zorunludur. Başlık seviyeleri h1'den h6'ya kesintisiz ilerler ve sayfada tek bir h1 bulunur.

2. Listeler, Tablolar ve İçerik Düzeni

Sıralı süreçler ol, sırasız madde grupları ul ile kurulur; her madde li içindedir. Tablolar veri karşılaştırması içindir, sayfa düzeni için değil: sütun başlıkları th ile verilir ve gövde satırları tbody içinde toplanır. Ekran okuyucu, hücreyi okurken en yakın başlığı sütun adı olarak aktarır; bu yüzden her tabloda en az bir başlık satırı bulunur. Uzun alıntılar blockquote, satır içi kod parçaları code içinde yazılır.

3. Form Elemanları ve Doğrulama Nitelikleri

Form, veriyi toplayıp sunucuya gönderen yapıdır: action hedef adresi, method ise kullanılacak HTTP yöntemini belirtir. Tarayıcı tarafı doğrulama, hatayı gönderimden önce yakalar ve gereksiz istekleri önler. Yaygın nitelikler şunlardır:

• required: alanı zorunlu kılar, boş gönderimi engeller.
• type='email' ve type='number': girilen değerin türünü denetler.
• pattern: telefon numarası gibi özel bir kalıpla eşleşme şartı koyar.
• minlength, min, max, step: uzunluk ve aralık sınırı verir.

Her giriş alanının bir label ile eşleşmesi gerekir: etiketin for niteliği, alanın id değeriyle birebir aynı yazılır. Böylece alana tıklandığında imleç alana düşer, mobil klavye doğru türde açılır ve ekran okuyucu alanı doğru tanıtır.

4. Erişilebilirlik ve Denetim

Erişilebilirlik yalnız görme engelli kullanıcılarla ilgili değildir; yavaş bağlantı, tek elle kullanım ve arama motorları da aynı yapıyı okur. Dört temel kural şunlardır: başlık hiyerarşisi atlanmaz, tüm etkileşimli öğeler klavyeyle erişilebilir kalır, gövde metni ile zemin arasında en az 4,5:1 kontrast oranı korunur ve uyarı yalnız renge dayandırılmaz, metin de eklenir. Kırık bağlantılar, yinelenen id değerleri ve eksik dil bildirimi, tarayıcı denetim eklentileriyle dakikalar içinde görünür hâle gelir.

5. Sınav Odaklı Özet

Sınavlarda en çok semantik etiketin anlamı, label-alan eşleşmesi, form method ve action'ın görevi ile doğrulama niteliklerinin yakaladığı hata türü sorulur. Belge taslağı verildiğinde sırayla DOCTYPE ve dil bildirimi, başlık hiyerarşisi ve form nitelikleri kontrol edilir; düzen için div yığınına başvurulmaz, bölüme anlam taşıyorsa semantik etiket tercih edilir.

Ne Öğreneceğiz

Semantik HTML5 belge yapısı, form doğrulama nitelikleri ve erişilebilirlik kurallarını kapsar. Bu konuda ögrenme çıktıları:

• 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.

Ön Bilgi

Bu konuya başlamadan önce temel kavram ve ön koşulları kavramanız yardımcı olacaktır. Konunun çerçevesinde şu kavramlar dikkat ister:

• 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.

Basit Örnek ve Günlük Yaşam

Günlük yaşamda ve mesleki bağlamda bir uygulama:

Soru: Okulun etkinlik duyuru sayfası için üst şerit, gezinme, ana içerik, yan not ve alt bilgi istenmektedir. Hangi etiketler nereye gelir?

1. Adım 1: Belge DOCTYPE, html lang='tr' ve head bölümü (charset, viewport, title) ile açılır.
2. Adım 2: body içinde üst şerit header, gezinme bağlantıları nav içine yerleştirilir.
3. Adım 3: Ana duyuru main içine, ilgili not ve bağlantılar aside içine konur.
4. Adım 4: Telif ve iletişim bilgisi footer'a yazılır, sayfa tek bir h1 ile başlıklandırılır.

Sonuç/cevap: Yerleşim header, nav, main, aside ve footer semantik etiketleriyle kurulur; her bölge tek etiketle sarılır.

Adım Adım Çözülmüş Örnek

Örnek 1: Semantik İskeletin Kurulması konusunun adımları:

1. Adım 1: Belge DOCTYPE, html lang='tr' ve head bölümü (charset, viewport, title) ile açılır.
2. Adım 2: body içinde üst şerit header, gezinme bağlantıları nav içine yerleştirilir.
3. Adım 3: Ana duyuru main içine, ilgili not ve bağlantılar aside içine konur.
4. Adım 4: Telif ve iletişim bilgisi footer'a yazılır, sayfa tek bir h1 ile başlıklandırılır.

Karşılaştırma Tablosu

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.

Başlık seviyelerini atlayarak kullanmak: h1'den h3'e geçmek belge hiyerarşisini bozar ve ekran okuyucu gezinmesini kırar.

Görselleri alternatif metinsiz yerleştirmek: Ekran okuyucu içeriği anlatamaz, erişilebilirlik denetimi başarısız olur.

Kendini Dene

Soru: Yönerge: Erişilebilir bir kayıt formu için tam HTML5 belge iskeleti yaz. İskelette DOCTYPE, html lang, charset, viewport, title, semantik bölüm etiketleri (header, main, form), label ile alan eşleştirmesi ve en az iki doğrulama niteliğinin (required, type, pattern) yer almasını sağla; ardından bu iskeletin erişilebilirlik açısından sağladığı üç kazanımı madde madde açıkla.

Örnek cevap: Puanlama anahtarı: DOCTYPE ve html lang yazımının 3 puan; charset UTF-8 ve viewport bildiriminin 3 puan; tek title'ın yazılmasının 2 puan; header-main-form semantik yapısının 3 puan; label for ile input id eşleşmesinin 3 puan; required, type ve pattern'ten en az ikisinin doğru kullanılmasının 3 puan; üç kazanımın (klavye erişimi, gönderimden önce hata yakalama, ekran okuyucu okunabilirliği) yazılması 3 puan. Toplam 20 puan. Model cevap: İskelet DOCTYPE ile başlar, dil ve karakter seti bildirilir, içerik semantik bölümlerde toplanır, giriş alanları label ile eşleşir ve doğrulama nitelikleri hatayı gönderimden önce yakalar.