Web geliştirme bağlamında semantik nedir?

Web geliştirmede semantik, HTML etiketlerinin anlam amaçlarına uygun olarak kullanılmasıdır ve sadece stil vermek için değil, içeriğin yapısını ve anlamını tanımlamaya yardımcı olur. Bu, web sayfasını tarayıcılar, arama motorları, ekran okuyucular ve diğer analiz araçları için daha anlaşılır hale getirir.

Semantik işaretlemenin temel avantajları:

• Erişilebilirlik: Ekran okuyucu kullanan engelli kişilerle etkileşimi artırır.
• SEO: Arama motorlarının sayfa yapısını ve içeriğini daha iyi anlamasına yardımcı olur, bu da sıralamayı olumlu etkiler.
• Bakım Kolaylığı: Kodu daha okunabilir ve diğer geliştiriciler için anlaşılır kılar.
• Uyumluluk: İçeriğin farklı cihazlar ve tarayıcılarda doğru görüntülenmesini sağlar.

HTML5'te semantik etiketlere örnekler:

• <header>: Belge veya belirli bir bölüm için giriş veya gezinmeyi temsil eder.
• <nav>: Navigasyon bağlantıları grubunu temsil eder.
• <main>: Belgenin ana içeriğini temsil eder.
• <article>: Bağımsız ve tamamlanmış içerik parçasını temsil eder (örneğin, blog girişi, haber).
• <section>: Belgedeki bağımsız içerik bölümünü temsil eder.
• <aside>: Sayfanın ana içeriğiyle dolaylı olarak ilişkili içeriği temsil eder (örneğin, yan panel).
• <footer>: Belge veya belirli bir bölüm için altbilgiyi temsil eder.
• <figure> ve <figcaption>: Medya öğesi (resim, diyagram vb.) ve açıklamasını temsil eder.
• <time>: Tarih ve saati temsil eder.

Semantik ve non-semantik yaklaşım karşılaştırması:

Non-semantik yaklaşım	Semantik yaklaşım
Her şey için <div> ve <span> kullanımı	Özelleşmiş etiketlerin kullanımı (<header>, <nav>, <article>)
Yapıyı sınıflar (class="header") aracılığıyla tanımlama	Yapıyı doğrudan tanımlayan etiketlerin kullanımı
CSS'ye bağımlılık	HTML kodu yapıyı anlamaya yardımcı olur

Non-semantik işaretleme örneği:

<!-- non-semantic.html -->
<div class="header">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Hakkında</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="article">
    <h2>Başlık</h2>
    <p>İçerik...</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023</p>
</div>

Semantik işaretleme örneği:

<!-- semantic.html -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Hakkında</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Başlık</h2>
    <p>İçerik...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023</p>
</footer>

Semantik işaretleme, CSS'nin stil vermesini yerine geçmez, ancak HTML belgesini içerik tüketicileri için daha bilgilendirici ve kullanışlı hale getirir.