Sidebar ve aside
<aside> ile yan içerik bölümleri oluşturursun.
aside ve yan içerik
<aside> etiketi ana içerikle ilgili ama onun parçası olmayan yan içeriki işaretler. İlgili bağlantılar, 'çok satanlar' listesi, reklam kutusu ya da yazar hakkında kısa bir kart buraya konur.
Bir <aside> kaldırıldığında sayfanın asıl anlattığı değişmez; bu yüzden 'tamamlayıcı' içerik denir. Genellikle <main>'in yanında ya da içinde yer alır; magazin ve blog sayfalarında 'kenar çubuğu' (sidebar) olarak görünür.
aside içine ne konur
Bir <aside> içine genellikle bir başlık ve bir liste konur. Örneğin 'Çok satanlar' başlığı altında bir <ol> ve her madde bir <li> olabilir. Yazar hakkında kısa bilgi için bir <p> de uygundur.
Yan içerikte reklam varsa, onu da <aside> içine alabilirsin. Önemli olan, içeriğin ana yazıyla ilgili ama onun parçası olmamasıdır. Bir sayfada birden çok <aside> olabilir.
Uygulama main ve aside yan yana
Body içine bir <main> ve bir <aside> ekle. Main içine bir <article> koy; article içine bir <h2> (metni Bu hafta) ekle. Aside içine bir <h2> (metni Çok satanlar) ve bir <ol> içine en az iki <li> ekle. Tüm başlıklar ve maddeler dolu olsun.
Örnek çözümü göster
<body>
<main>
<article>
<h2>Bu hafta</h2>
</article>
</main>
<aside>
<h2>Çok satanlar</h2>
<ol>
<li>Ezine peyniri</li>
<li>Tulum peyniri</li>
</ol>
</aside>
</body>aside kullanımında dikkat
İki noktaya dikkat. Birincisi, <aside> yalnızca görsel 'kenar çubuğu' için değildir; içeriğin niteliğine bakar. Ana yazıyla ilgili ama parçası olmayan her şey aside olabilir. İkincisi, bir <article> içinde de <aside> kullanılabilir; örneğin yazı içindeki bir 'bilgi kutusu' buna uyar.
Yani <aside> konumla değil, anlamla ilgili bir etikettir. Konumu CSS ile değişebilir; HTML tarafında yalnızca 'tamamlayıcı içerik' anlamını taşır.
Kendini test et
-
Bir magazin sayfasında <aside> en çok ne için kullanılır?
- Çok satanlar listesi
- Ana yazı
- Site logosu
- Telif yazısı
Cevabı göster
Çok satanlar listesi — Doğru. Çok satanlar listesi tamamlayıcı yan içeriktir, aside içine uyar.
-
aside kapanışını tamamla
<aside> <h2>Çok satanlar</h2> <ol> <li>Ezine peyniri</li> <li>Tulum peyniri</li> </ol> </____>Cevabı göster
<aside> <h2>Çok satanlar</h2> <ol> <li>Ezine peyniri</li> <li>Tulum peyniri</li> </ol> </aside> -
Yan içerik etiketlerini eşleştir
- aside
- Yan içerik
- main
- Ana içerik
- ol
- Numaralı liste
- footer
- Alt kısım