Özet - Magazin sayfası
Tüm landmark'larla bir magazin ana sayfası iskeleti kurarsın.
Magazin sayfası planı
Bir magazin ana sayfası, ziyaretçiye üç şeyi hızlıca gösterir: kim olduğunu (logo), bu hafta ne var (öne çıkan yazılar) ve nereye gidebilir (menü). Bu yüzden iskelet dört landmark'tan kurulur: <header>, <main>, <aside>, <footer>.
Üstte header logo ve menüyü taşır. Ortada main öne çıkan yazıları, yanında aside tamamlayıcı içerikleri (çok satanlar, ilgili bağlantılar) taşır. Altta footer telif yazısı ve iletişim yerleşir. Böylece hem insan hem makine sayfayı tek bakışta anlar.
Uygulama Magazin sayfası iskeletini kur
Body içine bir magazin iskeleti kur. Sırayla şunları ekle:
- Bir
<header>; içinde<h1>(metni Peynir Dergisi) ve bir<nav>içinde<ul>ile en az iki<li>ve her birinin içinde<a>(metni dolu) - Bir
<main>; içinde bir<article>ve onun içinde bir<h2>(metni Bu hafta) - Bir
<aside>; içinde bir<h2>(metni Çok satanlar) ve bir<ol>ile en az iki<li> - Bir
<footer>; içinde bir<address>ve onun içinde<a href="mailto:info@dergi.com">Bize yazın</a>
Örnek çözümü göster
<body>
<header>
<h1>Peynir Dergisi</h1>
<nav>
<ul>
<li><a href="/yazilar">Yazılar</a></li>
<li><a href="/arsiv">Arşiv</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Bu hafta</h2>
</article>
</main>
<aside>
<h2>Çok satanlar</h2>
<ol>
<li>Ezine peyniri</li>
<li>Tulum peyniri</li>
</ol>
</aside>
<footer>
<address>
<a href="mailto:info@dergi.com">Bize yazın</a>
</address>
</footer>
</body>Anlamsal düzen özeti
Bu grupta anlamsal düzenin temel landmark'larını öğrendin. <header> kimliği, <main> asıl içeriği, <aside> yan içeriği, <footer> alt kısmı taşır. <article> bağımsız yazıyı, <section> tema bölümünü işaretler.
Anlamsal etiketler yalnızca görüntü için değil, anlam içindir. Doğru etiketi seçmek sayfanın erişilebilirliğini ve arama motoru sıralamasını birlikte yükseltir. Sonraki grupta bu yapıyı erişilebilirlik tarafında daha da güçlendireceğiz.
Kendini test et
-
Bir magazin ana sayfasında <main> en çok neyi taşır?
- Site logosu
- Reklam bandı
- Öne çıkan yazılar
- Telif yazısı
Cevabı göster
Öne çıkan yazılar — Doğru. main asıl içeriği taşır; magazin sayfasında bu öne çıkan yazılardır.
-
Landmark'ları eşleştir
- header
- Üst kısım
- main
- Ana içerik
- aside
- Yan içerik
- footer
- Alt kısım
-
Magazin telif yazısını tamamla
<footer> <small>© 2026 ____</small> </footer>Cevabı göster
<footer> <small>© 2026 Peynir Dergisi</small> </footer>