Figure ve figcaption

<figure> ve <figcaption> ile görsellere başlık eklemeyi öğrenirsin.

figure öğesi

<figure> öğesi, bir içeriği başlığıyla birlikte gruplamak için kullanılır. İçine görsel, video, kod parçası ya da alıntı koyabilirsin. Önemli olan: içerik kendine yeten bir birimdir, çevresindeki metne bağımlı değildir.

Örneğin bir blog yazısındaki bir görsel ve onun açıklaması figure içine alınabilir. Sayfa düzeninde bu bir bütün olarak taşınır; başka yere konduğunda da anlamını yitirmez.

figcaption ile başlık

<figcaption> öğesi figure içine bir başlık ekler. Figure içinde yalnızca bir figcaption olur; genelde görselin hemen altına ya da üstüne yazılır.

Başlık görselin ne anlattığını kısaça söyler: Yaylada sabah saatleri gibi. Bu metin görselden ayrı bir paragraf olarak değil, görselle bağlantılı olarak okunur.

Uygulama Başlıklı görsel oluştur

Body içine bir <figure> öğesi ekle. İçinde bir <img> (src ve alt ile) ve bir <figcaption> (kısa açıklama metniyle) olsun.

Örnek çözümü göster

<body>
  <figure>
    <img src="https://example.com/sanat/heykel.jpg" alt="Bronz heykel">
    <figcaption>Anadolu medeniyetlerinden bronz heykel</figcaption>
  </figure>
</body>

Kendini test et

figure ve figcaption yerleşimi için hangisi doğrudur?
- figcaption, img'yi doğrudan sarmalar
- figcaption, figure'ün dışında durur
- figure, img ve figcaption'ı birlikte sarar
- img, figure'ün dışında durur
Cevabı göster

figure, img ve figcaption'ı birlikte sarar — Doğru. figure hem img'yi hem figcaption'ı bir bütün olarak sarar.
Öğeyi göreviyle eşleştir

figure

İçeriği başlığıyla gruplar
figcaption

Başlığı taşır
img

Görseli yükler
p

Metin paragrafı

figcaption etiketini kapat

<figcaption>Anadolu medeniyetlerinden bronz heykel____

Cevabı göster

<figcaption>Anadolu medeniyetlerinden bronz heykel</figcaption>

Sıradaki ders: Ses ve video

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler