جلسه سی و چهارم: آموزش کامل تگ footer در HTML
به دوره حرفهای آموزشHTML در آوای وب خوش اومدی! تگ <footer> مثل یه امضای باحال برای صفحه وبته که اطلاعات مهم و جذاب مثل کپیرایت، لینکهای شبکههای اجتماعی، یا حتی اطلاعات تماس رو تو خودش جا میده. چه تازهکار باشی و چه حرفهای، این مقاله قراره از صفر تا صد تگ <footer> رو بهت یاد بده؛ از مثالهای ساده و کاربردی گرفته تا ترفندهای پیشرفته برای سئو و دسترسیپذیری.
آنچه در این مقاله میخوانید:
🏷️ تگ <footer> چیه و چه کاربردی داره؟
تگ <footer> یکی از تگهای معنایی HTML5 هست که برای نمایش بخش پایانی یک صفحه یا بخش خاصی از محتوا استفاده میشه.
<footer>
<p>© 1403 آوای وب - تمامی حقوق محفوظ است</p>
</footer>✅ این تگ میتونه در یک صفحه چند بار استفاده بشه، مثلاً:
- برای فوتر کل صفحه
- برای فوتر یک مقاله
- برای فوتر یک بخش خاص
🟢 چرا تگ <footer> مهمه؟
تگ <footer> فقط یه بخش از صفحه نیست؛ امضای حرفهای توی طراحی وبه! این تگ نشوندهنده پایان یک بخش یا کل صفحهست و معمولاً شامل مواردی مثل:
- اطلاعات تماس
- لینکهای کمکی
- کپیرایت
- شبکههای اجتماعی
- فرمهای خبرنامه
گوگل این تگ رو بهعنوان یک تگ معنایی درک میکنه، یعنی متوجه میشه این قسمت مربوط به پایان محتوای صفحهست و اطلاعات خاصی در اون وجود داره.
🧱 ساختار تگ footer: ساده اما خفن!
تگ <footer> یه تگ جفتیه! یعنی باید باز و بسته بشه! کافیه محتوات رو داخلش بذاری! نگاه کن:
<footer> فوتر سایت </footer>با این، یه فوتر میسازی که میتونی با CSS استایل بدی یا با JS پویاش کنی! بهتنهایی یه بلاک سادهست، ولی با محتوا میترکونه! خفن نیست؟
💡 نحوه استفاده از <footer> با مثال
مثال 1: فوتر ساده برای کل سایت
<footer>
<p>© آوای وب</p>
<a href="/about">درباره ما</a>
<a href="/contact">تماس با ما</a>
</footer>مثال 2: فوتر اختصاصی برای یک مقاله
<article>
<h2>تگ header در HTML</h2>
<p>...</p>
<footer>
<p> نویسنده: شهرام نجفی | تاریخ: 5 مرداد </p>
</footer>
</article>📌 فوتر میتونه داخل تگهایی مثل <article> یا <section> هم بیاد.
❓ پرسشهای متداول
آیا میتونم چند تا تگ <footer> توی یه صفحه داشته باشم؟
بله! هر بخش مثل <article> یا کل صفحه میتونه فوتر خاص خودش رو داشته باشه.
آیا تگ <footer> روی سئو تاثیر داره؟
بله، چون معناییه و باعث درک بهتر ساختار توسط موتورهای جستجو میشه.
📝 پروژه عملی: یه فوتر باحال بساز!
حالا وقتشه دست به کد بشی! یه <footer> با کپیرایت، لینکهای ناوبری، و آیکونهای شبکههای اجتماعی بساز. در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.
🏁 جمعبندی
- تگ
<footer>یه ابزار ساده اما قوی برای پایان دادن حرفهای به صفحات وبه. - با استفاده از تگ معنایی، استایل زیبا، و نکات سئو، میتونی یه فوتر بینقص بسازی.
- حالا نوبت توئه! یه فوتر خفن برای سایتت طراحی کن، اگه سوالی داشتی، حتما بپرس!
💬 ایدههات رو فریاد بزن!
تا حالا از <footer> استفاده کردی؟ دلت میخواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟
واسهمون کامنت بذار تیم آوای وب همیشه اینجاست تا با جون و دل جواب بده! ❤️
شهرام نجفی
شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب بهصورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشتهام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG مینویسم و قبل از انتشار در مرورگرهای واقعی تست میکنم. نمونهکارهایم در shahramnajafi.com است.