Kodkitabi

Semantik Bölümleme

Header, nav, main, aside, footer ve article etiketleri ile yapı oluşturma.

HTML5, içeriği mantıksal bölümlere ayırarak SEO ve erişilebilirliği artırır.

  • <header>: Sayfanın üst kısmı, logo ve navigasyon.
  • <nav>: Navigasyon menüsü.
  • <main>: Ana içerik.
  • <article>: Bağımsız içerik bloğu.
  • <section>: İçerik bölümü.
  • <aside>: Yan bilgi, reklam vb.
  • <footer>: Alt bilgi, telif vb.
Semantik HTML Şablonu 
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Semantik Sayfa</title>
</head>
<body>
  <header>
    <h1>Site Başlığı</h1>
    <nav>
      <ul>
        <li><a href="#">Ana Sayfa</a></li>
        <li><a href="#">Hakkımızda</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Makale Başlığı</h2>
      <p>İçerik...</p>
    </article>
    <section>
      <h2>İkinci Bölüm</h2>
      <p>Detaylar...</p>
    </section>
  </main>
  <aside>
    <p>Yan bilgi</p>
  </aside>
  <footer>
    <p>© 2026 Şirket</p>
  </footer>
</body>
</html>