Semantic: aside

Kenapa aside Ada

Setiap artikel punya "tapi" nya: kutipan menarik yang sayang dilewatkan, info penulis yang relevan tapi bukan isi, definisi istilah yang membantu sebagian pembaca. Kalau semua dijejalkan ke alur utama, artikel jadi berantakan. aside memberi rumah resmi untuk konten tangensial: terkait dengan sekitarnya, tapi bisa dilewati tanpa merusak pemahaman.

Manfaatnya nyata: mode baca browser bisa memisahkan aside dari alur utama, dan screen reader mengumumkan "complementary" sehingga pengguna tahu ini konten pelengkap, bukan kelanjutan paragraf.

aside di Dalam article

Kalau aside ditulis di dalam sebuah article, ia dianggap terkait dengan article itu. Cocok untuk pull quote, info penulis, atau catatan kaki artikel.

<article>
  <h1>Panduan Menyeduh Kopi</h1>
  <p>Air adalah 98% isi kopi, jadi kualitas air...</p>

  <aside>
    <h2>Kutipan</h2>
    <blockquote>
      <p>"Kopi yang baik dimulai dari air yang baik."</p>
    </blockquote>
  </aside>

  <p>Langkah selanjutnya adalah menggiling biji...</p>

  <aside>
    <h2>Tentang Penulis</h2>
    <p>Andi adalah barista dan juara seduh manual 2024.</p>
  </aside>
</article>

Dua aside, dua peran: pull quote mempercantik artikel itu, bio penulis melengkapi artikel itu. Keduanya tidak masuk akal bila dipindah ke artikel lain.

aside di Luar article

Kalau aside sejajar dengan article (mis. langsung di dalam main atau body), ia terkait dengan halaman atau situs secara keseluruhan. Inilah sidebar klasik: daftar artikel populer, newsletter, iklan.

<main>
  <article>
    <h1>Panduan Menyeduh Kopi</h1>
    <p>Isi artikel...</p>
  </article>

  <aside>
    <h2>Artikel Populer</h2>
    <ul>
      <li><a href="#">Resep Kopi Tubruk</a></li>
      <li><a href="#">Review Grinder Murah</a></li>
    </ul>
    <h2>Berlangganan</h2>
    <p>Dapatkan tips kopi tiap minggu.</p>
  </aside>
</main>

Perhatikan: "Artikel Populer" milik situs, bukan milik artikel "Panduan Menyeduh Kopi". Makanya ia di luar article. Tesnya sederhana: kalau sidebar ini tetap masuk akal saat artikelnya diganti artikel lain, ia milik halaman, taruh di luar.

Contoh Realistis: Blog Lengkap

<body>
  <main>
    <article>
      <header>
        <h1>Panduan Menyeduh Kopi</h1>
        <p>Oleh Andi</p>
      </header>
      <p>Isi panduan...</p>
      <aside>
        <h2>Istilah</h2>
        <p><strong>Blooming:</strong> proses pelepasan gas CO2 dari bubuk kopi.</p>
      </aside>
      <p>Lanjutan panduan...</p>
    </article>
    <aside>
      <h2>Baca Juga</h2>
      <ul>
        <li><a href="#">Sejarah Kopi</a></li>
      </ul>
    </aside>
  </main>
</body>

Ada dua aside di sini dengan makna berbeda: "Istilah" di dalam article (glosarium khusus artikel ini), "Baca Juga" di luar article (rekomendasi situs). Posisi menentukan makna, bukan sekadar tampilan.

Salah vs Benar

<!-- SALAH: konten UTAMA dibungkus aside -->
<aside>
  <h2>Harga Paket</h2>
  <p>Daftar harga lengkap...</p>
</aside>

<!-- BENAR: konten utama pakai section -->
<section>
  <h2>Harga Paket</h2>
  <p>Daftar harga lengkap...</p>
</section>

<!-- SALAH: aside tanpa kaitan dengan sekitarnya -->
<article>
  <h1>Resep Kopi</h1>
  <p>Isi resep...</p>
  <aside>
    <h2>Promo Hosting</h2>
    <p>Diskon hosting 90%!</p>
  </aside>
</article>

<!-- BENAR: aside relevan dengan induknya -->
<article>
  <h1>Resep Kopi</h1>
  <p>Isi resep...</p>
  <aside>
    <h2>Tips</h2>
    <p>Pakai air dengan suhu 92 derajat untuk hasil terbaik.</p>
  </aside>
</article>

Iklan "Promo Hosting" tidak ada kaitannya dengan resep kopi. Kalau memang harus ada iklan, ia milik halaman (taruh di luar article) atau lebih jujur lagi: bukan aside sama sekali.

Catatan teknis: aside bukan sinonim "sidebar visual". Sidebar yang berisi navigasi utama sebaiknya nav, sidebar berisi konten utama sebaiknya section. Pakai aside hanya bila kontennya benar-benar tangensial. CSS bisa menaruh aside di mana saja secara visual, tapi maknanya ditentukan oleh posisi di DOM.