HTMLالوسم <header>

تعريفه

المحتوى الذي يوضع بداخل الوسم <header> </header> يتم عرضه على سطر منفرد و لكن هذا ليس الهدف من استخدامه. بشكل عام المحتوى الذي يتم عرضه في أعلى أقسام الموقع أو في أعلى كل صفحات الموقع و التي قد تحتوي قائمة علوية، شعار الموقع، زر بحث إلخ.. يمكن وضعه بداخله.

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

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

خصائصه

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

إستخدامه

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

<header>
    <h1>HTML Basics</h1>
    <p>By Mhamad Harmush | 3 hours ago</p>
</header>

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

header {
    background: #d4d4d4;
    padding: 10px;
}
header h1 {
    color: #fc5451;
}
header p {
    color: #333;
}

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

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

header {
    display: block;
}

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

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

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

يمكنك وضع <header> بداخل <header> إذا أردت, و لكن لا تضع <header> بداخل <footer> أو بداخل <address>.