HTMLالوسم <footer>

تعريفه

المحتوى الذي يوضع بداخل الوسم <footer> </footer> يتم عرضه على سطر منفرد و لكن هذا ليس الهدف من استخدامه. بشكل عام إسم المؤلف, معلومات التواصل معه, حقوق النشر و الروابط المتعلقة بالمحتوى يتم وضعها بداخله.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <footer>.

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بوضع المحتوى الذي يظهر في آخر الصفحة بداخل وسم <footer>.

<article>
    <h1>Becomming a Web designer</h1>
    <p>First thing, you have to study how to think like a programmer,
    so you have to study something called Algorithms. Then you should
    learn HTML, CSS, Javascript in the same order.</p>
    <p>In general, you need about a year to study all the basics and
    to do some projects.</p>
    <footer>
        <p>Copyright 2014-2020. All Rights Reserved.</p>
        <p><a href="mailto:test@example.com">Mhamad Harmush</a></p>
    </footer>
</article>

في المثال التالي قمنا بتحسين تصميم الصفحة بواسطة كود CSS و يفترض أن تركز فقط على أسلوب إظهار محتوى الوسم <footer> بشكل متميز عن باقي المحتوى.

footer {
    background: #444;
    color: white;
    text-align: center;
    padding: 10px 15px;
}

footer a {
    color: cadetblue;
    text-decoration: none;
}

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

footer {
    display: block;
}

نصائح و ملاحظات

أنت لست مجبر على استخدام هذا الوسم لأنه لا يعطيك أي ميزة إضافية عن التي يقدمها لك الوسم <div> و هذا الأمر سبق و أشرنا إليه.

فائدة هذا الوسم هي فقط جعل كود الصفحة أسهل في القراءة قليلاً بالنسبة للمصمم حتى لا يكون أغلبها عبارة عن <div> بداخل <div> بداخل <div> إلخ..
هناك فائدة أخرى تلاحظها حين تستغل إسم الوسم <footer> في التصميم و هي أنه يجعلك تستخدم أسماء كلاسات CSS أقل.