HTML footer Etiketi Nedir ve Nasıl Kullanılır?

HTML header etiketi bir web sayfasının üst bandını oluştururken (HTML header yazısını görmek için tıklayınız); footer etiketi ise web sayfasının alt bant içeriklerini oluşturur. Örneğin; footer ile lisans ve kullanım şartları, sayfanın amacı veya sayfayı hazırlayan kişinin bilgileri gibi çeşitli içerikler eklenebileceğini gibi herhangi bir medya içeriği veya resim de eklenebilir. Bu tamamen sayfayı tasarlayan kişiye kalmış bir durumdur.

<footer> … </footer> etiketinin kullanımı aşağıdaki gibidir.

<footer> Burada sayfa sonu içerikleri var. </footer>

HTML footer etiketi ile basit bir örnek yapalım. Örneğimizi aşağıdaki gibi olacaktır.

<!DOCTYPE html>
<head>
<title>Welcome!</title>
<meta charset="utf-8">
</head>
<body>
<!-- header elementini ekleyelim. -->
<header>Lorem ipsum...</header>
<p>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.</p>
<!-- footer elementini ekleyelim. -->
<footer>Copyright &copy; Tüm hakları saklıdır. </footer>
</body>
</html>

Yukarıdaki örneğimizi incelediğimizde footer etiketi en alt satıra yazılmıştır. Çünkü bu etiketin kapsam alanındaki içeriği sayfanın en alt satırında bulunacaktır. Tabi ki bu etiketi CSS kullanarak daha güzel bir görünüme kavuşturmak sizin elinizde.

HTML footer 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

instagram logo
twitter logo

Son Eklenen Yazılar

Bir Cevap Yazın

%d blogcu bunu beğendi: