HTML, insanlık medeniyetinin tüm dijital kütüphanesini taşıyan temel omurgadır; buna rağmen bilgisayar bilimleri tarihinin en çok yanlış anlaşılan, hor görülen ve sahte bir basitlikle yaftalanan dilidir. Modern bir web geliştiricisinin node_modules dizinine çekinmeden 450 megabayt bağımlılık indirdiği, onlarca reaktif katmandan oluşan paketleme araçları kurduğu ve karmaşık durum yönetimleri tasarladığı günümüzde, tarayıcıya gönderilen nihai belge ne yazık ki çoğu zaman iç içe geçmiş yüzlerce <div> ve <span> kutusundan ibaret biçimsiz bir çorbadır.

Titiz, anlamsal (semantik) ve erişilebilir HTML yazmak yalnızca estetik bir tercih değil, doğrudan sistem mimarisi meselesidir. Web tarayıcıları pasif çizim tuvalleri değildir; bayt akışlarını ayrıştıran deterministik sonlu durum makineleri (DFA), ağaç oluşturma algoritmaları ve erişilebilirlik nesne modeli (AOM) sentezleyicileri barındıran son derece gelişmiş derleyici motorlarıdır. W3C ve WHATWG standartlarında tanımlanmış 265 resmi öğe arasından doğru semantik etiketi seçtiğinizde, otuz yıllık donanım ve yazılım optimizasyonunu, yerel klavye erişimini, ekran okuyucu uyumluluğunu ve arama motoru indeksleme gücünü tek bir satırda devreye sokmuş olursunuz.

Semantik İşaretleme Mimarisi: Tim Berners-Lee'den Living Standard'a

1991 yılında Cenevre'deki CERN nükleer araştırma merkezinde Sir Tim Berners-Lee, «HTML Tags» başlıklı mütevazı bir teknik doküman yayınladı. SGML kökenli bu ilk taslak yalnızca 18 yapısal öğe içeriyordu. Berners-Lee'nin vizyonu tamamen mimariydi: dünyanın dört bir yanındaki bilim insanlarının işletim sistemi, ekran çözünürlüğü, kurulu yazı tipleri veya işlemci mimarisi fark etmeksizin akademik makaleleri hipermetin bağlantılarıyla paylaşabilmesini hedefliyordu.

1995 yılına gelindiğinde Dave Raggett ve IETF, HTML 3.0 taslağını sundu. Raggett; karmaşık tablolar, matematiksel denklemler ve metin saran görseller gibi ileri düzey yapılar önerdi. Ancak standartlar komiteleri bu taslağı onaylayamadan, 90'ların sonunda Netscape Navigator ile Microsoft Internet Explorer arasında patlak veren yıkıcı «Tarayıcı Savaşları» (Browser Wars) başladı. Pazar payı kapma hırsıyla şirketler semantiği bir kenara itip kendi tescilli görsel etiketlerini uydurmaya başladılar: Netscape dikkat dağıtıcı <blink> etiketini piyasaya sürerken, Microsoft buna kayan yazı <marquee>, arka plan sesi <bgsound> ve görünmez boşluk blokları <spacer> ile karşılık verdi.

Yeni binyılın başında World Wide Web Consortium (W3C), XHTML 2.0 adı altında teorik bir çıkmaza saplandı. Akademik fildişi kulelerine çekilen komite üyeleri, web'in geriye dönük uyumluluğunu çöpe atıp katı bir XML doğrulaması dayatmaya kalktı: kapatılmamış tek bir etiket veya unutulmuş bir tırnak işareti, tarayıcının tüm sayfayı kilitleyip meşhur «Sarı Ölüm Ekranı» (Yellow Screen of Death) göstermesine yol açacaktı. Web'in gerçek dünyadaki dinamik, hatalara toleranslı ve yaşayan yapısı bu dogmatik yaklaşımı hızla reddetti.

2004 yılında Apple, Mozilla ve Opera'dan çekirdek mühendisler W3C'nin durağanlığına isyan ederek WHATWG topluluğunu kurdular. Amaçları son derece gerçekçiydi: tarayıcıların gerçek internetteki kodları nasıl ayrıştırdığını ampirik olarak incelemek, çökmeyen toleranslı bir ayrıştırma algoritması tanımlamak ve HTML'i sürekli evrilen bir «Living Standard» (Yaşayan Standart) haline getirmek. Günümüzde HTML standardının mutlak otoritesi WHATWG'dir ve 265 etiketlik devasa katalog; yapısal bölümlerden SVG vektör grafiklerine, MathML formüllerinden etkileşimli yerel bileşenlere kadar tüm web platformunu kapsamaktadır.

Kaputun Altı: Tarayıcı Motorları DOM Ağacını ve Render Ağacını Nasıl İşler?

