Referensi Belajar HTML figure tag. Tutorial dan panduan mengenai element <figure>...</figure> yang dapat digunakan untuk memarkup figur gambar dan lain sebagainya. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <figure>.


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.

HTML
<figure>
<img src="https://www.apacara.com/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).

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

HTML
<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

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

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

    </style>
  </head>
  <body>
    <figure>
      <img src="https://www.apacara.com/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>
  </body>
</html>



Comments