aside: Tamamlayıcı İçerik
Kenar çubukları ve konuyla dolaylı olarak ilişkili içerikler için aside kullanın
aside: Tamamlayıcı İçerik, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
aside Öğesi
<aside> öğesi, çevresindeki içerikle dolaylı olarak ilişkili içeriği işaretler:
- Ana içeriğin anlamını kaybetmeden ana içerikten ayrılabilir
- Kenar çubuklarını, dikkat kutularını, öne çıkarılmış alıntıları ve reklamları düşününüz
Makale İçinde aside
Bir makale içinde aside, anlatı için gerekli olmayan ancak onunla ilişkili bilgileri işaretler:
<article>
<h2>How the Internet Works</h2>
<p>The Internet is a global network of computers...</p>
<aside>
<h3>Did You Know?</h3>
<p>The first email was sent in 1971 by Ray Tomlinson.</p>
</aside>
<p>Data travels in packets across routers...</p>
</article>Sayfa Düzeyinde aside
Sayfa düzeyinde aside, kenar çubukları için kullanılır:
<div class="layout">
<main>
<article>...</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>...</ul>
<h2>Newsletter</h2>
<p>Subscribe for updates.</p>
</aside>
</div>aside ARIA Rolü
Sayfa düzeyindeki <aside>, role="complementary" roluna karşılık gelir:
<aside aria-label="Related resources">
<h2>Related resources</h2>
...
</aside>
<!-- Multiple asides should be uniquely labeled
Screen reader users can jump directly to complementary regions -->aside ile Öne Çıkarılmış Alıntılar
Öne çarpıcı görsel etki için seçilen alıntılar aside olarak işaretlenebilir:
<aside class="pullquote">
<blockquote>
<p>HTML is the foundation of the web — learn it well.</p>
</blockquote>
</aside>aside ile Reklam Kullanımı
Kenar çubuklarındaki reklam birimleri aside olarak işaretlenebilir:
<aside aria-label="Advertisement">
<p class="sr-only">Advertisement</p>
<img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>aside ve section Karşılaştırması
Temel ayrım:
<aside>— ana içerikle dolaylı olarak ilişkilidir; tamamlayıcı niteliktedir<section>— ana içeriğin tematik bir parçasıdır
Sözlük Terimleri İçin aside
Bir makalede kullanılan terimleri tanımlamak için aside kullanınız:
<article>
<p>The DOM (Document Object Model) is updated when...</p>
<aside id="dom-def">
<dl>
<dt>DOM</dt>
<dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
</dl>
</aside>
</article>Birden Çok Kenar Çubuğu Bölümü
Bir kenar çubuğu aside öğesi, birden çok bağımsız bölüm içerebilir:
<aside aria-label="Sidebar">
<section>
<h2>About the Author</h2>
<p>Jane Smith is a senior web developer...</p>
</section>
<section>
<h2>Popular Posts</h2>
<ul>...</ul>
</section>
</aside>aside Öğesinin Başlığa İhtiyacı Yoktur
Bölüm öğesinin aksine aside öğesinin kesin olarak bir başlığa ihtiyacı yoktur:
<!-- Valid aside without heading: -->
<aside>
<img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
<h2 class="sr-only">Promotions</h2>
<img src="banner.jpg" alt="20% off this week only">
</aside>aside Dolaylı Biçimlendirme İçin Kullanılmaz
Aside anlamsal bir öğedir — yalnızca görsel kenar çubuğu düzeni oluşturmak için kullanmayınız:
<!-- BAD: aside used for layout only -->
<aside class="right-column"> <!-- no semantic relationship to main content -->
<div class="ad">...</div>
</aside>
<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>Hızlı Kontrol
Sayfa düzeyindeki aside hangi ARIA işaret roluna karşılık gelir?
Özet: aside
aside öğesinin temel özellikleri:
- Çevresindeki içerikle dolaylı olarak ilişkili içerik
- Sayfa düzeyindeki kenar çubuğu → tamamlayıcı işaret bölgesi
- Makale içinde → tamamlayıcı bilgi (terim tanımları, dikkat kutuları)
- Birden çok aside öğesini aria-label ile etiketleyiniz
- Salt düzen kapsayıcıları için kullanılmaz — bunun için div kullanınız
Sıkça Sorulan Sorular
“aside: Tamamlayıcı İçerik” dersi ücretsiz mi?
Evet — “aside: Tamamlayıcı İçerik” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“aside: Tamamlayıcı İçerik” dersinde ne öğreneceğim?
Kenar çubukları ve konuyla dolaylı olarak ilişkili içerikler için aside kullanın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“aside: Tamamlayıcı İçerik” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- aside: Tamamlayıcı İçerik
- figure ve figcaption'a Yeniden Bakış
- details ve summary: Açılır İçerik Bileşeni
- progress ve meter Öğeleri