HTML5 Semantik Etiketler

Web sayfaları oluştururken kullanılan işaretleme dili HTML, yıllar içinde görsel biçimlendirmeden anlam odaklı bir yapıya doğru evrilmiştir. Eski web standartlarında sayfadaki her alan jenerik kutular olan div etiketleri ve bunlara atanan sınıflarla inşa edilirdi. HTML5 ile hayatımıza giren semantik yapı, sayfa elemanlarının yalnızca görünüşünü değil, aynı zamanda taşıdıkları anlamı ve görevi de açıkça tanımlar. Bu rehberde, modern web geliştirmenin temel taşlarından biri olan html5 semantik etiketlerin ne olduğunu, neden kullanılması gerektiğini ve kod içinde nasıl konumlandırılacağını detaylı olarak inceleyeceğiz.

Semantik HTML Nedir ve Neden Önemlidir?

Semantik sözcüğü dilbilimsel olarak anlam bilimi anlamına gelir. HTML bağlamında ise bir etiketin, içeriğin amacını hem tarayıcıya hem de geliştiriciye kendi adıyla ifade etmesidir. Semantik olmayan bir etiket (örneğin div veya span) içine aldığı verinin ne tür bir bilgi olduğu hakkında hiçbir fikir vermez. Buna karşılık semantik bir etiket, içeriğin bir makale, başlık, alt bilgi ya da gezinme menüsü olduğunu doğrudan bildirir.

Semantik yapıyı tercih etmenin başlıca avantajları şunlardır:

• Arama Motoru Optimizasyonu (SEO): Google gibi arama motoru botları, web sayfalarını tararken içerik hiyerarşisini semantik etiketler üzerinden çözer. Ana içeriğin nerede başladığını veya bir makale tarihinin ne olduğunu doğru etiketlerle anlamak sitenin indekslenme kalitesini artırır.
• Erişilebilirlik (A11y): Görme engelli kullanıcıların kullandığı ekran okuyucu cihazlar, sayfayı semantik etiketlere göre seslendirir. Kullanıcı bir gezinme menüsüne ya da ana metne doğrudan atlayabilir.
• Kod Okunabilirliği ve Bakım: Kalabalık div yığınları yerine amaca uygun adlandırılmış etiketler kullanmak, projeye sonradan dahil olan geliştiricilerin veya ekip üyelerinin kod tabanını çok daha hızlı kavramasını sağlar.

Temel HTML5 Semantik Etiketleri

Modern bir web sayfasının omurgasını oluşturan HTML5 semantik etiketleri farklı işlevsel gruplara ayrılır. En yaygın kullanılan yapı taşları aşağıda özetlenmiştir.

Sayfa Düzeni Etiketleri

Sayfanın genel iskeletini kurarken kullanılan başlıca etiketler şunlardır:

• header: Genellikle sayfanın veya bir içerik bloğunun giriş kısmını temsil eder. Site logosu, başlıklar ve bazen arama formları bu alanın içine yerleştirilir.
• nav: Sayfa içindeki veya sayfalar arasındaki ana gezinme bağlantılarını barındırır. Sitedeki her bağlantı listesi nav içine alınmamalı, yalnızca birincil gezinme menüleri bu etikete dahil edilmelidir.
• main: Belgenin merkezinde yer alan, sayfaya özgü birincil içeriği temsil eder. Bir HTML belgesinde yalnızca bir adet görünür main etiketi bulunmalıdır; kenar çubukları ve alt bilgiler bu etiketin dışına yazılır.
• footer: İlgili bölümün veya sayfanın en alt kısmını ifade eder. Telif hakkı bildirimleri, iletişim bağlantıları, site haritası ve gizlilik politikası gibi unsurlar burada tutulur.

İçerik Bölümleme Etiketleri

Sayfa içindeki metinleri ve modülleri mantıksal parçalara ayırmak için şu etiketlerden yararlanılır:

• section: Belge içinde benzer konuları gruplayan genel bir tematik bölümü belirtir. Genellikle kendine ait bir başlık barındırır.
• article: Sayfadan bağımsız olarak tek başına anlam ifade eden, dağıtılabilir veya yeniden kullanılabilir içerikler için kullanılır. Blog yazıları, forum mesajları veya haber bültenleri tipik birer article örneğidir.
• aside: Sayfanın ana konusuyla doğrudan ilgili olmayan ancak ek bağlam sunan ikincil içeriklerdir. Kenar çubukları, ilgili bağlantı listeleri veya reklam blokları bu etikete yerleştirilir.

Medya ve Metin Seviyesi Etiketleri

Görseller ve metin içi özel vurgular için tasarlanan semantik yapılar şunlardır:

• figure ve figcaption: Görseller, diyagramlar veya kod parçalarını açıklayıcı bir başlıkla birlikte paketlemek için kullanılır. figcaption etiketi görselin alt yazısını tanımlar.
• time: Tarih ve saat bilgilerini makinelerin okuyabileceği standart bir formatta sunmak için tercih edilir.

Semantik ve Semantik Olmayan Yapının Karşılaştırması

Aşağıdaki ilk örnek, eski usul sadece div etiketleriyle inşa edilmiş bir sayfa taslağını göstermektedir:

<div class="header">
  <div class="nav">
    <a href="/">Ana Sayfa</a>
    <a href="/hakkimda">Hakkımda</a>
  </div>
</div>
<div class="content">
  <div class="post">
    <h2>Yazı Başlığı</h2>
    <p>Yazı içeriği burada yer alıyor.</p>
  </div>
</div>
<div class="footer">
  <p>Telif Hakkı 2026</p>
</div>

Yukarıdaki kod çalışır durumdadır ancak tarayıcı veya arama motoru için tüm bu bloklar herhangi bir anlam taşımayan düz kutulardan ibarettir.

Şimdi aynı düzeni semantik etiketlerle yeniden inşa edelim:

<header>
  <nav>
    <a href="/">Ana Sayfa</a>
    <a href="/hakkimda">Hakkımda</a>
  </div>
</header>
<main>
  <article>
    <h2>Yazı Başlığı</h2>
    <p>Yazı içeriği burada yer alıyor.</p>
    <figure>
      <img src="ornek.jpg" alt="Örnek görsel açıklaması">
      <figcaption>Görsel 1: İlgili konunun şematik anlatımı</figcaption>
    </figure>
    <p>Yayınlanma zamanı: <time datetime="2026-03-30">30 Mart 2026</time></p>
  </article>
</main>
<footer>
  <p>Telif Hakkı 2026</p>
</footer>

Bu örnekte article etiketi blog yazısını bağımsız bir içerik olarak sarar. figure ve figcaption ikilisi görsel ile metin arasındaki ilişkiyi kurarken, time etiketi datetime özniteliği sayesinde arama motorlarına kesin bir tarih sunar.

Doğru Kullanım İçin İpuçları

Geliştiricilerin semantik etiketleri uygularken sıkça düştüğü bazı hatalar bulunmaktadır. Temiz bir yapı kurmak için şu noktalara dikkat edilmelidir:

• Sırf CSS ile stil vermek adına anlamsız etiket değişimleri yapılmamalıdır. Bir alan yalnızca görsel bir kutu işlevi görüyorsa div kullanımı tamamen meşrudur.
• Bir sayfada birden fazla main etiketi bulunmamalıdır. Ana içerik tek bir merkezde toplanmalıdır.
• section ve article etiketleri birbirinin yerine körü körüne kullanılmamalıdır. İçerik kendi başına başka bir platformda yayınlandığında anlamını koruyorsa article, büyük bir konunun parçasıysa section tercih edilmelidir.
• Her section etiketi içinde hiyerarşik olarak bir başlık (h2, h3 gibi) bulundurmak belge akışını düzenler.

Özet ve Sonraki Adımlar

Semantik HTML, modern web standartlarının temelini oluşturur. Kodunuzu semantik etiketlerle kurguladığınızda projenizin arama motorlarındaki görünürlüğünü artırır, engelli bireyler için erişilebilir bir deneyim sunar ve kaynak kodlarınızın bakımını kolaylaştırırsınız.

Bir sonraki adım olarak oluşturduğunuz bu anlamsal iskeleti CSS Flexbox veya Grid sistemleriyle biçimlendirebilir ve ARIA (Accessible Rich Internet Applications) özniteliklerini inceleyerek erişilebilirlik standartlarınızı daha da ileri taşıyabilirsiniz.