HTML’in Beklendiği Gibi Çalışmasını Sağlayan Vazgeçilmez Etiketler

• Bir web sayfasının tarayıcıda beklendiği gibi görüntülenmesi için bazı temel HTML etiketlerinin mutlaka bulunması gerekir
• ``, standart modda render edilmesini garanti ederek düzen hesaplama hatalarını önler
• ``, dil bilgisi sağlayarak erişilebilirliği, arama sonuçlarını ve çeviri kalitesini iyileştirir
• ve, sırasıyla karakter kodlamasını ve mobil görüntüleme oranını kontrol eder
• Bu etiketler yalnızca biçimsel unsurlar değil, web standartları ve kullanıcı deneyimi tutarlılığını koruyan temel bileşenlerdir

---

HTML temel yapısı ve vazgeçilmez etiketlere genel bakış

• Yazı, Alex Petros’un “Incantations that make HTML work correctly” başlıklı sunumundan esinlenerek hazırlanmış
  • Yazar, HTML dosyasını doğrudan tarayıcıda açarken her zaman eklenmesi gereken temel snippet’i özetliyor
  • Örnek olarak verilen temel yapı şöyle

• Her etiket, tarayıcının HTML’yi standartlara uygun biçimde yorumlayıp göstermesine yardımcı olur
  • Eksik olduklarında tarayıcı standart dışı moda (quirks mode) geçebilir ya da karakter bozulması, mobil ekranda küçülme gibi sorunlar ortaya çıkabilir

`` — standart mod bildirimi

• ``, tarayıcıya sayfayı standart modda (standards mode) render etmesini söyleyen bir bildiridir
  • Bu bildirim yoksa tarayıcı quirks mode’a geçerek eski, standart dışı HTML davranışlarını taklit eder
  • Sonuç olarak düzen, boyut ve hizalama hesapları değişir ve beklenmedik görüntüleme hataları oluşur
• büyük/küçük harfe duyarlı değildir; veya `` gibi her biçimde tanınır
  • Yazar, “1998 usulü markup kullanmak istiyorsanız büyük harfle de yazabilirsiniz” diye espri yapıyor

`` — belge dilini belirtme

• ``, belgenin varsayılan dilini açıkça belirten etikettir
  • Bu bilgi tarayıcılar, arama motorları, ekran okuyucular ve başka araçlar tarafından kullanılır
• Başlıca kullanım örnekleri
  • Ekran okuyucuların doğru telaffuz ve ses tonunu seçmesi
  • Arama motorlarının indeksleme ve çeviri doğruluğunu artırması
  • Yazım denetimi gibi yerel ayar tabanlı özelliklerin uygulanması
• Dil niteliği atlandığında ekranda görünür bir sorun yokmuş gibi durabilir, ancak çevredeki araçlar yanlış davranabilir
  • Bu yüzden bunu HTML içinde açıkça belirtmek daha uygundur
• Dil bilgisi sunucu yanıt başlığıyla da iletilebilir, ancak yerel dosya doğrudan açıldığında HTML içinde belirtilmesi daha güvenlidir
  • Örnek kod

    return new Response(
        "Hello world
    
    

", { status: 200, headers: { "Content-Type": "text/html; charset=utf-8" }, } ); ```

`` — karakter kodlamasını belirtme

• ``, tarayıcının belgenin hangi karakter kodlamasını kullandığını algılamasını sağlar
  • Böylece é, ü, ñ, ©, ™, ®, …, 👍 gibi ASCII dışı karakterler doğru görüntülenir
• Bu etiket yoksa belge içindeki özel karakterler veya akıllı tırnak işaretleri bozuk görünebilir
  • Yazar, kendi blogunda “smart quotes” işaretlerinin bozulduğu bir örneği aktarıyor
• Örnek karşılaştırma
  • `` olmadığında: özel karakterler ve emoji bozulur
  • Eklendiğinde: tüm karakterler normal görünür
• Blog yazısında bu iki durumu karşılaştıran ekran görüntüleri de yer alıyor

`` — mobil viewport ayarı

• Bu etiket, mobil tarayıcılarda ekran oranını ve yakınlaştırma ölçeğini kontrol eder
  • Eksik olduğunda sayfa mobil cihazlarda küçültülmüş ve küçük görünebilir
• Yazar, “masaüstünde iyi görünüyor ama mobilde açınca her şey küçük görünüyor” diyerek meta viewport etiketinin unutulduğu bir örneği anlatıyor
  • Solda (etiket yok) ve sağda (etiket var) karşılaştırmalı ekran görüntüsüyle farkı görsel olarak açıklıyor
• Bu nedenle basit bir prototipte bile bu etiketin bulunması, beklenen düzen oranını korumak için önemlidir

Kapanış — HTML’nin gerçek temelleri

• Yazar sonunda “en önemli snippet’i unuttum” diyerek esprili bir kapanış yapıyor
  • Örnek olarak şu kodu veriyor

• Bu, modern web geliştirmede sık görülen JavaScript tabanlı uygulama yapısına ironik bir gönderme
• Genel olarak yazı, HTML’nin temel etiketlerinin web standartlarına uygun davranışı garanti eden ana unsurlar olduğunu vurguluyor

[GN⁺]

Hacker News görüşleri

• İlginç bir şekilde, HN ve paulgraham.com sitelerinin ikisinde de DOCTYPE bildirimi yok; bu yüzden Quirks Mode ile render ediliyorlar Bunu geliştirici araçlarında document.compatMode ile kontrol edebilirsiniz Ben, üzerine gelinen öğenin metnini kolayca kopyalamak için bir userscript kullanıyorum ama Quirks Mode'da kararsız çalışıyor document.write("" + document.documentElement.innerHTML) ile bunu zorla değiştirmek mümkün, ancak tüm belgeyi sıfırladığı için sorun çıkarıyor Kullanıcı açısından bunu Standards Mode'a geçirmenin daha temiz bir yolu olup olmadığını merak ediyorum
  • Keşke dang, HN'in kullanılabilirliğini biraz iyileştirse Varsayılan yazı tipi boyutu 12px civarında; bu da çoğu modern cihazda fazla küçük görünüyor CSS de sanki yaklaşık 13 yıl önce yayımlanan eski kodu hâlâ kullanıyor
  • Bu, uBlock filtresi ile çözülebilir Örneğin: `||news.ycombinator.com/*$replace=/

[ahwjdekf]

Zorunluysa neden varsayılan olarak çalışmıyor? Neyse, web gerçekten çok tuhaf. Düşünce yapısı epey farklı.

[dongho42]

Muhtemelen geriye dönük uyumluluk yüzündendir, değil mi? Varsayılan çalışma biçimini olduğu gibi değiştirirlerse, daha önce sorunsuz çalışan şeyler bozulabilir.