HTML SEMANTIC YAPI KULLANMAK
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.
1. 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 etiketlerin anlamı
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
2. 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>3. 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>4. 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.
5. 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
6. 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
7. 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.
8. 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.
9. 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ı
10. 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.
11. 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
12. İ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.
13. Ö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.
Sıkça Sorulan Sorular
Semantic HTML SEO'ya doğrudan etkisi var mı?
Doğrudan sıralama faktörü değil ama dolaylı etkisi büyük. Google sayfanın hangi bölümünün ana içerik olduğunu semantic etiketlerden anlar. Doğru başlık hiyerarşisi (h1 main içinde, h2 section içinde) içerik anlamını netleştirir. Schema markup için doğal zemin oluşturur. Sayfa kalitesi, kullanıcı deneyimi ve erişilebilirlik gibi dolaylı faktörler üzerinden SEO'ya pozitif etki yapar.
Article ve section arasındaki farkı nasıl anlarım?
Soru: 'Bu içeriği sayfa dışına çıkarsam (RSS feed, başka site) hâlâ anlamlı mı?' Cevap evetse article. Cevap hayırsa section. Blog yazısı article (RSS'te yayınlanır), 'Misyonumuz' bölümü section (sayfanın bağlamı olmadan anlamsız). Bir kullanıcı yorumu article (her yorum bağımsız bir birim), 'Teknik özellikler' bölümü section.
Tek bir sayfada birden fazla main olabilir mi?
Hayır. Main her sayfada tek olmalı; bu kuralın istisnası yok. Birden fazla main HTML standartlarına aykırı ve arama motoru/ekran okuyucu için kafa karıştırıcı. Eğer aynı sayfada birden fazla 'ana içerik' alanı gerekiyorsa, hepsini tek main içinde section'lara böl.
Nav'ı footer'da da kullanmalı mıyım?
Evet, eğer footer'da önemli gezinme bağlantıları varsa. Footer içindeki yasal bağlantılar (Gizlilik, KVKK), sosyal medya bağlantıları ve site haritası nav etiketinde olabilir. Aynı sayfada birden fazla nav varsa aria-label ile ayırt edilir: aria-label='Ana menü', aria-label='Footer menü'. Ekran okuyucu kullanıcısı bu sayede ayırt edebilir.
div ve span hâlâ kullanılıyor mu?
Evet, mutlaka. Semantic etiketler içerik için; div ve span görsel düzen için. Bir grid layout için 'container', 'row', 'col' gibi kapsayıcılar div olur. Bir kelimeyi CSS ile renkli yapmak için span kullanılır. Semantic etiketler div'in yerini almaz, üzerine eklenir. Modern HTML sayfalarında her ikisi bir arada bulunur.
Aria-label ne zaman gerekli?
Bir bölgenin amacı sadece semantic etiketle netleşmiyorsa aria-label eklenir. Örneğin aynı sayfada iki nav varsa hangisi ne işe yarıyor anlaşılmaz; aria-label='Ana menü' ve aria-label='Footer menü' ayırt eder. Tek nav varsa aria-label gereksizdir. Genel kural: native semantic etiket yeterliyse ARIA kullanma; eksiklikleri tamamlamak için kullan.
Semantic HTML yazmak ne kadar zor?
Mantığı öğrenmek 1-2 saat; alışkanlık haline getirmek 2-3 hafta sürer. Yedi temel semantic etiket var (header, nav, main, article, section, aside, footer); bunların ne zaman kullanılacağını bildikten sonra her sayfada doğal akış kurulur. Karar verirken takıldığında soru sor: 'Bu bölüm ne yapıyor?' Cevap içeriğin amacını verirse semantic etiket seç; sadece görsel düzen amacı varsa div yeterlidir.
