# HTML Nedir?
HTML (HyperText Markup Language), web tarayıcılarının okuyup anlamlandırdığı, bir web sayfasının temel yapı taşını ve omurgasını oluşturan işaretleme dilidir. HTML, programlama dili değildir; tarayıcıya sayfadaki içeriklerin hangisinin başlık, hangisinin paragraf, görsel veya form alanı olduğunu söyler. HTML5, dilin son ana sürümüdür ve modern web uygulamaları geliştirmek için yerleşik ses/video oynatıcılar, çizim alanları ve zengin form kontrolleri sunar. Modern web standartlarında HTML, anlamsal kodlamayı destekleyerek web sayfalarının her cihazda doğru ve tutarlı çalışmasını sağlar.
# Tarayıcı Nasıl Çalışır?
Modern web tarayıcıları, sunucudan ham HTML kodunu byte dizisi olarak alır. Bu byte'lar sırasıyla karakterlere, token'lara ve ardından nesnelere dönüştürülerek DOM (Document Object Model) ağacını oluşturur. Tarayıcı aynı zamanda harici veya dahili CSS stillerini işleyerek CSSOM (CSS Object Model) ağacını inşa eder. DOM ve CSSOM birleştirilerek ekrana çizilecek elemanların hiyerarşisini gösteren Render Tree oluşturulur. Ardından yerleşim (layout) ve boyama (painting) aşamalarıyla görsel sayfa son kullanıcıya sunulur. Bu render sürecinin optimize edilmesi, web sayfalarının yüklenme hızını doğrudan etkiler.
# Doctype Nedir?
Her HTML belgesinin en üstünde yer alan <!DOCTYPE html> bildirimi, tarayıcıya belgenin hangi standartlara göre yorumlanacağını söyler. Doctype eksik veya hatalı olduğunda tarayıcı, geriye dönük uyumluluk sağlamak adına 'Quirks Mode' olarak adlandırılan ve standart dışı render hatalarına sebep olabilen özel bir modda çalışmaya başlar. Bu mod, modern web standartlarıyla çelişen hatalı görsel sunumlara yol açar.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Doctype Standart Yapısı</title>
</head>
<body>
<h1>Doctype Bildirimi ile Standart Render</h1>
</body>
</html># Semantik HTML
Semantik HTML, sayfa yapısını kurarken sadece görsel kutular oluşturmak yerine (div ve span gibi anlamsız etiketlerle), her bölümün işlevine uygun etiketlerin (header, nav, main, section, article, aside, footer) kullanılmasını öngörür. Bu yaklaşım arama motoru optimizasyonunu (SEO) üst seviyeye taşır ve ekran okuyucu yazılımlar kullanan engelli kullanıcıların web sitenizi rahatça deneyimlemesini sağlar. Semantik etiketler, arama motoru botlarının web sitenizin ana temasını ve hiyerarşisini kolayca saptamasına destek olur.
<header>
<nav>
<a href="/">Ana Sayfa</a>
<a href="/docs">Dokümanlar</a>
</nav>
</header>
<main>
<article>
<h2>Semantik Web'in Geleceği</h2>
<p>Semantik etiketler tarayıcı ve arama botları için anlam ifade eder.</p>
</article>
</main>
<footer>
<p>© 2026 YazılımHub</p>
</footer># Modern Formlar ve Giriş Tipleri
HTML5 ile birlikte form kontrolü istemci tarafında çok daha güçlü hale gelmiştir. input etiketinin email, tel, date, number, color ve range gibi türleri sayesinde, mobil cihazlarda otomatik olarak ilgili sanal klavyeler açılır ve yerleşik tarayıcı doğrulamaları (browser validation) tetiklenir. Ayrıca required, pattern, min ve max gibi doğrulamalar sunucuya veri gitmeden kullanıcıyı uyarır. Form etiketleri içinde yer alan modern nitelikler sayesinde geliştiriciler karmaşık JS validation işlemlerine gerek duymadan temel form güvenliğini sağlayabilirler.
DİKKAT / UYARI
Erişilebilirlik standartlarını karşılamak için her form alanının (input) mutlaka bir label etiketiyle ilişkilendirilmesi gerekir. label etiketindeki 'for' niteliği ile input etiketindeki 'id' niteliğinin birebir eşleştiğinden emin olun.
Mini Quiz
Aşağıdaki HTML5 etiketlerinden hangisi, bir web sayfasının ana içeriğiyle doğrudan ilişkili olmayan ancak yan bilgi, reklam veya ek bağlantılar sunan bölümleri için kullanılır?
# HTML5 Semantik Kayıt Formu
Kod Challenge
HTML5 Semantik Kayıt Formu
Ad-soyad, e-posta, telefon numarası ve şifre alanları içeren, tamamıyla semantik etiketlerle sarmalanmış ve erişilebilirlik standartlarına uygun bir kayıt formu oluşturun.