Aside

Sebagian konten berhubungan dengan inti tulisan tetapi tidak termasuk alur utamanya: kotak “Tahukah Anda”, sidebar arsip, daftar tag, atau blok iklan. HTML menyediakan aside untuk keluarga konten ini. Chapter ini membahas makna tangensial, dua posisi umum aside, jenis isi yang cocok, dan perannya sebagai landmark complementary.

Makna Konten Tangensial #

Spesifikasi mendefinisikan aside sebagai bagian halaman yang berisi konten yang berhubungan secara tangensial dengan konten di sekitarnya dan dapat dipandang terpisah dari konten tersebut. Dua syarat itu saling melengkapi: masih ada kaitan dengan topik, tetapi bila bagian ini dihapus, inti tulisan tetap utuh. Tipografi cetak memakai pola ini sejak lama dalam bentuk sidebar dan kotak sisipan; aside membawa pola yang sama ke HTML.

Perlu dibedakan dengan teks yang memang bagian alur utama. Spesifikasi memperingatkan agar aside tidak dipakai untuk teks dalam kurung yang masih menjadi bagian kalimat inti — konten semacam itu tetap ditulis di dalam paragraf biasa.

aside dalam article vs aside Level Halaman #

Dua posisi paling umum berbeda lingkupnya. aside yang ditulis di dalam article berlaku sebagai catatan sisipan yang menempel pada paragraf sekitarnya, misalnya kotak “Tahukah Anda” di tengah tulisan. aside yang berdiri di level halaman — sejajar dengan main — menjadi tempat konten pendukung halaman seperti sidebar arsip, daftar tag, atau blok iklan.

Pada lapisan aksesibilitas, aside memperoleh peran implisit complementary, yaitu landmark konten pendukung yang dapat dilompati pembaca layar. Sebagaimana landmark lain, pembahasan mendalamnya kita tunda sampai section Accessibility; untuk saat ini cukup dipahami bahwa posisi aside menentukan apakah kontennya terdengar sebagai catatan artikel atau sebagai pelengkap halaman.

Isi yang Cocok untuk aside #

• Kotak info “Tahukah Anda” atau catatan samping di tengah tulisan.
• Sidebar berisi arsip, tag, atau daftar tulisan populer.
• Pull quote — kutipan besar yang ditarik keluar untuk efek tipografis.
• Blok iklan yang berhubungan dengan konten.
• Kumpulan nav sekunder yang menempel pada bagian tertentu.

Bilamana konten tidak memiliki kaitan sama sekali dengan tulisan, aside pun bukan tempatnya; konten yang benar-benar terpisah ditata sebagai bagian halaman lain.

Contoh Sidebar Blog #

Berkas berikut memuat keduanya: satu aside sisipan di dalam artikel Budi dan satu aside sidebar di level halaman:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mengenal Kopi Gayo — Blog Budi</title>
</head>
<body>
  <header>
    <p>Blog Budi</p>
  </header>
  <main>
    <article>
      <h1>Mengenal Kopi Gayo</h1>
      <p>Kopi Gayo berasal dari dataran tinggi Aceh dan ditanam pada ketinggian di atas seribu meter. Tanah vulkanik di wilayah itu memberi karakter rasa yang khas.</p>
      <aside>
        <p><strong>Tahukah Anda?</strong> Nama Gayo diambil dari suku yang telah lama menghuni dataran tinggi tersebut.</p>
      </aside>
      <p>Profil rasanya cenderung beraroma rempah dengan keasaman yang terkendali, sehingga cocok bagi pembaca yang menyukai seduhan pekat.</p>
    </article>
  </main>
  <aside>
    <h2>Arsip</h2>
    <ul>
      <li><a href="arsip-2024.html">Tahun 2024</a></li>
      <li><a href="arsip-2025.html">Tahun 2025</a></li>
    </ul>
    <h2>Tag</h2>
    <ul>
      <li>kopi</li>
      <li>gayo</li>
      <li>seduh</li>
    </ul>
  </aside>
  <footer>
    <p>&copy; 2025 Blog Budi</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Nama "Blog Budi" di atas, lalu judul artikel dan dua paragraf
  - Paragraf tebal "Tahukah Anda?" tersisip di antara kedua paragraf
  - Blok "Arsip" dan "Tag" beserta daftarnya di bawah artikel
  - Tulisan "(c) 2025 Blog Budi" di bagian bawah

Mari kita telaah kedua aside pada berkas:

1. Baris 16-18 (aside dalam article): kotak “Tahukah Anda” menempel pada topik paragraf sekitarnya; tanpa kotak ini, artikel tetap utuh — persis definisi tangensial.
2. Baris 22-34 (aside level halaman): sidebar arsip dan tag berdiri sejajar main, menjadi pelengkap halaman blog.
3. Baris 23 dan 28 (dua h2 dalam sidebar): heading memberi nama setiap blok sehingga struktur sidebar terbaca tanpa CSS.
4. Baris 12-21 (main dan article): konten inti tetap terpisah; sidebar tidak ikut dianggap bagian artikel.

Tanpa CSS, kedua aside tampil mengalir di bawah artikel; tampilan berdampingan ala sidebar adalah urusan tata letak yang dikerjakan CSS nanti. Maknanya tetap terjaga oleh struktur: pembaca layar pun kini dapat melompat langsung ke blok pendukung tersebut. Chapter berikutnya membahas pasangan figure dan figcaption untuk konten yang dirujuk sebagai satu unit beserta keterangannya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen aside
• WHATWG — HTML Living Standard: Sections

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mengenal Kopi Gayo — Blog Budi</title>
</head>
<body>
  <header>
    <p>Blog Budi</p>
  </header>
  <main>
    <article>
      <h1>Mengenal Kopi Gayo</h1>
      <p>Kopi Gayo berasal dari dataran tinggi Aceh dan ditanam pada ketinggian di atas seribu meter. Tanah vulkanik di wilayah itu memberi karakter rasa yang khas.</p>
      <aside>
        <p><strong>Tahukah Anda?</strong> Nama Gayo diambil dari suku yang telah lama menghuni dataran tinggi tersebut.</p>
      </aside>
      <p>Profil rasanya cenderung beraroma rempah dengan keasaman yang terkendali, sehingga cocok bagi pembaca yang menyukai seduhan pekat.</p>
    </article>
  </main>
  <aside>
    <h2>Arsip</h2>
    <ul>
      <li><a href="arsip-2024.html">Tahun 2024</a></li>
      <li><a href="arsip-2025.html">Tahun 2025</a></li>
    </ul>
    <h2>Tag</h2>
    <ul>
      <li>kopi</li>
      <li>gayo</li>
      <li>seduh</li>
    </ul>
  </aside>
  <footer>
    <p>&copy; 2025 Blog Budi</p>
  </footer>
</body>
</html>