aside untuk Konten Pelengkap
Gunakan aside untuk bilah sisi dan konten yang berkaitan secara tidak langsung.
aside untuk Konten Pelengkap adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Elemen Samping
Elemen <aside> menandai konten yang berkaitan secara tidak langsung dengan konten di sekitarnya:
- Konten tersebut dapat dipisahkan dari konten utama tanpa menghilangkan makna konten utama
- Bayangkan: bilah sisi, kotak sorotan, kutipan pilihan, dan iklan
Elemen Samping dalam Artikel
Di dalam artikel, elemen samping menandai informasi yang terkait tetapi tidak penting bagi alur cerita:
<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>Elemen Samping Tingkat Halaman
Pada tingkat halaman, elemen samping digunakan untuk bilah sisi:
<div class="layout">
<main>
<article>...</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>...</ul>
<h2>Newsletter</h2>
<p>Subscribe for updates.</p>
</aside>
</div>Peran ARIA Elemen Samping
Elemen <aside> tingkat halaman dipetakan ke role="complementary":
<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 -->Kutipan Pilihan dengan Elemen Samping
Kutipan pilihan (kutipan yang diambil untuk memberikan dampak visual) dapat ditandai sebagai elemen samping:
<aside class="pullquote">
<blockquote>
<p>HTML is the foundation of the web — learn it well.</p>
</blockquote>
</aside>Iklan dengan Elemen Samping
Unit iklan di bilah sisi dapat ditandai sebagai elemen samping:
<aside aria-label="Advertisement">
<p class="sr-only">Advertisement</p>
<img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>Elemen Samping vs Bagian
Perbedaan utamanya:
<aside>—berkaitan secara tidak langsung dengan konten utama; bersifat pelengkap<section>—secara tematik merupakan bagian dari konten utama
Elemen Samping untuk Istilah Glosarium
Gunakan elemen samping untuk mendefinisikan istilah yang digunakan dalam artikel:
<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>Beberapa Bagian Bilah Sisi
Elemen samping pada bilah sisi dapat berisi beberapa bagian yang berdiri sendiri:
<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>Elemen Samping Tidak Memerlukan Judul
Berbeda dari bagian, elemen samping tidak secara ketat memerlukan judul:
<!-- 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>Elemen Samping Bukan untuk Penataan Gaya Sampingan
Elemen samping bersifat semantik—jangan menggunakannya hanya untuk tata letak bilah sisi secara visual:
<!-- 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>Pemeriksaan Singkat
Ke peran penanda ARIA apa elemen samping tingkat halaman dipetakan?
Ringkasan: Elemen Samping
Hal-hal penting tentang elemen samping:
- Konten yang berkaitan secara tidak langsung dengan konten di sekitarnya
- Bilah sisi tingkat halaman → wilayah pelengkap
- Di dalam artikel → informasi tambahan (definisi istilah, sorotan)
- Beri label pada beberapa elemen samping dengan label ARIA
- Bukan untuk wadah tata letak murni—gunakan wadah untuk itu
Pertanyaan yang Sering Diajukan
Apakah pelajaran “aside untuk Konten Pelengkap” gratis?
Ya — teks lengkap “aside untuk Konten Pelengkap” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “aside untuk Konten Pelengkap”?
Gunakan aside untuk bilah sisi dan konten yang berkaitan secara tidak langsung. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “aside untuk Konten Pelengkap” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- aside untuk Konten Pelengkap
- figure dan figcaption Ditinjau Kembali
- details dan summary untuk Widget Pengungkapan
- Elemen progress dan meter