HTML5 memperkenalkan banyak elemen baru. Beberapa elemen baru yang terkait gambar adalah elemen figure atau tag <figure> dan elemen figcaption atau tag <figcaption>. Dua elemen ini penting untuk membentuk struktur dan konten yang lebih baik terkait gambar di laman website menggunakan elemen HTML5. Meskipun pada awalnya banyak browser belum mengenal tag ini, cepat atau lambat, browser akan mengadopsinya.
Baca artikel Menyisipkan Keterangan (Caption) Ke Gambar Di Microsoft Word
Tag <figure> digunakan untuk membungkus gambar yang disertai keterangan (caption), sedang tag <figcaption> digunakan untuk memberi keterangan (caption) pada gambar. Dalam penggunaannya, di dalam tag <figure> terdapat tag <img> dan tag <figcaption>. Cukup ada satu tag <figcaption> di dalam tag <figure> dan dapat diletakkan di awal sebelum tag <img> atau di akhir sesudah tag <img>.
Konten dari tag <figcaption> adalah teks yang berfungsi sebagai keterangan (caption) untuk mendeskripsikan gambar atau konten dari tag <figure>. Hampir setiap laman website memiliki gambar. Tag <figure> dan <figcaption> sangat penting dalam peranannya ikut serta mendesain struktur laman website yang lebih baik. Keterangan (caption) pada gambar dapat membatu visitor memahami gambar yang ada di laman website.
Berikut ini adalah contoh sederhana penggunaan dari tag HTML <figure> dan <figcaption> untuk memberi keterangan (caption) pada gambar. Sebagaimana umumnya, keterangan (caption) akan diletakkan di bawah gambar meskipun Anda juga dapat meletakkan sebelum gambar.
<!DOCTYPE html> <html> <body> <h2>Update Oktober Windows 10.</h2> <p>Pada bulan Oktober 2018, Microsoft telah kembali merilis update utama untuk sistem operasi Windows 10 dari versi 1803 ke versi 1809. Windows 10 versi 1809 membawa begitu banyak fitur baru dan peningkatan.</p> <figure> <img src="/gambar/windows10.jpg" alt="Microsoft Windows 10"> <figcaption>Gambar 1 - Sistem Operasi Microsoft Windows 10.</figcaption> </figure> </body> </html>
Berikut ini adalah hasil rendering di web browser Google Chrome:
