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

Sıradaki ders: Footer yapısı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler