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 dengan 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 Cara Menyisipkan Keterangan (Caption) Ke Gambar Di Microsoft Word
Tag <figure> digunakan untuk membungkus gambar yang disertai dengan keterangan (caption), sedangkan 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 berupa teks yang berfungsi sebagai keterangan (caption) untuk mendeskripsikan gambar atau konten dari tag <figure>. Hampir setiap laman website memiliki gambar dan peran tag <figure> dan <figcaption> sangat penting di dalam 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:
