Deskripsi
Penjelasan HTML figure

<figure> element digunakan untuk merepresentasikan konten tersendiri (self-contained, seperti sebuah kalimat lengkap), contohnya sebuah ilustrasi, diagram, foto, video, skema, deretan kode (code listings) dan lain sebagainya.

<figure> element digunakan untuk meng-group blok konten yang dapat dipindahkan posisinya dari blok utama sebuah dokumen tanpa mempengaruhi arti dari induk dokumen.

<figure> element dapat ditulis secara bersarang (nested) yang artinya, dalam sebuah <figure>..</figure> dapat ditulis <figure> element lainnya yang berkaitan.

Di dalam <figure> element dapat ditulis sebuah caption (judul) yang ditandai dengan tag <figcaption>.

HTML <figure> merupakan tag yang baru diperkenalkan pada HTML5.


Global Attributes
Atribut Secara Global (Keseluruhan)

<figure> 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.

Event Attributes
Atribut event (Peristiwa)

<figure> 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.

Example
Contoh HTML <figure> element

Contoh 1

<figure> element digunakan untuk me-markup gambar / foto.

<figure>
  <img src="../../../media/images/content/menara-banten.jpg" alt="Masjid Agung dan Menara Banten Lama Serang" width="308" height="250">
  <figcaption>Gambar 1 - Masjid Agung dan Menara Banten.</figcaption>
</figure>

Contoh 2

<figure> element digunakan untuk me-markup kode (code listings).

<p>Pada <a href="#kode1">Kode 1</a> Kita menggunakan CSS <code>color</code> property untuk mewarnai tulisan.</p>
<figure id="kode1">
  <figcaption>Kode 1. Mewarnai tulisan pada sebuah teks paragraf menjadi hijau.</figcaption>
  <pre><code>p {
  color: green;
  }</code></pre>
</figure>
<p>Tulisan berwarna hijau hanya berlaku pada element <code>p</code> (paragraf) saja.</p>

Contoh 3

<figure> element digunakan untuk me-markup puisi / syair.

<figure>
 <p>Dua mata hitam adalah matahati yang biru <br>
    dua mata hitam sangat kenal bahasa rindu.<br>
    Rindu bukanlah milik perempuan melulu<br>
    dan keduanya sama tahu, dan keduanya tanpa malu.<br>
    Dua mata hitam terbenam di daging yang wangi<br>
    kecantikan tanpa sutra, tanpa pelangi.<br>
    Dua mata hitam adalah rumah yang temaram<br>
    secangkir kopi sore hari dan kenangan yang terpendam.</p>
 <figcaption><cite>Mata Hitam</cite>. Karya: WS Rendra</figcaption>
</figure>

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <figure>
Code Editor