Her bir etiketin sayfaya getirdiği gerçek maliyeti anlamak için, Blink (Chrome), WebKit (Safari) veya Gecko (Firefox) gibi modern tarayıcı motorlarının TCP üzerinden gelen bayt akışını nasıl işlediğini adım adım incelemek gerekir:

• Bayt Akışı Kod Çözme ve Hızlı Ön Tarayıcı (Preload Scanner): Ağ katmanı ham bayt paketlerini metin kod çözücüye iletir; HTTP başlıkları veya <meta charset="utf-8"> ile karakter seti belirlenir. Bu esnada arka planda çalışan ikincil bir ayrıştırıcı (Preload Scanner), stil dosyaları, yazı tipleri ve kritik betikler gibi kaynakları keşfedip anında indirmeye başlar.
• Deterministik Sonlu Durum Otomatı ile Tokenizasyon: Ana sözcüksel analiz aracı (Lexer) bir DFA makinesi çalıştırır. Gelen her karakteri Veri Durumu, Etiket Açılış Durumu veya Öznitelik Durumu gibi onlarca dahili durum arasında geçirerek atomik token'lar üretir: DOCTYPE token'ı, başlangıç etiketi, bitiş etiketi, karakter veya yorum token'ı.
• Ağaç İnşası ve Hata Kurtarma Algoritması: Standart HTML5 ağaç oluşturucu, açık öğeler yığınını (stack of open elements) ve katı yerleştirme modlarını yönetir. Hatalı iç içe geçmiş kodlarda (örneğin <p>Metin <div>Kutu</div></p> gibi geçersiz yapılarda), motor çökmek yerine ünlü Adoption Agency Algorithm (AAA) mekanizmasını çalıştırarak biçimlendirme öğelerini yeniden düzenler ve ağacı güvenle inşa eder.
• DOM ve CSSOM Birleşimi: Render Ağacı (Render Tree): Bellekte C++ düğümlerinden oluşan DOM ağacı ile CSSOM bir araya getirilir. Ekranda görsel çıktı üretmeyen düğümler (<head>, <script> veya display: none verilmiş öğeler) ayıklanarak nihai Render Tree meydana getirilir.
• Düzen (Reflow / Layout), Boyama ve Birleştirme (Compositing): Motor, Render Tree üzerindeki her kutunun ekrandaki mutlak piksel koordinatlarını ve boyutlarını hesaplar (Reflow). Ardından pikselleri GPU katmanlarına rasterize eder (Paint) ve ekran kartı aracılığıyla monitöre basar (Composite). Uygunsuz etiketler ve kontrolsüz DOM manipülasyonları, tarayıcıda sürekli küresel reflow zincirlerini tetikleyerek işlemciyi kilitler ve arayüzde donmalara (jank) yol açar.

Modern Web Geliştirmenin Günahları: «Div Çorbası», Etiket İsrafı ve Erişilebilirlik Suçları

Yazılım dünyasındaki en kronik hastalık «Div Çorbası» (Div-Soup) sendromudur: arayüzdeki her görsel yapıyı sadece anlamsız <div> ve <span> etiketleriyle örme alışkanlığı. Bu felaketin en belirgin sembolü sahte butondur: <div class="btn" onclick="formuGonder()">Gönder</div>.

Gerçek bir <button> yerine div kullanıldığında, tarayıcının otuz yıldır bedelsiz sunduğu erişilebilirlik ve klavye donanımı çöpe atılmış olur. Bir div etiketi sekme (Tab) tuşuyla odaklanamaz, Enter veya Boşluk tuşlarına doğal tepki vermez, formları yerel olarak tetiklemez, ekran okuyuculara buton olduğunu bildirmez ve disabled durumunu iletmez. Bir <button> öğesinin 1995'ten beri doğuştan sahip olduğu bu temel davranışları div üzerinde taklit edebilmek için geliştirici onlarca satır JavaScript yazmak, tabindex="0" eklemek, klavye olaylarını dinlemek ve yapay ARIA öznitelikleri yamamak zorunda kalır. Bu, gereksiz karmaşıklık ve teknik borç üretmekten başka bir şey değildir.

Başlık hiyerarşisinin katledilmesi de benzer bir suçtur. Sırf yazı boyutu tasarıma uyuyor diye <h1> etiketinin hemen altına <h4> yerleştirmek, görme engelli kullanıcıların zihinsel sayfa haritasını paramparça eder. Ekran okuyucu kullanıcıları sayfada başlık kısayol tuşlarıyla (H ve 1-6 arası rakamlar) gezinirler. Görsel büyüklük CSS ile çözülmelidir; HTML etiketleri yalnızca mantıksal mimariyi temsil etmek için vardır.

