Anlamsal HTML

Ders 23/45 · 6 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda bir sayfayı anlamlı bölümlere ayırabileceksiniz.

`div` ile yazılmış bir sayfanın sorunu

Aşağıdaki iki kod ekranda aşağı yukarı aynı görünür. Ama ilkine baktığınızda hangi bölümün ne olduğunu ne bir insan ne de bir bilgisayar anlayabilir.

<div>
  <div>Sitenin adı</div>
  <div>Menü</div>
</div>
<div>Ana içerik</div>
<div>Telif yazısı</div>

<header>
  <p>Sitenin adı</p>
  <nav>Menü</nav>
</header>
<main>Ana içerik</main>
<footer>Telif yazısı</footer>

Anlamsal etiketler

header Sayfanın veya bir bölümün üst kısmı: logo, başlık, menü.
nav Ana gezinme bağlantıları.
main Sayfanın asıl içeriği. Sayfada yalnızca bir tane olur.
section Bir konuyu kapsayan bölüm. Genellikle kendi başlığı olur.
article Tek başına anlamlı içerik: blog yazısı, haber, yorum.
aside Ana içerikle ilgili yan bilgi.
footer Sayfanın veya bir bölümün alt kısmı: telif, iletişim.

Tam bir örnek

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Okul Gazetesi</title>
</head>
<body>
  <header>
    <h1>Okul Gazetesi</h1>
    <nav>
      <ul>
        <li><a href="#haberler">Haberler</a></li>
        <li><a href="#duyurular">Duyurular</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="haberler">
      <h2>Haberler</h2>
      <article>
        <h3>Kütüphane yenilendi</h3>
        <p><time datetime="2026-09-15">15 Eylül 2026</time> tarihinde açıldı.</p>
      </article>
    </section>

    <section id="duyurular">
      <h2>Duyurular</h2>
      <p>Kulüp kayıtları başladı.</p>
    </section>

    <aside>
      <h2>Biliyor muydunuz?</h2>
      <p>Okulumuz 1950 yılında kuruldu.</p>
    </aside>
  </main>

  <footer>
    <address>iletisim@ornek.com</address>
    <p><small>&copy; 2026 Okul Gazetesi</small></p>
  </footer>
</body>
</html>

Örnekte iki küçük etiket daha var:

time Bir tarihi veya saati işaretler. datetime niteliği tarihi bilgisayarın okuyacağı biçimde tutar.
address İletişim bilgilerini işaretler.

Bu etiketler ne işe yarar?

Görünümü değiştirmezler ama sayfanın anlamını belirtirler:

Ekran okuyucular “ana içeriğe atla” veya “menüye atla” seçeneklerini bu etiketlerden oluşturur.
Arama motorları sayfanın hangi kısmının önemli olduğunu daha iyi anlar.
Kodunuzu okuyan kişi, bölümleri kolayca ayırt eder.

section mı article mı?

Şunu sorun: “Bu içerik tek başına başka bir sitede yayınlansa anlamlı olur mu?” Evetse article, sayfanın yalnızca bir bölümüyse section kullanın. Yalnızca CSS uygulamak için kutu gerekiyorsa div kullanın.

Sık yapılan hatalar

Birden fazla main yazmak. Sayfada görünür tek bir main olmalıdır.

section etiketini basit kutu olarak kullanmak. Başlığı olmayan, yalnızca gruplama yapan kutular için div kullanın.

Bütün bağlantıları nav içine almak. nav, ana gezinme bölümleri içindir.

Soru 1

Bir haber sitesindeki tek bir haber yazısı için en uygun etiket hangisidir?

article :: Doğru. Haber tek başına anlamlıdır.
aside :: aside yan bilgi içindir.
nav :: nav gezinme bağlantıları içindir.

Soru 2

Sayfanın telif yazısı genellikle nereye yazılır?

header :: header üst kısımdır.
main :: main asıl içeriktir.
footer :: Doğru.

Div’lerden kurtulun

Aşağıdaki sayfayı anlamsal etiketlerle yeniden yazın: En dıştaki üst bölüm header, ana içerik main, alt bölüm footer olsun. Metinleri aynen kullanın: Başlık Benim Sitem, paragraf Hoş geldiniz., alt yazı Hapkod.

<header>
  <h1>Benim Sitem</h1>
</header>
<main>
  <p>Hoş geldiniz.</p>
</main>
<footer>
  <p>Hapkod</p>
</footer>

Bu derste öğrendikleriniz

header, nav, main, section, article, aside ve footer sayfanın bölümlerini anlatır.
Bu etiketler görünümü değil, anlamı belirler.
div yalnızca uygun bir anlamlı etiket yoksa kullanılır.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.