Figure dan Figcaption

Pada section Images dan Media kita menampilkan gambar dengan img, dan pada section Tables kita menyajikan data tabular. Sebagian konten seperti itu lebih dari sekadar lampiran: gambar, diagram, atau tabel yang dirujuk dari teks dan membutuhkan keterangan resmi. HTML menyediakan pasangan figure dan figcaption untuk kebutuhan tersebut.

figure: Konten Mandiri yang Dirujuk #

Spesifikasi mendefinisikan figure sebagai konten yang mandiri dan biasanya dirujuk sebagai satu unit dari alur utama dokumen. Kata kuncinya satu unit: figure, keterangan, dan isinya berpindah bersama bila tata letak diubah, karena ketiganya diperlakukan sebagai kesatuan. Isinya tidak terbatas pada gambar; tabel, blok kode, video, bahkan gabungan beberapa media boleh masuk.

Gambar Biasa vs Gambar dengan figure #

Uji cepatnya: bila teks menyebut “lihat gambar berikut” dan keterangan itu perlu ikut ketika konten dipindah, bungkus dengan figure. Bila gambar hanya mengiringi kalimat, img tunggal pun cukup.

figcaption: Anak Pertama atau Terakhir #

Elemen figcaption menampung keterangan figure dan boleh berada di posisi pertama atau terakhir di dalam induknya — bukan di tengah. Posisi pertama berguna untuk listing kode yang labelnya ingin dibaca lebih dahulu, sedangkan posisi terakhir lazim untuk gambar. Isinya boleh lebih dari satu baris: keterangan gambar biasanya pendek, sedangkan keterangan tabel boleh menjelaskan sumber data.

figure untuk Kode dan Banyak Media #

figure memuat pre dan code ketika listing kode dirujuk dari teks — pola yang umum pada artikel tutorial. Untuk galeri, tulis beberapa img di dalam satu figure lalu beri satu figcaption untuk seluruhnya; grup media itu tetap dirujuk sebagai satu unit, dan keterangannya tetap melekat. Pola yang sama berlaku bagi tabel statistik yang disebut berulang kali oleh sebuah laporan.

Contoh: Gambar dan Listing Kode #

Berkas berikut memuat dua figure dengan posisi figcaption yang berbeda, lengkap dengan berkas gambar profil-budi.svg di dalam bundle:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh Figure — Blog Budi</title>
</head>
<body>
  <main>
    <h1>Alat Seduh Favorit Budi</h1>
    <p>Budi menyeduh kopi dengan dripper keramik setiap pagi. Gambar 1 menampilkan identitas penulis blog ini.</p>
    <figure>
      <img src="profil-budi.svg" alt="Ilustrasi profil Budi" width="120" height="120">
      <figcaption>Gambar 1: Budi, penulis blog penggemar kopi.</figcaption>
    </figure>
    <p>Resep rasio seduhan yang dirujuk pembaca sepanjang artikel tercantum pada listing berikut.</p>
    <figure>
      <figcaption>Listing 1: Rasio seduh pour over versi Budi.</figcaption>
      <pre><code>14 gram biji kopi
210 ml air 90 derajat
durasi seduh 3 menit</code></pre>
    </figure>
  </main>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul dan paragraf pembuka
  - Gambar kotak berwarna teal berisi ilustrasi profil, diikuti
    keterangan "Gambar 1: Budi, penulis blog penggemar kopi."
  - Keterangan "Listing 1: ..." di atas blok teks tiga baris resep

Mari kita telaah peran setiap baris kunci:

1. Baris 12-15 (figure pertama): gambar dan keterangannya dirujuk dari paragraf atas sebagai “Gambar 1”, sehingga keduanya wajib berpindah bersama.
2. Baris 13 (img): atribut src menunjuk ke profil-budi.svg yang ada di bundle yang sama, dengan alt, width, dan height sebagaimana pola section Images dan Media.
3. Baris 17-22 (figure kedua): figcaption diletakkan sebagai anak pertama, lalu pre berisi code mengikuti — posisi yang tepat untuk listing kode.
4. Baris 19-21 (pre dan code): tiga baris resep tampil persis seperti ditulis, satu unit yang seluruhnya bergantung pada keterangannya.

Contoh ini menutup koleksi elemen struktur section ini. Chapter berikutnya merangkum semuanya: pohon keputusan memilih elemen, tabel ringkasan, anti-pattern yang sering muncul, dan satu studi kasus halaman berita yang memakai hampir seluruh elemen di atas.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen figure
• MDN Web Docs — Elemen figcaption
• WHATWG — HTML Living Standard: Grouping content

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh Figure — Blog Budi</title>
</head>
<body>
  <main>
    <h1>Alat Seduh Favorit Budi</h1>
    <p>Budi menyeduh kopi dengan dripper keramik setiap pagi. Gambar 1 menampilkan identitas penulis blog ini.</p>
    <figure>
      <img src="profil-budi.svg" alt="Ilustrasi profil Budi" width="120" height="120">
      <figcaption>Gambar 1: Budi, penulis blog penggemar kopi.</figcaption>
    </figure>
    <p>Resep rasio seduhan yang dirujuk pembaca sepanjang artikel tercantum pada listing berikut.</p>
    <figure>
      <figcaption>Listing 1: Rasio seduh pour over versi Budi.</figcaption>
      <pre><code>14 gram biji kopi
210 ml air 90 derajat
durasi seduh 3 menit</code></pre>
    </figure>
  </main>
</body>
</html>