HTML figcaption Etiketi Nedir ve Nasıl Kullanılır?
HTML figure yazımızda bir container oluşturulup, bu oluşturulan alana external & internal olarak; resim, text, diğer elementleri kısaca içerik ekleyebiliyorduk. HTML Figure yazımıza buraya tıklayarak ulaşabilirsiniz. HTML figcaption etiketi ise bu figure etiketi kapsamı içerisindeki elemanlara açıklama eklemek için kullanılan bir etikettir..
<figcaption> … </figcaption> elementinin kullanımı aşağıdaki gibidir.
<figcaption> Burasi bir açıklama alanıdırr! </figcaption>
HTML figure elementindeki örneğimize figcaption elementini de ekleyerek düzenleyelim. Yeni örneğimiz aşağıdaki gibi olacaktır.
<!DOCTYPE html> <head> <title>Welcome!</title> <meta charset="utf-8"> </head> <body> <figure> <!-- figcaption ile text alanina bir aciklama ekledik. --> <figcaption>This is poem!</figcaption> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <br> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <br> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse <br> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <br> proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br> <!-- figcaption ile resme bir aciklama ekledik. --> <figcaption>He is Rocky!</figcaption> <img src="rocky.jpg" alt="rocky" /> </figure> </body> </html>
Yukarıdaki örneğimize ait olan ekran çıktısını alalım.
Yukarıdaki örneğimizde de görüldüğü üzere; figcaption ile yazdığımız açıklama satırlarımız belirttiğimiz alanlara konumlanmıştır.
HTML figcaption etiketi konusunu bu yazımızda gördük. Konu ile ilgili soru, görüş ya da fikirlerinizi aşağıda bulunan yorumlar kısmı ile bizlere ulaştırabilirsiniz. Aşağıdaki linke tıklayarak HTML ile ilgili diğer yazılarımıza da ulaşabilirsiniz. Ayrıca Instagram ve Twitter linklerine de tıklayarak bizi Instagram ve Twitter üzerinden takip ederek destek olabilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/html/
Sosyal Medya Hesaplarımız
