HTML5 ile gelen birçok etiketin, kaynak kodun okunmasını ve yorumlanmasını kolaylaştırmak için geldiğini söylemekle başlamak istedim bu yazıma örn: Arama Motoru Örümcekleri.

Figure etiketi de yukarıda bahsedilen etiketler arasında yer alıyor, kod tarayıcı tarafından yorumlandığında, ekranda görsel olarak bu koda ait herhangi bir nesne göremezsiniz yani bir UI'e (User Interface / Kullanıcı Arayüzü) sahip değildir. Figcaption etiketinin durumu ise biraz farklı.

Figure etiketi resim (img), çizim (svg) gibi elemanları belirtmek için kullanılan etikettir, örnek kullanımı için aşağıdaki kodu inceleyebilirsiniz.

1 resim ile kullanım

<figure>
	<img src="resim1.jpg" alt="Resim Açıklaması"/>
</figure>

Örneği incelemek için tıklayın

1'den fazla resim ile kullanım

<figure>
	<img src="resim1.jpg" alt="Resim Açıklaması"/>
	<img src="resim2.jpg" alt="Resim Açıklaması"/>
	<img src="resim3.jpg" alt="Resim Açıklaması"/>
</figure>

Örneği incelemek için tıklayın

Figcaption etiketi <figure> etiketinin başlığını tanımlamamızı sağlar, figure kullanılan bir kodda figcaption kullanmak zorunda değilsiniz, w3c açısından böyle bir mecburiyet yok. Bu etikete css ile rütuşlar yapılarak çok güzel görünümler elde edilebiliyor. Örnek için aşağıdaki kodu inceleyebilirsiniz.

1 resim ile kullanım

<figure>
	<img src="resim1.jpg" alt="Resim Açıklaması"/>
	<figcaption>Buraya fotoğrafla ilgili açıklama gelecek.</figcaption>
</figure>

Örneği incelemek için tıklayın

1'den fazla resim ile kullanım

<figure>
	<img src="resim1.jpg" alt="Resim Açıklaması"/>
	<img src="resim2.jpg" alt="Resim Açıklaması"/>
	<img src="resim3.jpg" alt="Resim Açıklaması"/>
	<figcaption>Buraya resimlerle ilgili açıklama gelecek.</figcaption>
</figure>

Örneği incelemek için tıklayın

Ne tuhaftır ki piyasada en çok kullanılan editörler CKEditor, TinyMCE, jWYSIWYG ve hatta WordPress, Joomla gibi CMS'lerin bile metin editörleri figure ve figcaption etiketlerini hala desteklemiyor. Başka bir HTML5 yazısında görüşmek üzere.