تگ footer در HTML

144

نوشته شده توسط متین برونسی

منتشر شده در 23 می 2021

و آخرین بروزرسانی در 12 جولای 2021

دسته بندی ها:

HTML, فرانت اند

از تگ footer در HTML برای ایجاد یک بخش در سند استفاده می شود.

مثال

<footer>
<p>نویسنده: متین برونسی<br>
<a href="mailto:example@email.com">example@email.com</a></p>
<a href="#">درباره ما</a>
</footer>

تعریف و کاربرد

تگ footer در HTML یک بخش در صفحه را تعریف میکند ، معمولاً این عنصر در پایین ترین بخش وب سایت قرار میگیرد.

محتوا هایی که درون عنصر <footer> قرار میگیرند:

اطلاعات نویسنده
اطلاعات تماس و آدرس
مقالات پیشنهادی
نقشه سایت
لینک ها جهت دسترسی سریع به بخش های مختلف سایت
مهم ترین صفحات و بخش های سایت
و…

نکته: برای شرح اطلاعات تماس در تگ <footer> باید از عنصر <address> استفاده کنید.

توجه: کادر آبی رنگی که آخر صفحات و پست های سایت بابلز لرن مشاهده میکنید فوتر وب سایت ما می باشد.

پشتیبانی مرورگر ها

عنصر
`<footer>`	بله	بله	بله	بله	بله

خواص عمومی

تگ footer از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ footer از رویداد های عمومی در HTML پشتیبانی میکند.

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر footer در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

footer {
  display: block;
}

مثال های بیشتر

در مثال زیر با استفاده از خواص CSS یک سبک اختصاصی به عنصر <footer> داده ایم:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}

.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}

.browser {
background: white;
}

.browser > h2, p {
margin: 4px;
font-size: 90%;
}

footer {
text-align: center;
padding: 3px;
background-color: DarkSalmon;
color: white;
}
</style>
</head>
<body>

<h1>عنصر article و footer به همراه CSS</h1>

<article class="all-browsers">
<h1>محبوب ترین مرورگر ها</h1>
<article class="browser">
<h2>گوگل کروم</h2>
<p>Google Chrome یک مرورگر وب است که توسط Google تولید شده و در سال 2008 منتشر شده است. Chrome امروزه محبوب ترین مرورگر وب جهان است!</p>
</article>
<article class="browser">
<h2>موزیلا فایرفاکس</h2>
<p>Mozilla Firefox یک مرورگر وب منبع باز است که توسط Mozilla ساخته شده است. Firefox از ژانویه 2018 دومین محبوب ترین مرورگر وب است.
</p>
</article>
</article>
<br>
<footer>
<p>تمامی حقوق وب سایت برای حباب ها محفوظ می باشد ، کپی برداری و انتشار مطالب با ذکر لینک منبع مجاز است.<br>
<a href="#">درباره ما</a>
<br>
<a href="#">تماس با ما</a>
</footer>

</body>
</html>