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