HTML figure dan figcaption: Mengelompokkan Konten dan Keterangan

HTML <figure> mengelompokkan konten mandiri seperti ilustrasi, grafik, atau kode menjadi satu unit, dan <figcaption> menyediakan keterangannya. Tempatkan satu figcaption sebagai anak pertama atau terakhir figure; abaikan jika tidak diperlukan keterangan.

Apakah figure hanya untuk gambar?

Anda dapat menggunakan figure untuk foto, ilustrasi, grafik, contoh kode, atau kutipan yang dirujuk teks sebagai satu item. Gunakan div hanya ketika Anda hanya memerlukan wadah gaya, dan hindari membungkus seluruh bagian terkait dalam figure. Menggunakan elemen ini tidak secara otomatis memverifikasi hak cipta atau sumber materi.

figcaption menjelaskan isi lain dari elemen induk langsungnya, yaitu figure. Letakkan di dalam figure, dengan paling banyak satu figcaption dalam setiap figure. Jika penjelasan diperlukan untuk bagian atas dan bawah, gabungkan penjelasan tersebut dalam satu figcaption.

Contoh lengkap: letakkan keterangan di awal atau akhir

Simpan kode berikut sebagai figures.html dan buka di browser. Contoh ini menggambar bentuk sederhana dengan SVG (Scalable Vector Graphics) sehingga dapat dijalankan tanpa berkas gambar terpisah. Item pertama memiliki keterangan sebelum grafik; yang kedua memiliki keterangan setelah grafik.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Membandingkan posisi keterangan figure</title>
  <style>
    figure { margin: 1rem 0; max-width: 20rem; }
    svg { display: block; width: 100%; height: auto; }
    figcaption { padding: 0.5rem 0; }
  </style>
</head>
<body>
  <h1>Perbandingan dua bentuk</h1>
  <figure>
    <figcaption>Gambar A. Lingkaran biru</figcaption>
    <svg viewBox="0 0 240 120" role="img" aria-label="Lingkaran biru di tengah latar terang">
      <rect width="240" height="120" fill="#f0f3f5" />
      <circle cx="120" cy="60" r="36" fill="#176e96" />
    </svg>
  </figure>
  <figure>
    <svg viewBox="0 0 240 120" role="img" aria-label="Persegi oranye di tengah latar terang">
      <rect width="240" height="120" fill="#f0f3f5" />
      <rect x="84" y="24" width="72" height="72" fill="#b35a12" />
    </svg>
    <figcaption>Gambar B. Persegi oranye</figcaption>
  </figure>
</body>
</html>

“Gambar A. Lingkaran biru” tampil di atas lingkaran, sedangkan “Gambar B. Persegi oranye” tampil di bawah persegi. Saat jendela dipersempit, SVG mengecil mengikuti lebar figure. Bandingkan posisinya dengan memindahkan figcaption ke awal atau akhir di dalam figure, bukan ke luar elemen tersebut.

Keterangan dan teks alternatif gambar memiliki peran yang berbeda

Sebuah figcaption dapat berisi judul, penjelasan, atau sumber yang terlihat oleh semua pembaca. alt pada sebuah gambar menyediakan konten pengganti untuk pembaca yang tidak dapat melihat gambar. Jangan secara otomatis meninggalkan alt gambar penting kosong hanya karena ada keterangan, atau menggandakan setiap kata penjelasan secara kata demi kata di kedua tempat.

Contoh ini menggunakan SVG daripada img, sehingga memberikan deskripsi bentuk dengan role dan aria-label. Untuk foto yang dimasukkan dengan img, tentukan src dan alt beserta ukuran yang diperlukan. Jika sebuah grafik menyampaikan perbandingan numerik, pertimbangkan apakah keterangan singkat sudah cukup dan juga sediakan data kunci dalam teks atau tabel.

Elemen figure tidak secara otomatis menghasilkan keterangan atau nomor gambar, dan margin defaultnya bergantung pada browser dan CSS. Jika penomoran diperlukan, pastikan konsisten dengan referensi dalam dokumen. Referensi gambar figure di MDN dan referensi keterangan gambar figcaption di MDN menjelaskan aturan elemen secara rinci.