HTML <figure> etiketi

Tanım ve Kullanım

<figure> etiketi, illüstrasyonlar, grafikler, fotoğraflar, kod listeleri gibi içeriği özelleştiren içerikleri tanımlar.

Although <figure> Elemanın içeriği ana içeriğe ilgilidir, ancak它的位置独立于主要内容流，如果删除它，不应影响文档流。

İpucu:Kullanın <figcaption> elementi için <figure> Eleman başlık ekler.

Ayrıca bakınız:

HTML DOM Referans Kılavuzu:Figure nesnesi

Örnek

Örnek 1

<figure> elementini belgelerdeki fotoğrafları işaretlemek için, <figcaption> elementini fotoğrafın başlığı olarak tanımlamak için kullanın:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Şekil 1 - İtalya Puglia bölgesindeki Trulli.</figcaption>
</figure>

Kendi Kendine Deneyin

Örnek 2

CSS ile <figure> ve <figcaption> stillerini ayarlayın:

<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>Şekil 1 - İtalya Puglia bölgesindeki Trulli.</figcaption>
</figure>
</body>
</html>

Kendi Kendine Deneyin

Genel Özellikler

<figure> Bu etiketler ayrıca HTML'deki genel özellikler.

olay özelliklerini destekler

<figure> Bu etiketler ayrıca HTML'deki olay özellikleri.

Varsayılan CSS Ayarları

Çoğu tarayıcı aşağıdaki varsayılan değerleri kullanarak görüntüleyecektir <figure> Element:

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

Kendi Kendine Deneyin

Tarayıcı Desteği

Tablo içindeki numaralar, bu özelliği ilk tam olarak destekleyen tarayıcı sürümünü belirtir.

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

Açıklama: <figure> etiketi HTML 5'teki yeni bir etikettir.