Penjelasan HTML figcaption
:
HTML
figcaption
Tag - belajar html figcaption, element figcaption mempunyai definisi judul dari isi konten pada element <figure>
.
Dalam penulisan pada html, element
<figcaption>
ditulis didalam element <figure>
, baik setelah tag pembuka <figure>
atau sebelum tag penutup </figure>
.
Contoh 1 html element <figcaption>
:
<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 <figcaption>
:
<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 <figcaption>
:
<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 <figcaption>
:
<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
<figcaption>
mencakup Global Attributes HTML.
Event Attributes:
Element
<figcaption>
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
<figcaption>
, biasanya mempunyai nilai default :figcaption {
display: block;
}