HTML figure Tag

Penjelasan HTML figure :

HTML figure Tag - belajar html <figure>, element <figure> mempunyai definisi sebagai konten mandiri seperti ilustrasi, diagram, video, image, code computer, dll.

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>

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>

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>

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>

Global Attributes:

Element <figure> mencakup Global Attributes HTML.

Event Attributes:

Element <figure> mencakup Event Attributes HTML.

Browser Support :

Desktop

Chrome	8
Safari	5.1
Firefox	4
Opera	11
IE	9
Edge	Ya

Mobile

Android Webview	Ya
Chrome Android	Ya
Edge Mobile	Ya
Firefox Android	4
Opera Android	11
iOs Safari	5.1
Samsung Internet	Ya

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;
}