HTML SEMANTIC YAPI KULLANMAK
2010'a kadar web siteleri "div hapsi"nde yaşadı. Her sayfa onlarca iç içe div ile yazılır; içerik ne anlam taşıdığını sadece CSS sınıf adlarından (örneğin "header-section", "menu-area") anlaşılırdı. Tarayıcı, arama motoru ve ekran okuyucu için bu div'lerin hiçbir özel anlamı yoktu; sadece gri kutu görüyorlardı.
HTML5 ile birlikte semantic etiketler (header, nav, main, article, section, footer, aside) gelince bu sorun çözüldü. Artık bir başlık alanı "header", bir gezinme menüsü "nav", ana içerik "main" olarak işaretleniyor. Tarayıcı, arama motoru ve ekran okuyucu sayfanın bölümlerini gerçekten anlıyor.
header, nav, main, article, aside, footer — her semantic etiketin tek bir doğru görevi vardır ve div'den farkı görünüşte değil anlamdadır: tarayıcıya, ekran okuyucuya ve arama motoruna sayfanın haritasını verir. Modern sayfa yapılandırması bu haritayı doğru çizme işidir.
Semantic ve non-semantic etiketler farkı
Non-semantic etiketler içeriğin ne olduğunu söylemez. div ve span en yaygın örnekleridir. Sadece "burada bir grup var" der; ne tür grup olduğu yorumlanmadığı için.
Semantic etiketler içeriğin amacını ifade eder. <header> "burası başlık alanı" der; <nav> "burası gezinme menüsü" der. Her semantic elementin hangi bağlamda kullanılacağını MDN web dokümantasyonu örneklerle açıklar. Bu anlam üç fayda sağlar:
- SEO: Arama motoru sayfanın bölümlerini daha doğru yorumlar; içerik ile tasarım öğeleri ayrışır
- Erişilebilirlik: Ekran okuyucu kullanan görme engelli kullanıcılar sayfa yapısını anlar; bölümler arası gezinmek kolay olur
- Bakım: Kod okumak daha kolay; div hapsindeki onlarca iç içe yapıdan kurtulur
Temel semantic etiketler
<header>
Sayfanın veya bir bölümün üst alanı. Logo, ana navigasyon, kullanıcı menüsü genelde header içinde. Bir sayfada birden fazla header olabilir (sayfa için bir tane, her article için ayrı).
<header>
<img src="logo.svg" alt="Marka logosu">
<nav>...</nav>
</header><nav>
Birincil gezinme bağlantıları. Sadece "önemli" gezinme için; her bağlantı listesi nav değildir. Footer'daki yasal bağlantılar genelde nav içinde değil. Bir sayfada genelde 1-2 nav vardır (ana menü ve breadcrumb).
<nav aria-label="Ana menü">
<ul>
<li><a href="/">Anasayfa</a></li>
<li><a href="/hakkimizda">Hakkımızda</a></li>
<li><a href="/iletisim">İletişim</a></li>
</ul>
</nav><main>
Sayfanın ana içerik alanı. Her sayfada tek bir main olabilir. Sidebar veya footer main içinde değil; main sadece o sayfanın asıl konusunu temsil eder.
<body>
<header>...</header>
<main>
<h1>Sayfa başlığı</h1>
<p>Ana içerik...</p>
</main>
<footer>...</footer>
</body><article>
Bağımsız olarak anlamlı, yeniden dağıtılabilir içerik birimi. Blog yazısı, haber maddesi, ürün kartı, kullanıcı yorumu article olabilir. "Bu içeriği sayfa dışına çıkartıp ayrı bir RSS feed'de gösterebilir miyim?" sorusunun cevabı evetse, article kullanın.
<article>
<header>
<h2>Blog yazısının başlığı</h2>
<p>Yazar: ...</p>
</header>
<p>Yazı içeriği...</p>
<footer>
<p>Etiketler: ...</p>
</footer>
</article><section>
Tematik bir bölüm; başlığı olan bağımsız bir alt konu. Article'dan farkı bağımsız değil olmasıdır; section sadece sayfanın bir parçası olarak anlamlıdır.
<main>
<h1>Hizmetlerimiz</h1>
<section>
<h2>Web Tasarım</h2>
<p>...</p>
</section>
<section>
<h2>SEO Hizmetleri</h2>
<p>...</p>
</section>
</main><aside>
Ana içerikle dolaylı ilişkili yan içerik. Sidebar, reklam alanı, ilgili yazılar, yazar bilgi kutusu aside olabilir. Ana içerikten çıkarılırsa anlam kaybedilmeyen şeyler.
<main>
<article>
<h1>Ana yazı</h1>
<p>...</p>
</article>
</main>
<aside>
<h3>İlgili Yazılar</h3>
<ul>...</ul>
</aside><footer>
Sayfanın veya bir bölümün alt alanı. Telif, yasal bağlantılar, sosyal medya, iletişim bilgileri. Header gibi birden fazla footer olabilir (sayfa için bir tane, her article için kendi footer'ı).
<footer>
<p>© 2026 Marka Adı. Tüm hakları saklıdır.</p>
<nav aria-label="Yasal bağlantılar">
<a href="/gizlilik">Gizlilik</a>
<a href="/kvkk">KVKK</a>
</nav>
</footer>Diğer önemli semantic etiketler
<figure> ve <figcaption>
Görsel + açıklama metni grubu. Görseli içerikten çıkarılabilir bir birim olarak işaretler.
<figure>
<img src="grafik.webp" alt="Aylık satış grafiği">
<figcaption>Şekil 1: 2026 yılı aylık satış grafiği</figcaption>
</figure><time>
Bir tarih veya zaman bilgisini makine tarafından okunabilir hale getirir.
<time datetime="2026-05-12">12 Mayıs 2026</time><mark>
İçerikte vurgulanmış, arama sonucu gibi öne çıkarılmış metin.
<p>Aradığınız <mark>semantic HTML</mark> hakkında bilgi.</p><address>
İletişim bilgileri (yazar veya kuruluş).
<address>
Marka Adı, Maslak Caddesi 123, Sarıyer/İstanbul<br>
Telefon: 0212 000 0000
</address><details> ve <summary>
Tıklanarak açılan SSS kutusu yapısı. JavaScript gerekmez; native HTML davranış.
<details>
<summary>Soru: Kargo süresi ne kadar?</summary>
<p>Cevap: Ortalama 2-3 iş günü.</p>
</details>Sayfa iskeleti örneği
Tipik bir blog sayfası tüm semantic etiketler kullanılarak şöyle yapılır:
<body>
<header>
<img src="logo.svg" alt="Marka">
<nav aria-label="Ana menü">
<ul>
<li><a href="/">Anasayfa</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Blog yazısı başlığı</h1>
<p>Yazar:
<time datetime="2026-05-12">12 Mayıs 2026</time>
</p>
</header>
<section>
<h2>Birinci bölüm</h2>
<p>...</p>
</section>
<section>
<h2>İkinci bölüm</h2>
<p>...</p>
</section>
<footer>
<p>Etiketler: HTML, Semantic</p>
</footer>
</article>
<aside>
<h3>İlgili Yazılar</h3>
<ul>...</ul>
</aside>
</main>
<footer>
<p>© 2026 Marka</p>
</footer>
</body>Bu yapı tarayıcı, arama motoru ve ekran okuyucu için net bir hiyerarşi sunar.
Article ve section ne zaman hangisi?
Bu en sık karıştırılan ikilidir. Karar mantığı:
- Bağımsız anlamlı içerik mi? Evet → article (sayfa dışına çıkarılsa hâlâ anlamlı)
- Sayfanın bir alt bölümü mü? Evet → section (kendi başına bağlam yetersiz)
Örnekler:
- Blog yazısı → article (RSS feed'de tek başına anlamlı)
- Hakkımızda sayfasında "Misyonumuz" başlığı → section (sayfa dışında anlamsız)
- Kullanıcı yorumu → article (her yorum kendi başına bir birim)
- Ürün detay sayfasında "Teknik özellikler" alanı → section
- Forum tartışmasında bir mesaj → article
SEO için faydaları
Semantic HTML doğrudan sıralama faktörü değildir ama dolaylı katkı çok büyüktür:
- Google sayfanın hangi bölümünün ana içerik (main) olduğunu net görür
- Article etiketleri içerik bölümlerini ayırt eder; "Schema BlogPosting" için doğal zemin
- Doğru başlık hiyerarşisi (h1 main içinde, h2 section içinde) içerik anlamını netleştirir
- Featured snippet için uygun yapı oluşturur
Erişilebilirlik için faydaları
Görme engelli kullanıcılar NVDA, JAWS gibi ekran okuyucularla sayfayı dinler. Semantic HTML olmadan sayfa bir "büyük metin denizi" gibi okunur. Semantic etiketler ile:
- Kullanıcı "Tab" tuşu ile sadece etkileşim alanları arasında gezebilir
- "H" tuşu ile başlıklar arasında atlayabilir
- "R" tuşu ile region (header, main, footer) arasında gezebilir
- Skip-to-main link ile menüyü atlayıp doğrudan içeriğe ulaşabilir
Bu erişilebilirlik aynı zamanda bir yasal zorunluluk; AB ve ABD'de e-ticaret siteleri için WCAG 2.1 AA uyumu gerekiyor.
div yerine ne zaman semantic kullanmalı?
Genel kural: anlam taşıyan bölümler için semantic; sadece görsel düzen için div.
- Mantıksal bir alana karşılık geliyor → semantic etiket kullan
- Sadece CSS hizalama için bir kapsayıcı gerekiyor → div yeterli
Örnek: bir grid layout için "row" ve "col" kapsayıcıları div olabilir; ama içindeki gerçek içerik bölümleri section veya article olur.
Yaygın Hatalar
- Her şeyi section yapmak. Section sadece "başlığı olan tematik bölüm"; sadece görsel kapsayıcı için kullanılmaz
- Birden fazla main kullanmak. Bir sayfada tek main olabilir
- Nav'ı her bağlantı listesi için kullanmak. Sadece önemli gezinme için nav
- Article'ı sayfa içinde sadece tek bir alana hapsetmek. Blog yazısının kendisi article; içindeki bölümler section
- Header'ı sayfa üst alanına özel sanmak. Article'ın da kendi header'ı olabilir
- Yanlış başlık hiyerarşisi. Section içinde h2'den önce h3 koymak SEO için zararlı
WAI-ARIA ile birlikte kullanım
Bazı durumlarda semantic etiket yetmez; ARIA (Accessible Rich Internet Applications) etiketleri eklenebilir.
<nav aria-label="Ana menü">...</nav>
<nav aria-label="Footer">...</nav>Aynı sayfada iki nav varsa aria-label ile ayırt edilir; ekran okuyucu "Ana menü" ve "Footer" diye okur. Önemli kural: native semantic etiket varsa ARIA yerine onu kullanın; ARIA semantic eksik kaldığında devreye girer.
Test ve denetim
Semantic yapınızın doğru olup olmadığını test etmek için:
- HTML5 Outliner browser extension: Sayfanın başlık hiyerarşisini görsel olarak gösterir
- WAVE (WebAIM): Erişilebilirlik denetim aracı; semantic eksiklikleri yakalar
- Lighthouse (Chrome DevTools): Accessibility skoru semantic yapıdan etkilenir
- NVDA veya JAWS ekran okuyucu: Gerçek kullanıcı deneyimi simülasyonu
İlerleme Yolu
Semantic HTML modern web geliştirmenin temel becerilerinden. Sistemli bir başlangıç için HTML eğitimi programları temel etiketlerden semantic yapıya kadar uygulamalı pratik sağlar.
Özün Toparlanması
HTML semantic yapı; header, nav, main, article, section, aside, footer ve diğer anlam taşıyan etiketlerle sayfanın iskeletini hem makineler (tarayıcı, arama motoru) hem de insanlar (görme engelli kullanıcılar, kod okuyan geliştiriciler) için anlaşılır yapar. Doğrudan sıralama faktörü olmasa da SEO için dolaylı güçlü etkisi vardır; doğru schema markup'a zemin hazırlar. Erişilebilirlik için ise yasal ve etik zorunluluktur. Sadece görsel düzen için div, anlam taşıyan bölümler için semantic etiket kuralı uygulandığında kod hem temiz hem güçlü olur.
