Bir web sitesi inşa etmeyi, bir ev inşa etmeye benzetebiliriz. Çatıyı kaplamadan veya duvarları boyamadan önce sağlam bir temele ve iyi çizilmiş bir plana ihtiyacınız vardır. Web geliştirme dünyasında bu temel, HTML (HyperText Markup Language) sayfa yapısıdır. Hangi dili veya teknolojiyi kullanırsanız kullanın, internet tarayıcınızın (Chrome, Safari vb.) okuyup size gösterdiği nihai çıktı her zaman bir HTML yapısıdır. Bu rehberde, bir HTML belgesinin nasıl yapılandırıldığını, kodların ne anlama geldiğini ve modern web dünyasında SEO (Arama Motoru Optimizasyonu) ile erişilebilirlik için bu yapının neden bu kadar kritik olduğunu örneklerle öğreneceğiz.
1. Standart Bir HTML Belgesinin İskeleti
İster tek sayfalık basit bir portfolyo, ister dünyanın en büyük e-ticaret sitesi olsun, her HTML sayfasının sahip olması gereken değişmez bir iskeleti vardır. Bilgisayarınızda boş bir metin belgesi açıp uzantısını .html olarak kaydettiğinizde, içine yazmanız gereken ilk temel yapı şudur:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>İlk Web Sayfam</title>
</head>
<body>
<h1>Web Dünyasına Merhaba!</h1>
<p>Bu, benim oluşturduğum ilk HTML sayfası.</p>
</body>
</html>
Peki, ilk defa karşılaştığınız bu kodlar tam olarak ne anlama geliyor? Satır satır inceleyelim:
<!DOCTYPE html>: Bu, belgenin en başında yer almak zorundadır. Tarayıcıya, “Bu belge modern ve güncel HTML5 standartlarına göre yazılmıştır” mesajını verir. Eğer bu satırı eklemeyi unutursanız, tarayıcılar eski web sitelerini desteklemek için “quirks mode” (tuhaflıklar modu) adı verilen hatalı bir işleme moduna geçer ve sayfanızın tasarımı bozulabilir.<html>: Tüm HTML belgesini kapsayan ana (kök) elementtir. Sayfadaki diğer tüm kodlar bu açılış<html ...>ve kapanış</html>etiketleri arasında yer almak zorundadır. İçerisindekilang="tr"niteliği, sayfanın ana dilinin Türkçe olduğunu tarayıcılara ve ekran okuyucu cihazlara bildirir.<head>: Sayfanın beyni veya arka planı olarak düşünülebilir. Bu bölümdeki kodlar, tarayıcı penceresinde kullanıcıya doğrudan gösterilmez. Burada sayfanın başlığı, karakter kodlaması, CSS stil dosyalarının bağlantıları ve arama motorları için meta veriler (metadata) yer alır.<meta charset="UTF-8">: Belgenin karakter kodlamasını belirler. “UTF-8” kullanmak, Türkçe karakterler (ş, ğ, ç, ö, ü, ı) dahil olmak üzere dünya üzerindeki hemen hemen tüm dillerdeki harflerin ve sembollerin tarayıcıda bozulmadan (garip kutucuklar veya soru işaretleri olmadan) doğru bir şekilde gösterilmesini sağlar.<title>: Tarayıcınızın üst sekmesinde görünen metindir. Kullanıcılar sayfanızı favorilere eklediğinde bu isimle kaydedilir ve en önemlisi Google gibi arama motorları arama sonuçlarında sayfa başlığı olarak bu metni kullanır. Bu yüzden SEO açısından kritik bir öneme sahiptir.<body>: Kullanıcıların sayfayı ziyaret ettiğinde ekranlarında gördüğü metinler, görseller, videolar, butonlar ve bağlantılar dâhil olmak üzere her şey<body>ve</body>etiketleri arasına yazılır.
2. Belge Nesne Modeli (DOM) Ağacı
Tarayıcınız yukarıdaki HTML kodlarını okuduğunda, bu yapıyı belleğinde bir soyağacı gibi dallandırır. Buna DOM (Document Object Model) Ağacı denir. <html> bu ağacın köküdür; <head> ve <body> ise onun ana dallarıdır. Tarayıcı, sayfayı çizerken (render ederken) veya siz JavaScript ile sayfaya dinamik bir özellik (örneğin bir butona tıklandığında açılan menü) katmak istediğinizde, tarayıcı bu DOM ağacını referans alır.
3. Modern ve Semantik (Anlamsal) HTML Sayfa Yapısı
Eski HTML sürümlerinde (HTML4 zamanlarında), sayfa düzenini oluşturmak için içerikler anlamsız olan <div> (division/bölüm) ve <span> etiketleri içine hapsedilirdi. Örneğin; <div id="baslik">, <div class="sol-menu"> gibi yapılar kullanılırdı. Ancak bu kodlar bir insana veya geliştiriciye anlam ifade etse de, bir arama motoru botu veya görme engelliler için üretilen bir ekran okuyucu cihaz için hiçbir şey ifade etmiyordu.
HTML5 ile birlikte, kodların içeriğini sadece görsel olarak değil, aynı zamanda “anlamsal” (semantik) olarak da tanımlayan etiketler hayatımıza girdi. Bu etiketler, içerdikleri bilginin amacını açıkça belirtir:
<header>: Sayfanın veya bir bölümün başlık, logo, arama çubuğu ve ana navigasyon bağlantılarını barındıran giriş kısmıdır.<nav>: Site içindeki ana gezinme (menü) bağlantılarını barındıran alandır. Her bağlantı grubu<nav>içine alınmaz, sadece temel menüler için kullanılır.<main>: Sayfanın asıl, temel içeriğini belirtir. Bir sayfada yalnızca bir tane görünür<main>etiketi olmalıdır.<article>: Bir blog yazısı, bir haber haberi veya bir ürün kartı gibi, siteden bağımsız olarak tek başına bile anlam ifade edebilecek, paylaşılabilir bağımsız içerik bloklarını tanımlar.<section>: İçerikleri tematik olarak gruplamak için kullanılır. Genellikle kendi içinde bir başlığa (<h2>,<h3>vb.) sahip olan mantıksal bölümlerdir.<aside>: Ana içerikle doğrudan bağlantısı olmayan ancak dolaylı yoldan ilişkili olan, genellikle yan sütun (sidebar), reklamlar veya yazar bilgisi gibi alanları tanımlar.<footer>: Sayfanın veya bir bölümün en alt kısmıdır. Telif hakkı bildirimleri, iletişim bağlantıları ve sosyal medya ikonları genellikle burada bulunur.
Örnek Bir Semantik HTML Sayfa Yapısı:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML Sayfa Yapısı Öğreniyorum</title>
</head>
<body>
<header>
<h1>Kodlama Atölyesi</h1>
<nav>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#iletisim">İletişim</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Semantik Etiketlerin Gücü</h2>
<p>Tarih: <time datetime="2026-04-03">3 Nisan 2026</time></p>
</header>
<section>
<h3>Neden Önemli?</h3>
<p>Semantik HTML, içeriğin ne olduğunu arama motorlarına ve okuyuculara doğrudan anlatır.</p>
</section>
</article>
<aside>
<h3>Popüler Yazılar</h3>
<ul>
<li><a href="#">SEO İpuçları</a></li>
<li><a href="#">Erişilebilirlik Rehberi</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 Kodlama Atölyesi. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>
4. Semantik Yapının SEO ve Erişilebilirlik Üzerindeki Etkisi
Bir içeriği sadece görsel olarak güzel tasarlamak, 2026 yılının modern web dünyasında yeterli değildir. Yapısal anlamda doğru bir HTML kullanmanın iki devasa faydası vardır:
Arama Motoru Optimizasyonu (SEO) Etkisi: Google ve diğer arama motorlarının botları sitenizi ziyaret ettiğinde sayfayı sizin gibi görsel olarak “görmezler”; kodlarınızı tararlar (crawl ederler). İçeriğinizi <article> veya <section> gibi anlamsal etiketlerle sarmalamanız, botlara “burada değerli ve yapılandırılmış bir bilgi var” mesajını verir. Anahtar kelimelerinizin sıradan bir <div> veya <span> içinde geçmesi yerine, mantıksal bir <header> veya <article> bloğu içinde geçmesi, arama motorları tarafından daha fazla önemsenmesini sağlar. Ayrıca bu etiketler, içeriğinizin Google sonuçlarında özel özetler (Rich Snippets) olarak çıkma ihtimalini artırır.
Erişilebilirlik (Accessibility) Etkisi: Görme engelli kullanıcılar internette gezinmek için “ekran okuyucu” (screen reader) yazılımları kullanırlar. Bu yazılımlar HTML etiketlerini referans alarak sayfayı kullanıcıya sesli olarak okur. Eğer sitenizi sadece <div> etiketleriyle kurgularsanız, ekran okuyucu nerenin menü, nerenin alt bilgi (footer) olduğunu anlayamaz ve her şeyi tek bir uzun metin bloğu gibi okumaya çalışır, bu da korkunç bir kullanıcı deneyimi yaratır. Ancak semantik HTML kullandığınızda; ekran okuyucu <nav> etiketine geldiğinde kullanıcıya “Navigasyon menüsü başlıyor” der ve dilerse kullanıcının menüyü atlayıp doğrudan <main> (ana içerik) alanına sıçramasına olanak tanır.
Sonuç olarak: Başarılı, özgün ve faydalı bir web sitesi üretmenin ilk şartı, temel HTML sayfa hiyerarşisini doğru kurmaktan geçer. Doğru yapılandırılmış, <!DOCTYPE html> ile başlayan, <head> içinde doğru başlık ve karakter setini barındıran, <body> içinde ise içeriği <div> çorbasına çevirmek yerine modern semantik <header>, <main>, <article> ve <footer> etiketleriyle bölen bir web sayfası; sadece kullanıcılara değil, arama motorlarına ve tüm engelli bireylere de kusursuz bir deneyim sunar. Kendi projelerinizi geliştirirken bu standart iskelet yapısını her zaman merkeze alarak işe başlamalısınız.
