Semantik HTML, içeriğin ne olduğunu anlamıyla belirten etiketler kullanmak demektir. Her şeyi <div> ile sarmak yerine <header>, <nav>, <main> gibi etiketler kullanırsın. Bu, hem SEO hem de erişilebilirlik (ekran okuyucular) için önemlidir.

Temel semantik etiketler

  • <header> — sayfa veya bölüm başlığı (logo, üst menü)
  • <nav> — gezinme (menü) bağlantıları
  • <main> — sayfanın ana içeriği (sayfada bir kez)
  • <section> — mantıksal bölüm
  • <article> — kendi başına anlamlı içerik (blog yazısı, haber)
  • <footer> — alt bilgi (telif, iletişim)

Örnek iskelet

<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <article>...</article>
  </main>
  <footer>...</footer>
</body>

Neden önemli?

Google gibi arama motorları semantik etiketlerle sayfanın yapısını daha iyi anlar; ekran okuyucular görme engelli kullanıcıların sayfada gezinmesini kolaylaştırır. Görünüm aynı kalsa da div yerine doğru etiketi seçmek daha kaliteli bir sayfa demektir.