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