HTML figure tag | belajar <figure> element

HTML Fadlullah Fadul December 3, 2018

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.

Silahkan, lihat referensi mengenai HTML Global Attribute

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.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <figure> element

Contoh 1

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

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

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
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML figure tag</title>
    <style>

    </style>
  </head>
  <body>
    <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>
  </body>
</html>
SHARE
Previous Article Next Article