Görselde iki farklı yapı karşılaştırılmaktadır:
🔹 Semantik Olmayan Yapı (Solda)
<div>
<span>
<div>
<div>
<div>
<div>
Bu yapı tamamen <div> ve <span> etiketleri ile oluşturulmuştur.
Ancak bu etiketler anlamsal değildir, yani sayfanın hangi bölümünün ne işe yaradığını açıklamazlar.
🔹 Semantik Yapı (Sağda)
<header>
<nav>
<section>
<article>
<aside>
<footer>
Bu etiketler HTML5 ile gelen anlamsal (semantic) etiketlerdir ve sayfanın yapısını açık şekilde ifade eder.
HTML Semantik Etiketler Nedir?
Semantik HTML etiketleri, bir web sayfasının içeriğinin anlamını tanımlar.
Sadece tasarım değil, içeriğin ne amaçla kullanıldığını belirtir.
Örneğin:
<div>sadece bir kapsayıcıdır.<header>ise sayfanın başlık alanı olduğunu açıkça belirtir.
Bu durum:
- SEO için büyük avantaj sağlar.
- Arama motorlarının sayfayı daha iyi anlamasına yardımcı olur.
- Erişilebilirliği artırır.
- Kod okunabilirliğini geliştirir.
HTML5 Semantik Etiketler ve Açıklamaları
1️⃣ <header>
Sayfanın veya bir bölümün üst kısmını temsil eder.
Genellikle şunları içerir:
- Logo
- Başlık
- Menü
- Arama alanı
Örnek:
<header>
<h1>Site Başlığı</h1>
</header>
2️⃣ <nav>
Navigasyon (menü) alanıdır.
Site içi bağlantıları barındırır.
<nav>
<a href="#">Ana Sayfa</a>
<a href="#">Hakkımızda</a>
</nav>
3️⃣ <section>
Sayfanın belirli bir bölümünü temsil eder.
Mantıksal olarak ayrılmış içerikler için kullanılır.
<section>
<h2>Hizmetlerimiz</h2>
<p>Web tasarım ve yazılım çözümleri.</p>
</section>
4️⃣ <article>
Bağımsız içerik alanıdır.
Blog yazısı, haber, forum gönderisi gibi içerikler için kullanılır.
<article>
<h2>HTML Nedir?</h2>
<p>HTML web sayfalarının temel yapı taşıdır.</p>
</article>
5️⃣ <aside>
Ana içerikten bağımsız ama ilişkili alanlardır.
Genellikle:
- Yan menü
- Reklam alanı
- Önerilen yazılar
<aside>
<h3>Son Yazılar</h3>
</aside>
6️⃣ <footer>
Sayfanın alt kısmını temsil eder.
Genellikle şunları içerir:
- Telif hakkı
- İletişim bilgileri
- Sosyal medya linkleri
<footer>
<p>© 2026 Tüm Hakları Saklıdır.</p>
</footer>
Neden <div> Yerine Semantik Etiket Kullanmalıyız?
| Özellik | <div> | Semantik Etiket |
|---|---|---|
| Anlam taşır mı? | ❌ Hayır | ✅ Evet |
| SEO katkısı | ❌ Düşük | ✅ Yüksek |
| Erişilebilirlik | ❌ Zayıf | ✅ Güçlü |
| Kod okunabilirliği | ❌ Karışık | ✅ Düzenli |
SEO Açısından Avantajları
Semantik HTML:
- Google’ın sayfa yapısını anlamasını kolaylaştırır.
- İçerik önceliğini belirler.
- Featured Snippet alma şansını artırır.
- Daha iyi indeksleme sağlar.
- Erişilebilirlik standartlarını destekler (Screen Reader uyumu).
Profesyonel Web Geliştirme Açısından Önemi
Modern web geliştirmede:
- Temiz kod yazımı önemlidir.
- Anlamlı yapı performansı artırır.
- Bakım ve güncelleme kolaylaşır.
- Kurumsal projelerde standarttır.
React, Vue gibi framework’lerde bile semantic HTML kullanımı önerilmektedir.
Örnek Tam Semantik Sayfa Yapısı
<!DOCTYPE html>
<html>
<head>
<title>Semantik HTML Örneği</title>
</head>
<body>
<header>
<h1>Web Sitem</h1>
</header>
<nav>
<a href="#">Ana Sayfa</a>
<a href="#">Blog</a>
</nav>
<section>
<article>
<h2>Blog Yazısı</h2>
<p>HTML5 ile gelen semantik etiketler...</p>
</article>
</section>
<aside>
<h3>Önerilen İçerikler</h3>
</aside>
<footer>
<p>© 2026</p>
</footer>
</body>
</html>
Sonuç
Görselde anlatılmak istenen temel mesaj şudur:
<div>ile her şeyi yapmak mümkündür, ancak doğru olan semantik etiketleri kullanmaktır.
Semantik HTML:
- Daha temiz kod
- Daha güçlü SEO
- Daha iyi erişilebilirlik
- Daha profesyonel projeler
sunmaktadır.
