Tutorial HTML / Mengelompokkan gambar dan keterangannya dengan figure dan figcaption

figure mengelompokkan konten mandiri seperti gambar, grafik, atau contoh kode, dan figcaption memberikan keterangan yang terlihat pada konten tersebut. Tidak semua gambar memerlukan elemen ini. Gunakanlah ketika konten dan penjelasannya membentuk satu kesatuan.

Pertahankan gambar dan keterangannya tetap bersama

Sebuah gambar perjalanan dan lokasinya atau konteksnya dapat membentuk satu kesatuan mandiri. Tempatkan figcaption sebagai anak pertama atau terakhir dari figure. Gunakan contoh gambar yang dapat diunduh yang sama dan konfigurasi jalur seperti Menambahkan gambar dengan img: teks alternatif dan ukuran.

<figure>
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="Sebuah pohon di sebuah pulau kecil di tengah danau, dengan gunung-gunung di latar belakang"
       width="960" height="540">
  <figcaption>Gambar: danau dan pohon, yang digunakan dalam pelajaran ini</figcaption>
</figure>

Jika gambar melebihi lebar konten, tambahkan CSS ini ke elemen style di head. Mengubah caption gambar tidak secara otomatis mengubah teks alternatif, jadi periksa masing-masing secara terpisah.

figure { margin: 1rem 0; }
figure img { max-width: 100%; height: auto; }

Unduh gambar contoh dengan lebar 960 piksel dan simpan di samping file HTML. Masukkan kode HTML berikut di body dan aturan CSS di elemen style dalam head. Nama berkas adalah html-image-sample-lake-tree-960-v1.webp dan ukuran sebenarnya adalah 960×540 piksel. Keterangan muncul di bawah; pindahkan figcaption ke posisi anak pertama untuk menempatkannya di atas.

Teks alternatif dan keterangan memiliki fungsi yang berbeda

Teks alt menyampaikan informasi atau fungsi gambar jika gambar tersebut tidak dapat dilihat. figcaption yang terlihat memberikan judul, sumber, atau konteks untuk semua orang. Mengulang hal yang sama persis di keduanya dapat menyebabkan pengalaman membaca yang berlebihan. Dalam contoh ini, atribut alt menggambarkan informasi yang terlihat dan keterangan gambar mengidentifikasi perannya sebagai contoh untuk sebuah pelajaran. Periksa fungsi gambar bersamaan dengan penggunaan keyboard dalam Prinsip-prinsip dasar aksesibilitas: Judul, Tautan, Gambar, dan Keyboard.

Untuk gambar yang murni dekoratif, pertimbangkan alt="", tetapi pastikan terlebih dahulu bahwa informasi penting tersedia di tempat lain. Grafik harus menyampaikan tren utama atau hasilnya, dan bukan hanya label "diagram batang". Jika data Anda membutuhkan penjelasan lebih panjang, sediakan dalam teks atau tabel yang terdekat dan biarkan teks alternatif memberi tahu pembaca tentang hal itu. Pohon keputusan W3C WAI untuk teks alternatif membantu dalam pemilihan ini.

Kapan figure dapat dihilangkan?

Sebuah gambar biasa dalam aliran sebuah paragraf tidak memerlukan figure, jika tidak memiliki keterangan atau referensi terpisah. Sebuah diagram yang dibahas sebagai "gambar berikut" atau contoh kode dengan keterangan adalah kandidat yang lebih tepat. Sebuah figure dapat berisi lebih dari satu gambar. Lihat referensi untuk figure pada MDN untuk model kontennya.

Untuk menautkan sumber dalam keterangan, gantilah figcaption sebelumnya sebagai berikut. Tautan ini mengarah ke pelajaran yang menyediakan file contoh yang sebenarnya. Untuk gambar lain, identifikasi pencipta/sumber sebenarnya dan periksa ketentuan penggunaannya; penyebutan sederhana tidak memberi izin.

<figcaption>Sumber gambar contoh: <a href="https://www.codingfactory.net/id/18465">file yang disediakan dalam pelajaran tentang gambar</a>.</figcaption>

Keterangan sumber dan tautan muncul di bawah gambar, sementara atribut alt tetap mendeskripsikan pohon, danau, dan gunung. Jangan ulangi semua detail atribusi di teks alt.

Jika hasilnya tampak salah

Browser secara default dapat menambahkan margin di sekitar figure. Periksa CSS-nya margin sebelum mengubah struktur HTML. Jika gambar hilang, periksa nama file dan jalur relatifnya. Jika keterangan gambar hilang, pastikan figcaption berada di dalam figure dan tag penutupnya ada. Keterangan gambar tidak otomatis memberikan teks alternatif yang sesuai; periksa keduanya secara terpisah.