HTML aside etiketi nedir?

Mehmet · Dün 20:59 da

HTML aside etiketi nedir?

<aside>, bulunduğu içeriği tamamlayan ancak ana anlatının doğrudan parçası olmayan ikincil içeriği belirtmek için kullanılan anlamsal HTML etiketidir. İlgili yazılar, ayrı bir yazar biyografisi, açıklayıcı yan not veya konuya bağlı tamamlayıcı bir bölüm aside içinde yer alabilir. Etiket tek başına içeriği sağa ya da sola taşımaz; sütun görünümü ve yerleşim CSS ile oluşturulur.

Aside hangi içeriği ifade eder?

Bir içeriğin aside olup olmadığını belirlemek için şu soruyu sorun: “Bu bölüm ana metinden çıkarılırsa ana metin hâlâ anlamlı ve tamamlanmış kalır mı?” Yanıt evetse ve bölüm ana konuyla anlamlı bir ilişki taşıyorsa aside uygun olabilir.

Örneğin bir HTML makalesinin yanında “İlgili HTML etiketleri” bağlantıları, makalenin yazarı veya kısa bir kavram notu bulunabilir. Buna karşılık makalenin başlığı, ana paragrafları ve asıl açıklaması aside değil, ana içeriğin kendisidir.

Article ve nav ile farkı

<article>, sayfadan bağımsız olarak dağıtılabilecek veya yeniden kullanılabilecek bütünlüklü bir içeriği temsil eder. Bir haber, blog yazısı, forum gönderisi veya ürün incelemesi buna örnektir. <nav> ise bir sayfanın ya da sitenin gezinme bağlantılarını gruplayan bölümdür.

<aside> bu iki etiketin yerine geçen genel amaçlı bir kutu değildir. Bu öğeler birbirini dışlamaz. Tamamlayıcı bir aside içinde gezinme amacı taşıyan bir nav veya bağımsız bir article bulunabilir. Her öğeyi kendi içeriğinin görevine göre seçin.

Çalışan en küçük örnek

Aşağıdaki örnekte ana içerik bir article, ona bağlı kısa bilgi ise aside olarak işaretlenmiştir. CSS yalnızca okunabilir bir yerleşim göstermek için eklenmiştir; aside etiketinin anlamsal görevini CSS belirlemez.

HTML:

<main class="layout">
  <article>
    <h1>HTML başlıkları nasıl kullanılır?</h1>
    <p>Başlıklar, belgenin konu hiyerarşisini gösterir.</p>
  </article>

  <aside aria-labelledby="related-title">
    <h2 id="related-title">İlgili etiketler</h2>
    <ul>
      <li>section: konusal bölüm</li>
      <li>article: bağımsız içerik</li>
    </ul>
  </aside>
</main>

<style>
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 1.5rem;
  }
  @media (max-width: 40rem) {
    .layout { grid-template-columns: minmax(0, 1fr); }
  }
</style>

Örneği UTF-8 bir HTML belgesinin gövdesine eklediğinizde ana yazı ve tamamlayıcı bölüm görünür. Dar ekranda medya sorgusu sütunları alt alta getirir; örnekte köşe yuvarlama tanımlanmamıştır. Sağda görünmesi grid-template-columns tanımının sonucudur; aside etiketini kaldırıp aynı CSS sınıfını başka bir öğeye vermek, o öğeyi anlamsal olarak aside yapmaz.

Hangi durumda hangi etiketi seçmeli?

Aşağıdaki ayrım, benzer görünen bölümlerde doğru HTML yapısını seçmeyi kolaylaştırır.

İçerik türü	Uygun öğe	Temel gerekçe
Ana ve bağımsız yazı	`article`	Kendi başına anlamlı bir içeriktir.
Ana yazıya bağlı ek bilgi	`aside`	Ana içeriği tamamlar, fakat ana akışın parçası değildir.
Bölüm veya site gezinme bağlantıları	`nav`	Kullanıcıların bölümler arasında gezinmesine yardım eder.
Yalnız görsel kutulama	`div`	Özel bir anlamsal anlam gerekmiyorsa kapsayıcı görevi görür.

Bu seçim içerik anlamına göre yapılmalıdır. Bir tasarımda sağ sütun bulunması otomatik olarak aside kullanmayı gerektirmez; sağ sütundaki içerik ana metnin tamamlayıcısı değilse başka bir yapısal öğe daha uygun olabilir.

Uygularken dikkat edilecek noktalar

Önce bu yan bölüm çıkarıldığında ana metnin hâlâ bütünlüklü kalıp kalmadığını değerlendirin. Yalnız görsel konuma bakmayın; ayrı ama çevresindeki içerikle dolaylı ilişkili bir bölümse aside uygun olabilir.
İçeriği <aside> içine yerleştirin ve mümkünse ne hakkında olduğunu açıklayan bir başlık ekleyin. Başlık gerekiyorsa aria-labelledby ile bu başlığa bağlamak yapıyı daha açık hale getirir.
Sağ veya sol sütun istiyorsanız bunu CSS grid, flex ya da uygun başka bir yerleşim yöntemiyle tanımlayın. HTML etiketinin konumu ile anlamsal rolünü birbirine karıştırmayın.
Bölüm yalnızca stil amacıyla kullanılıyorsa anlamsal etiket eklemek yerine div ve açıklayıcı bir sınıf kullanmayı değerlendirin.

Sık yapılan hatalar

En yaygın hata, her yan sütunu aside sanmaktır. Yan sütunda ana makalenin zorunlu bir parçası bulunuyorsa bu içerik görsel olarak ayrı dursa bile aside olmayabilir. Tersine, bir aside ana içeriğin altında veya içinde de bulunabilir; sağ tarafta görünmesi şart değildir.

Bir başka hata, gezinme menüsünü yalnızca yan tarafta durduğu için aside ile işaretlemektir. Önemli gezinme bağlantıları için nav uygundur; bu nav aynı zamanda bir aside’ın içinde yer alabilir. Her küçük bağlantı grubunu nav yapmak zorunlu değildir. Son olarak aside etiketini rastgele kutular için kullanmak, belgenin anlamını belirsizleştirir; seçim her zaman içeriğin görevine göre yapılmalıdır.

Sık sorulan sorular

Aside etiketi bir sayfada yalnızca bir kez mi kullanılabilir?

Hayır. Ana içerikle ilişkili birden fazla tamamlayıcı bölüm varsa her biri ayrı aside olabilir. Ancak her bölümün gerçekten tamamlayıcı bir işleve sahip olması gerekir.

Aside içine reklam konulabilir mi?

Reklam ana içeriğe bağlı ikincil bir bölüm olarak sunuluyorsa aside uygun olabilir. Etiket seçimi reklamın konumuna değil, sayfadaki anlamsal görevine göre yapılmalıdır.

Aside ile div arasındaki temel fark nedir?

aside içeriğin ana konuya bağlı tamamlayıcı rolünü ifade eder. div ise kendi başına anlamsal bir anlam taşımaz ve çoğunlukla gruplama veya stil amacıyla kullanılır.

HTML aside etiketi nedir?

Mehmet