Semantik HTML: Anlamlı ve Erişilebilir Web Sayfaları

HTML, web sayfalarının iskeletini oluşturan işaretleme dilidir. Ancak bir sayfayı sadece görsel olarak doğru görüntülemek yetmez; içeriğin anlamını (semantiğini) de doğru ifade etmek gerekir. Semantik HTML, elemanların görünümünden ziyade anlamına odaklanan bir yaklaşımdır. <div> ve <span> gibi anlamsız kapsayıcılar yerine, içeriğin amacını belirten elemanlar kullanmayı önerir.

Neden Semantik HTML Kullanmalıyız?

• SEO: Arama motorları sayfanın yapısını anlamak için semantik etiketlere başvurur. Doğru yapılandırılmış bir sayfa, arama sonuçlarında daha iyi sıralanır
• Erişilebilirlik: Ekran okuyucular semantik etiketleri kullanarak görme engelli kullanıcılara sayfanın yapısını aktarır
• Bakım kolaylığı: Anlamlı etiketler, kodu okuyan diğer geliştiricilerin sayfanın yapısını hızla kavramasını sağlar
• Standartlara uyum: W3C standartları semantik HTML kullanımını teşvik eder

Temel Semantik Elemanlar

<header>

Sayfanın veya bir bölümün başlık alanını tanımlar. Genellikle logo, site başlığı ve ana navigasyon barını içerir.

<header>
  <h1>SiteScripti</h1>
  <nav>...</nav>
</header>

<nav>

Navigasyon bağlantılarını gruplar. Bir sayfada birden fazla <nav> olabilir (ana menü, alt menü, sayfa içi navigasyon).

<nav aria-label="Ana menü">
  <ul>
    <li><a href="/">Ana Sayfa</a></li>
    <li><a href="/araclar">Araçlar</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

<main>

Sayfanın ana içeriğini belirtir. Her sayfada yalnızca bir tane olmalıdır. Tekrarlanan içerik (başlık, alt bilgi, kenar çubuğu) buranın dışında kalır.

<article>

Bağımsız, kendi başına anlam ifade eden içerik bloğudur. Blog yazıları, haber makaleleri, forum gönderileri veya ürün kartları için kullanılır.

<article>
  <h2>CSS Box Model Rehberi</h2>
  <time datetime="2025-11-25">25 Kasım 2025</time>
  <p>CSS Box Model, web düzeninin temelidir...</p>
</article>

<section>

Tematik olarak gruplanmış içerik bölümüdür. Her section genellikle bir başlık (<h2>-<h6>) içerir.

<aside>

Ana içerikle dolaylı ilişkisi olan yan içeriktir. Kenar çubukları, ilgili bağlantılar, reklam alanları veya ek bilgi kutuları için uygundur.

<footer>

Sayfanın veya bir bölümün alt bilgi alanını tanımlar. Telif hakkı, iletişim bilgileri, sosyal medya bağlantıları ve yasal uyarılar burada yer alır.

Div Çorbası Anti-Kalıbı

"Div çorbası" (div soup), sayfanın neredeyse tamamen <div> elemanlarıyla oluşturulduğu ve semantik etiketlerin hiç kullanılmadığı durumu tanımlar. Bu durum hem makineler hem de geliştiriciler için sorun yaratır:

<!-- Kötü: Div çorbası -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Ana Sayfa</div>
  </div>
</div>
<div class="content">
  <div class="post">
    <div class="title">Başlık</div>
    <div class="text">İçerik...</div>
  </div>
</div>

<!-- İyi: Semantik HTML -->
<header>
  <nav>
    <a href="/">Ana Sayfa</a>
  </nav>
</header>
<main>
  <article>
    <h2>Başlık</h2>
    <p>İçerik...</p>
  </article>
</main>

Ekran Okuyucular ve Semantik HTML

Ekran okuyucular (NVDA, JAWS, VoiceOver) semantik etiketleri kullanarak kullanıcılara sayfanın haritasını sunar. Örneğin:

• <nav> elemanı "navigasyon bölgesi" olarak duyurulur
• <main> elemanına doğrudan atlama yapılabilir
• Başlık hiyerarşisi (h1-h6) sayesinde kullanıcı sayfada hızlıca gezinebilir
• <article> elemanları bağımsız içerik olarak tanınır

Semantik HTML olmadan, ekran okuyucu kullanıcıları sayfanın yapısını anlayamaz ve içerikte kaybolur.

Diğer Önemli Semantik Elemanlar

• <figure> ve <figcaption> — görseller ve alt yazıları
• <time> — tarih ve saat bilgisi
• <mark> — vurgulanmış metin
• <details> ve <summary> — açılır/kapanır içerik
• <address> — iletişim bilgisi
• <blockquote> ve <cite> — alıntılar