Memberi keterangan caption gambar elemen HTML figure dan figcaption
Menggunakan Elemen figure dan figcaption HTML
Selain CSS, HTML adalah teknologi utama untuk membuat laman website. HTML berfungsi untuk menentukan struktur dan konten laman, sedangkan CSS bertanggung jawab pada tampilan laman. Di dalam membuat laman website, sangat penting menggunakan elemen HTML yang tepat untuk menentukan struktur dan konten yang baik sehingga bisa dipahami mesin telusur dan memberi nilai SEO yang baik pula.

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:

Memberi keterangan caption gambar di HTML

Produk Laris Toko

Murah Taffware OKD180 power supply station 220V 69800mAh
Taffware OKD180 Power Supply Station Generator 220V 69800mAh
Rp 1.045.500
(4.8/5)
Murah Fosi Audio DA2120C Power Amplifier
Fosi Audio DA-2120C Bluetooth 5.0 Amplifier 2.1 Channel with Remote
Rp 2.138.900
(5/5)
Murah Fosi Audio BT30D Pro Power Amplifier
Fosi Audio BT30D PRO Bluetooth 5.0 Amplifier 2.1 Channel 165x2+350W
Rp 1.298.600
(5/5)
Murah Taffware OKD320A Power Supply Station 84000mAh 300W
TAFFWARE OKD320A Power Supply Station Generator Portable 84000mAh 300W
Rp 1.543.500
(4.8/5)
Murah EDIFIER QR65 Desktop Speaker Active Monitoring with GaN Charger
EDIFIER QR65 Desktop Speaker Active Monitoring with GaN Charger
Rp 5.189.000
(5/5)
Murah EDIFIER S360DB Hi-Res Audio with Wireless Subwoofer
EDIFIER S360DB Hi-Res Audio with Wireless Subwoofer
Rp 6.729.000
(5/5)
Murah EDIFIER T5 Powered Active Subwoofer
EDIFIER T5 Powered Active Subwoofer
Rp 2.161.060
(4.9/5)
Murah EDIFIER QD35 Tabletop Bluetooth Speaker
EDIFIER QD35 Tabletop Bluetooth Speaker
Rp 2.399.000
(5/5)

Dapatkan DISKON dan GRATIS ONGKIR untuk pembelian melalui aplikasi TikTok Shop.