سربرگ (header)
«سربرگ (header)» بخش معرفی صفحه است. معمولاً عنوان، نویسنده، یا لینک های ناوبری را می آورد. این بخش بالای محتوا می آید و شروع مطلب را مشخص می کند؛ مثل تابلوی اسم کلاس در مدرسه.
تعریف و کاربرد «تگ header»
طبق منبع، «تگ header» ظرف محتوای معرفی یا مجموعه ای از لینک های ناوبری است. معمولاً شامل سرفصل ها، لوگو، یا اطلاعات نویسنده می شود.
نکته: چند «header» در یک سند مجاز است. اما داخل <footer>، <address> یا «header» دیگر قرار نمی گیرد.
نمونه: header داخل مقاله
<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
چه چیزهایی در header می آید؟
- یک یا چند «سرفصل (Heading)»؛ مثل <h1> تا <h6>.
- لوگو یا آیکن شناسنامه سایت.
- اطلاعات نویسنده یا معرفی کوتاه.
برای آشنایی با سرفصل ها به صفحه سرفصل ها (h1–h6) برو. همچنین درباره اطلاعات صفحه در سر (head) بخوان.
نمونه: header برای کل صفحه
<header>
<h1>Main page heading here</h1>
<p>Posted by John Doe</p>
</header>
نمایش پیش فرض در مرورگرها
مرورگرها «header» را به صورت یک بلوک نشان می دهند. یعنی از سطر جدید شروع می شود.
header {
display: block;
}
تمرین گام به گام
- یک <header> ساده بساز. سپس یک <h1> بگذار.
- زیر آن یک پاراگراف معرفی اضافه کن. سپس ذخیره کن.
- در صورت نیاز لینک های ناوبری را بیفزا. سپس تست کن.
جمع بندی سریع
- header برای شروع و معرفی است.
- می تواند چندبار تکرار شود.
- داخل footer و address نمی آید.
- معمولاً عنوان و نویسنده را دارد.
- نمایشش بلوکی است.