Figure dan Figcaption

Semua contoh sejauh ini menempatkan img berdiri sendiri di tengah teks. Pola itu sah, tetapi sering kurang: halaman nyata biasanya ingin memberi keterangan pada gambar — nomor gambar, keterangan foto, sumber data. Tanpa struktur khusus, keterangan ditulis sebagai paragraf terpisah yang tidak memiliki hubungan apa pun dengan gambarnya; pindahkan gambarnya, dan keterangannya tertinggal di tempat. HTML menyediakan pasangan elemen untuk mengikat keduanya.

Elemen figure #

Aturannya: figure menandai konten yang mandiri (self-contained) — unit lengkap yang dirujuk dari alur utama halaman tetapi tetap berdiri sendiri, seperti gambar beserta keterangannya, grafik, potongan kode, atau tabel. Karena satu unit, browser dan pembaca layar memperlakukan seluruh isi figure sebagai satu kesatuan yang bisa dipindahkan tanpa kehilangan makna.

Elemen figcaption #

Aturannya: figcaption adalah keterangan untuk figure — opsional, dan bila dipakai harus menjadi anak langsung pertama atau terakhir dari figure; satu figure hanya boleh memuat satu figcaption.

Contoh lengkap untuk foto menu kedai:

<figure>
  <img
    src="assets/kopi-tubruk.jpg"
    alt="Segelas kopi tubruk dengan ampas yang mengendap di dasar gelas"
    width="800"
    height="600">
  <figcaption>Kopi tubruk — sajian terlaris Kedai Kopi Siti sejak 2020.</figcaption>
</figure>

Hasil render: gambar kopi tubruk tampil dengan satu baris keterangan di bawahnya, menjorok dari lebar gambar — tampilan yang mirip dengan paragraf terpisah, tetapi strukturnya berbeda.

Lihat unit figure yang utuh berikut — gambarnya memakai placeholder, sedangkan strukturnya persis seperti contoh di atas:

Pada demo, assets/kopi-tubruk.jpg diganti placeholder SVG agar gambarnya langsung terlihat; markup figure-nya sama persis.

Mari kita telaah strukturnya:

1. <figure>: membuka unit mandiri; seluruh isi di dalamnya dianggap satu kesatuan yang lengkap.
2. <img> dengan atribut lengkap: alt, width, dan height tetap berlaku persis seperti dua chapter sebelumnya.
3. <figcaption> sebagai anak terakhir: keterangan kini melekat — memindahkan figure ikut memindahkan keterangannya, dan pembaca layar mengumumkan figure sebagai unit berketerangan.
4. Perbandingan semantik: img yang berdiri sendiri diikuti paragraf keterangan tampak sama di layar, tetapi hanya figure yang menyatakan hubungan gambar dan keterangan itu secara eksplisit.

figure Tidak Harus Berisi Gambar #

Isi figure tidak terbatas img — potongan kode dalam pre, tabel, hingga kutipan panjang sama sahnya. Contoh kutipan ulasan pelanggan:

<figure>
  <blockquote>
    <p>Kopi tubruk terbaik di kota ini. Ampasnya tenang, rasanya jujur.</p>
  </blockquote>
  <figcaption>— Dewi, pelanggan sejak 2024</figcaption>
</figure>

Blok ini mengutip ulasan beserta atribusinya sebagai satu unit mandiri yang bisa dipindah ke bagian mana pun halaman tanpa kehilangan maknanya.

Ringkasan #

• figure menandai unit konten mandiri; isinya boleh gambar, kode, tabel, atau kutipan.
• figcaption adalah keterangan opsional — anak langsung pertama atau terakhir, maksimal satu.
• Struktur ini mengikat gambar dan keterangan secara semantik, berbeda dari img dan paragraf terpisah.

Chapter berikutnya meninggalkan struktur untuk membahas asal berkasnya: folder proyek kita sendiri, atau domain milik orang lain.