Ayrıca Googlebot gibi arama motoru örümcekleri, semantik bölümleme etiketlerini (<main>, <article>, <nav>, <aside>, <header>, <footer>) kullanarak sayfanın esas editoryal içeriğini menülerden ve telif hakkı uyarılarından ayırt eder. Sitede semantik etiket bulunmadığında arama motorları içeriği ayrıştırmakta zorlanır, bu da sıralama kaybına ve zengin arama sonuçlarının (rich snippets) kaçırılmasına yol açar.

W3C Erişilebilirliği, ARIA Ağacı ve Living Standard Standartları

Web tarayıcısı, DOM yapısının hemen yanı başında ikinci bir veri omurgası inşa eder: Erişilebilirlik Ağacı (AOM). Bu ağaç; Windows UI Automation, macOS NSAccessibility veya Linux AT-SPI gibi işletim sistemi köprüleri üzerinden ekran okuyuculara (NVDA, JAWS, VoiceOver) doğrudan veri akışı sağlar.

HTML5'in semantik etiketleri, W3C ARIA rollerini ve durumlarını doğuştan bünyesinde barındırır:

• <nav> öğesi tarayıcı tarafından otomatik olarak role="navigation" sınır noktası olarak ilan edilir.
• <main> öğesi sayfanın merkezini temsil eden role="main" rolünü üstlenir.
• <dialog>, showModal() ile çağrıldığında klavye odağını pencere içine hapseder, arka planı ::backdrop ile karartır ve Escape tuşuna basıldığında kendiliğinden kapanır.
• <details> ve <summary> ikilisi, tek satır JavaScript yazmadan klavye destekli, aria-expanded durumu dinamik güncellenen yerel akordeon menüleri oluşturur.
• <progress> ve <meter>, canvas üzerinde dönen karmaşık animasyonlara gerek kalmadan sayısal değerleri ekran okuyuculara kusursuzca aktarır.

W3C ARIA şartnamesinin birinci altın kuralı şunu emreder: «Gereken semantik anlam ve davranışa sahip yerel bir HTML öğesi veya özniteliği kullanabiliyorsanız, bunu kullanın; asla genel bir öğeyi ARIA rolleriyle yamamaya kalkışmayın.» ARIA yalnızca yerel HTML'in yetersiz kaldığı uç durumlarda ek destek sağlamak içindir; eksik semantiğin mazereti olamaz.

Dijital Mezarlık: Marquee, Blink ve Center Neden Tarihe Gömüldü?

HTML5 standardı, internetin ilk dönemlerinden kalan onlarca arkaik etiketin resmi olarak kullanımdan kaldırılmasını (deprecated) ve tasfiye edilmesini sağladı. Bu etiketlerin neden tarihe gömüldüğünü kavramak, modern web mimarisinin ilkelerini anlamak açısından çok öğreticidir:

• Sorumlulukların Ayrılması (Separation of Concerns): <center>, <font>, <big> ve <strike> gibi etiketler görsel sunum ile belge yapısını birbirine karıştırıyordu. CSS Flexbox ve CSS Grid olgunlaştıktan sonra HTML içine sabit stil gömmek, mobil cihazlara uyumlu duyarlı tasarımı (responsive design) imkânsız hale getirdi.
• Donanım Tüketimi ve Bilişsel Engeller: Meşhur <marquee> etiketi, ana iş parçacığında (main thread) bitmek bilmeyen bir yeniden çizim (repaint) döngüsü yaratarak eski mobil işlemcileri ve pilleri tüketiyordu. Daha da vahimi: durdurulamayan kayan metinler, dikkat eksikliği veya görme güçlüğü çeken bireyler için web sayfalarını okunamaz kılıyordu.
• Hipermetin Mimarisi İhlali: <frameset> ve <frame> etiketleri, web'in en temel yapı taşı olan «tekil URL» prensibini parçaladı. Kullanıcı üç farklı çerçeve içinde gezinirken tarayıcının adres çubuğu sabit kalıyor, yer imi ekleme, bağlantı paylaşma ve geri tuşu işlevleri tamamen bozuluyordu.
• Güvenlik Zafiyetleri: <applet> (Java) ve <keygen> gibi eski eklenti kapsayıcıları, istemci tarafında kritik güvenlik açıkları yaratıyordu. Modern standartlar bunların yerine yalıtılmış <iframe sandbox>, WebAssembly ve yerel Web Kriptografi API'lerini getirdi.

Bu rehberde sunulan 265 HTML, SVG ve MathML etiketinin tamamına hakim olmak, küresel standartlarda yüksek performanslı, sağlam ve herkes için erişilebilir dijital ürünler inşa etmenin en kestirme yoludur.