figure | Codingku

Elemen <figure> mewakili konten yang mandiri dan biasanya direferensikan sebagai satu unit kesatuan dengan keterangan (figcaption) dan kontennya.

Tag <figure> dapat digunakan untuk menganotasi ilustrasi, diagram, foto, daftar kode, dll

Syntax

Tag <figure> ditulis seperti <figure></figure> dengan caption diletakkan diantara tag pembuka dan penutup.

Kamu bisa menggunakan elemen <figcaption> untuk memberi keterangan pada elemen <figure>.

Seperti Ini:

<figure>
	<figcaption>
		Caption disini...
	</figcaption>
	
	Konten figure disini...
<figure>

Atau seperti ini:

<figure>
  Konten figure disini...

	<figcaption>
		Caption disini...
	</figcaption>
<figure>

<p><a href="#1">Figure 1</a> provides the JavaScript code for creating an alert box:</p>
<figure id="1">
  <figcaption>Figure 1. JavaScript Alert Box.</figcaption>
  <pre><code>alert('Hello!');</code></pre>
</figure>

<figure>
    <img src="/images/html/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

Pengaturan Default CSS

Sebagian besar browser menampilkan elemen <figure> dengan pengaturan CSS:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}