Tanda <figure> HTML

Definisi dan penggunaan

<figure> tanda mengatur konten yang terkandung, seperti gambar, grafik, foto, daftar kode, dan sebagainya.

Walaupun <figure> Konten elemen berhubungan dengan konten utama, tetapi posisinya terpisah dari alur konten utama, jika dihapus, tidak boleh mempengaruhi alur dokumen.

Petunjuk:Gunakan <figcaption> elemen Untuk <figure> Menambah judul ke elemen.

Lihat juga:

Panduan Referensi HTML DOM:Objek Figure

Contoh

Contoh 1

Menggunakan elemen <figure> untuk menandai foto dalam dokumen, dan elemen <figcaption> untuk mendefinisikan judul foto:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Gambar 1 - Trulli di wilayah Puglia, Italia.</figcaption>
</figure>

Coba Sendiri

Contoh 2

Menggunakan CSS untuk menata gaya <figure> dan <figcaption>:

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Gambar 1 - Trulli di wilayah Puglia, Italia.</figcaption>
</figure>
</body>
</html>

Coba Sendiri

Atribut Global

<figure> Tanda ini juga mendukung Atribut Global di HTML.

Atribut Acara

<figure> Tanda ini juga mendukung Atribut Acara di HTML.

Pengaturan CSS Standar

Sebagian besar browser akan menampilkan nilai standar berikut ini <figure> Elemen:

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

Coba Sendiri

Dukungan Browser

Angka di tabel menunjukkan versi pertama penggunaan yang mendukung elemen ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0

Keterangan: Tanda <figure> adalah tanda baru di HTML 5.