HTML16 / 46

aside, figure, dan figcaption

<aside> menandai konten pendukung yang bukan inti halaman: sidebar, info terkait, atau iklan. <figure> membungkus gambar, diagram, atau cuplikan kode beserta keterangannya, dan <figcaption> adalah keterangannya. Bedanya dengan paragraf biasa di bawah gambar: figcaption terikat resmi ke gambarnya, sehingga screen reader membacakan keduanya sebagai satu kesatuan. Letakkan figcaption sebagai anak pertama atau terakhir di dalam figure — posisi lain tidak valid.

👀 Contoh dulu

<figure>
  <img src="https://picsum.photos/120" alt="Grafik penjualan">
  <figcaption>Gambar 1: Tren penjualan 2026</figcaption>
</figure>

Hasilnya: Gambar dengan keterangan di bawahnya, dan browser tahu bahwa keterangan itu MILIK gambar tersebut.

💡 Bedanya dengan <p> biasa di bawah gambar: figcaption terikat resmi ke gambarnya, jadi screen reader membacakannya bersama.

📝 Sekarang giliranmu

Buat <figure> berisi <img> (src https://picsum.photos/300, alt Pemandangan) dan <figcaption> bertuliskan Foto pemandangan acak.

Preview