Ana içerik

<main> içinde article ve section kullanımını öğrenirsin.

main ve içerik hiyerarşisi

Sayfanın asıl anlattığı içerik <main> içine alınır. Bir sayfada yalnızca bir <main> olur; logo, menü ve alt bilgi buraya değil, header ve footer'a gider. Ekran okuyucu 'ana içeriğe atla' dediğinde buraya gelir.

<main> içine genellikle <article> ve <section> dizilir. İçerik hiyerarşisi denilen bu düzen, büyük bir konuyu küçük parçalara böler; okuyucu sayfayı tararken kaybolmaz.

article ile section farkı

<article> başlı başına duran, bağımsız bir içerik parçasıdır: bir blog yazısı, bir haber, bir yorum. Başka bir sayfaya taşındığında da anlamını korur. İçinde genellikle bir başlık ve gövde metni olur.

<section> ise bir temayı toplayan bölümdür; tek başına anlam taşıması gerekmez. Bir sayfada 'Yorumlar', 'İlgili yazılar' gibi bölümler işaretlemek için uygundur. Her ikisi de içinde bir başlık barındırmalıdır.

Uygulama main içine article ve section diz

Body içine bir <main> ekle. Main içine bir <article> koy; article içine bir <h2> (metni Bu hafta) ve bir <p> (içi dolu) ekle. Main içine ayrıca bir <section> koy; section içine bir <h2> (metni Çok satanlar) ekle. Tüm başlıklar dolu olsun.

Örnek çözümü göster

<body>
  <main>
    <article>
      <h2>Bu hafta</h2>
      <p>Peynir dergisinin bu haftaki sayısı...</p>
    </article>
    <section>
      <h2>Çok satanlar</h2>
    </section>
  </main>
</body>

İçerik hiyerarşisi nasıl kurulur

Sayfayı bölümlere ayırırken şunu sor: 'Bu parça tek başına bir yazı mı, yoksa sayfanın bir parçası mı?' Tek başına anlam taşıyorsa <article>, yalnızca bir temayı toplayıyorsa <section> kullan. İç içe de dizilebilirler: bir <article> içinde <section> olabilir.

Her bölümün kendine ait bir başlığı olmalı; böylece belge anahattı doğru kurulur. Aşağıya indikçe başlık düzeyi de artar: <h2>, sonra <h3>.

Kendini test et

Aşağıdakilerden hangisi <main> içine en uygun içeriktir?
- Site logosu
- Dip not bağlantıları
- Bir haber yazısı
- Reklam bandı
Cevabı göster

Bir haber yazısı — Doğru. Bir haber yazısı sayfanın asıl içeriğidir, main içine uyar.

article başlığını tamamla

<article>
  <____>Peynirin tarihi</h2>
  <p>Peynir binlerce yıldır sofralarımızda...</p>
</article>

Cevabı göster

<article>
  <h2>Peynirin tarihi</h2>
  <p>Peynir binlerce yıldır sofralarımızda...</p>
</article>

İçerik etiketlerini eşleştir

main

Ana içerik
article

Bağımsız yazı
section

Tema bölümü
h2

Alt başlık

Sıradaki ders: Sidebar ve aside

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler