tRikSonic

HTML figure Tag

Terakhir diperbarui : 24 Mei 2018 - 19.03

Penjelasan HTML figure :

HTML figure Tag - belajar html <figure>, element <figure> mempunyai definisi sebagai konten mandiri seperti ilustrasi, diagram, video, image, code computer, dll.
background html
Dalam penggunaan element <figure> dapat ditambahkan element <figcaption> sebagai judul dari isi konten element <figure>

Contoh 1 html element <figure> :

<figure>
 <img src="html-tutorial.png" alt="Tutorial HTML"/>
 <figcaption>Tutorial HTML</figcaption>
</figure>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NfFfRFXQHo-hYdFip5dpO0I9mFLjJMPH-i4x5ex_0btub9z4iULzxQ1ybibwvBS8uUsI309Pas_KNlX_8RTzPc5Pmi4dLQOrl6ZdED6GCRrg_r2Nw6xnWmLXyBxSsmOZksC5zPqxpPID/s1600/" target="_blank">
</head>
<body>

<figure>
 <img src="html-tutorial.png" alt="Tutorial HTML"/>
 <figcaption>Tutorial HTML</figcaption>
</figure>

</body>
</html>

Contoh 2 html element <figure> :

<figure>
<figcaption>Contoh jQuery</figcaption>
<pre>
$(document).ready(function () {
    $('.showshow').hide();
    $('a.showdata-data').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.showshow')
        $('.showshow').not(elem).hide('slow');
        elem.toggle('slow');
    });
});          
</pre>
</figure>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<figure>
<figcaption>Contoh jQuery</figcaption>
<pre>
$(document).ready(function () {
    $('.showshow').hide();
    $('a.showdata-data').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.showshow')
        $('.showshow').not(elem).hide('slow');
        elem.toggle('slow');
    });
});          
</pre>
</figure>

</body>
</html>

Contoh 3 html element <figure> :

<figure>
 <figcaption><cite><b>KARANGAN BUNGA</b></cite>. oleh: Taufiq ismail</figcaption>
<p>
  Tiga anak kecil<br/>
  Dalam langkah malu-malu<br/>
  Datang ke salemba<br/>
  Sore itu.
</p>
<p>
  Ini dari kami bertiga<br/>
  Pita hitam pada karangan bunga<br/>
  Sebab kami ikut berduka<br/>
  Bagi kakak yang ditembak mati<br/>
  Siang tadi.
</p>
</figure>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<figure>
 <figcaption><cite><b>KARANGAN BUNGA</b></cite>. oleh: Taufiq ismail</figcaption>
<p>
  Tiga anak kecil<br/>
  Dalam langkah malu-malu<br/>
  Datang ke salemba<br/>
  Sore itu.
</p>
<p>
  Ini dari kami bertiga<br/>
  Pita hitam pada karangan bunga<br/>
  Sebab kami ikut berduka<br/>
  Bagi kakak yang ditembak mati<br/>
  Siang tadi.
</p>
</figure>

</body>
</html>

Contoh 4 html element <figure> :

<figure>
 <figcaption class="center">Video Steve vai</figcaption>
 <video controls="controls">
   <source src="VideoSteveVaiGuitarSolo_512kb.mp4" type="video/mp4" />
   <source src="VideoSteveVaiGuitarSolo.ogv" type="video/ogg" />
 </video>
</figure>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href="https://archive.org/download/VIdeo_steve_vai/" target="_blank"/>

<style>
.center {
  text-align:center;
}
</style>

</head>
<body>

<figure>
 <figcaption class="center">Video Steve vai</figcaption>
 <video controls="controls">
   <source src="VideoSteveVaiGuitarSolo_512kb.mp4" type="video/mp4" />
   <source src="VideoSteveVaiGuitarSolo.ogv" type="video/ogg" />
 </video>
</figure>

</body>
</html>

Global Attributes:

Element <figure> mencakup Global Attributes HTML.

Event Attributes:

Element <figure> mencakup Event Attributes HTML.

Browser Support :

Desktop

Chrome8
Safari5.1
Firefox4
Opera11
IE9
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox Android4
Opera Android11
iOs Safari5.1
Samsung InternetYa

Default CSS :

Browser yang support dengan element <figure>, biasanya mempunyai nilai default :
figure { 
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.