HTML5 & Semantik Yapı

HTML5 Semantik Yapı Nedir?

HTML5 ile birlikte gelen semantik (anlamsal) etiketler, bir web sayfasının sadece görünüşünü değil, içeriğinin ne anlama geldiğini hem tarayıcılara hem de arama motorlarına (SEO) net bir şekilde açıklayan yapı taşlarıdır.

Eski web tasarımında her şey için anlam ifade etmeyen <div> etiketleri kullanılırken (<div class="header"> gibi), HTML5 ile birlikte her bölümün kendine ait özel ve anlamlı bir ismi olmuştur.

Neden Semantik HTML Kullanmalıyız?

• Arama Motoru Optimisayonu (SEO): Google botları sitenizi tararken ana içeriğin, menünün veya telif hakkı yazısının nerede olduğunu semantik etiketler sayesinde anlar ve sitenizi daha doğru indeksler.
• Erişebilirliği Artırır: Görme engelli bireylerin kullandığı ekran okuyucu cihazlar, semantik etiketleri takip ederek kullanıcıya sayfayı çok daha rahat seslendirir.
• Okunabilir Kod Yapısı: Kod tabanınız karmaşadan uzaklaşır. Başka bir yazılımcı kodunuza baktığında hangi bölümün ne işe yaradığını ilk bakışta anlar.

En Çok Kullanılan HTML5 Semantik Etiketleri ve Görevleri

• <header>: Sayfanın veya belirli bir içerik bölümünün giriş kısmıdır. Genellikle logo, site adı ve ana menüyü barındırır.
• <nav>: Sitenin ana navigasyon (menü) bağlantılarının yer aldığı bölümdür.
• <main>: Sayfanın ana ve benzersiz içeriğini kapsar. Bir sayfada sadece bir adet bulunmalıdır.
• <section>: Sayfa içindeki birbiriyle ilişkili içeriklerin toplandığı genel tematik bölümlerdir (Örn: "Hakkımızda" veya "Hizmetlerimiz" bölümü).
• <article>: Sayfadan bağımsız olarak tek başına bir anlam ifade eden, başka yerlerde de paylaşılabilen içeriklerdir (Örn: Blog yazıları, haberler, forum mesajları).
• <aside>: Ana içerikle dolaylı yoldan ilişkili olan yan panel (sidebar) içeriğidir (Örn: Popüler yazılar listesi, reklam alanları).
• <footer>: Sayfanın veya bir bölümün en alt kısmıdır. Telif hakkı bilgileri, iletişim linkleri ve gizlilik politikası gibi metinleri içerir.

Semantik Yapı Görsel Taslağı

Bir web sayfasının ideal HTML5 semantik mimarisi şematik olarak şu şekilde katmanlara ayrılır:

┌────────────────────────────────────────────────────────┐
│                        <header>                        │
│  ┌──────────────────────────────────────────────────┐  │
│  │                        <nav>                     │  │
│  └──────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────┘
┌───────────────────────────────────────┐┌───────────────┐
│                 <main>                ││               │
│  ┌─────────────────────────────────┐  ││               │
│  │            <section>            │  ││               │
│  │  ┌───────────────────────────┐  │  ││    <aside>    │
│  │  │         <article>         │  │  ││               │
│  │  └───────────────────────────┘  │  ││               │
│  └─────────────────────────────────┘  ││               │
└───────────────────────────────────────┘└───────────────┘
┌────────────────────────────────────────────────────────┐
│                        <footer>                        │
└────────────────────────────────────────────────────────┘

Yanlış ve Doğru Kullanım Karşılaştırması

Aşağıdaki iki kod bloğu tarayıcıda görsel olarak tamamen aynı sonucu verebilir; ancak arama motorları ve tarayıcılar için aralarında çok büyük bir fark vardır:

❌ Eski / Yanlış Yöntem (Semantik Olmayan)

<div id="header">
    <div id="logo">Yazılım Akademisi</div>
    <div id="menu">
        <a href="#">Anasayfa</a> | <a href="#">Dersler</a>
    </div>
</div>

<div id="main-content">
    <div class="post">
        <h1>HTML5 Nedir?</h1>
        <p>HTML5, web sitelerinin iskeletini oluşturan son standarttır...</p>
    </div>
</div>

<div id="footer">
    <p>© 2026 Tüm Hakları Saklıdır.</p>
</div>

Doğru Yöntem (HTML5 Semantik Yapı)

<header>
    <h1>Yazılım Akademisi</h1>
    <nav>
        <a href="#">Anasayfa</a> | <a href="#">Dersler</a>
    </nav>
</header>

<main>
    <article>
        <h1>HTML5 Nedir?</h1>
        <p>HTML5, web sitelerinin iskeletini oluşturan son standarttır...</p>
    </article>
</main>

<footer>
    <p>© 2026 Tüm Hakları Saklıdır.</p>
</footer>