HTML figcaption tag | belajar <figcaption> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML figcaption tag. Tutorial dan panduan mengenai element <figcaption>...</figcaption> yang digunakan untuk memberi judul sebuah figure element. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <figcaption>.

Deskripsi
Penjelasan HTML figcaption

HTML <figcaption> element merepresentasikan sebuah judul (caption) untuk <figure> element. Contohnya, sebuah gambar seringkali terdapat catatan (judul) yang mewakili atau memberi keterangan pada gambar tersebut. Elemen <figcaption> dapat digunakan untuk memarkup judul atau keterangan dari gambar tersebut.

<figcaption> digunakan sebagai anak element pertama atau terakhir dari <figure> (terletak di dalam <figure> element dan posisinya bisa di awal atau terakhir).

Untuk contoh dan penjelasan lengkap, pelajari juga mengenai HTML <figure> element.

Global Attributes
Atribut Secara Global (Keseluruhan)

<figcaption> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<figcaption> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <figcaption> element

HTML 
<figure>
  <img src="/media/images/content/parkir-motor.jpg" alt="Parkiran Motor" width="400" height="300">
  <figcaption>Gambar 1 - Area parkir motor.</figcaption>
</figure>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML figcaption tag</title>
    <style>

    </style>
  </head>
  <body>
    <figure>
      <img src="/media/images/content/parkir-motor.jpg" alt="Parkiran Motor" width="400" height="300">
      <figcaption>Gambar 1 - Area parkir motor PT. Indah Kiat Serang.</figcaption>
    </figure>
  </body>
</html>
SHARE
Previous Article Next Article