Green Data

header و footer: سربرگ و پابرگ، اما نه فقط برای کل صفحه

تو درس قبل، header و footer رو به‌عنوان دو نمونه از تگ‌های معنایی دیدیم که سربرگ و پابرگ کلی صفحه رو مشخص می‌کردن. تو این درس عمیق‌تر می‌ریم و یه نکته‌ی مهم رو می‌بینیم که خیلی‌ها ازش غافلن: این دو تگ محدود به «کل صفحه» نیستن و می‌تونن داخل بخش‌های کوچیک‌تر هم تکرار بشن.

header چیه؟

<header>
  <h1>فروشگاه کتاب پارسی</h1>
  <nav>
    <a href="/">خانه</a>
    <a href="/books">کتاب‌ها</a>
  </nav>
</header>

تگ header برای محتوای مقدماتی و معرفی‌کننده‌ی یه بخش استفاده می‌شه؛ معمولاً شامل عنوان، لوگو، یا منوی ناوبری مرتبط با همون بخش. وقتی header مستقیم زیر body باشه (مثل مثال بالا)، نقش سربرگ کلی کل صفحه رو داره.

footer چیه؟

<footer>
  <p>تمام حقوق این سایت محفوظ است. © ۱۴۰۳</p>
  <nav>
    <a href="/privacy">حریم خصوصی</a>
    <a href="/terms">قوانین</a>
  </nav>
</footer>

تگ footer برعکس header، معمولاً برای اطلاعات پایانی یه بخش استفاده می‌شه؛ مثل کپی‌رایت، لینک‌های حقوقی، یا اطلاعات تماس. وقتی footer مستقیم زیر body و آخرین بخش صفحه باشه، نقش پابرگ کلی سایت رو داره.

نکته‌ی کلیدی: header و footer محدود به کل صفحه نیستن

اینجا نکته‌ای که خیلی‌ها ازش غافلن: header و footer می‌تونن داخل هر بخش معنایی دیگه‌ای هم (مثل article یا section که تو درس‌های بعد می‌بینیم) به‌طور مستقل تکرار بشن. مثلاً یه پست وبلاگ می‌تونه header مخصوص خودش رو داشته باشه که شامل عنوان و تاریخ انتشار همون پسته، کاملاً جدا از header کلی سایت:

<body>
  <header>
    <h1>وبلاگ فناوری</h1>
  </header>

  <article>
    <header>
      <h2>آموزش HTML5 برای مبتدیان</h2>
      <p>تاریخ انتشار: ۱۵ فروردین ۱۴۰۳</p>
    </header>
    <p>متن کامل مقاله...</p>
  </article>
</body>

تو این مثال، دو تا header کاملاً جدا داریم: اولی سربرگ کلی سایت (با اسم وبلاگ)، و دومی سربرگ مخصوص همون مقاله‌ی خاص (با عنوان و تاریخ انتشار همون مقاله). این کار کاملاً معتبر و درسته؛ header یه رابطه‌ی «سربرگ برای نزدیک‌ترین والد معناییش» داره، نه فقط «سربرگ کل صفحه».

همین قانون برای footer هم صادقه

<article>
  <h2>آموزش HTML5 برای مبتدیان</h2>
  <p>متن کامل مقاله...</p>
  <footer>
    <p>نویسنده: علی محمدی</p>
  </footer>
</article>

تو این مثال، این footer، پابرگ مخصوص همون article هست (اطلاعات نویسنده)، نه پابرگ کلی سایت. یه صفحه می‌تونه چندین footer مختلف داشته باشه، هرکدوم مرتبط با نزدیک‌ترین بخش معنایی‌ای که توش قرار گرفتن.

چند header یا footer در یک صفحه مجازه؟

بله، کاملاً مجازه. تنها محدودیتش اینه که یه header یا footer نباید داخل یه header یا footer دیگه تودرتو بشه (یعنی header داخل header یا footer داخل footer معنا نداره)، اما می‌تونن داخل بخش‌های مختلف صفحه (مثل چند article متفاوت) هرکدوم مستقل تکرار بشن.

چه محتوایی معمولاً داخل header قرار می‌گیره؟

عنوان اصلی (h1 تا h6)
لوگو (معمولاً یه img داخل یه لینک)
منوی ناوبری (nav)
فیلد جستجو

چه محتوایی معمولاً داخل footer قرار می‌گیره؟

اطلاعات کپی‌رایت
لینک‌های حقوقی (حریم خصوصی، قوانین)
اطلاعات تماس یا شبکه‌های اجتماعی
نویسنده یا تاریخ انتشار (وقتی داخل article باشه)

یه مثال کامل و واقعی

<body>
  <header>
    <h1>مجله‌ی آشپزی خانگی</h1>
    <nav>
      <a href="/">خانه</a>
      <a href="/recipes">دستور پخت‌ها</a>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>طرز تهیه قورمه سبزی</h2>
        <p>نویسنده: مریم رضایی</p>
      </header>
      <p>مواد لازم و طرز تهیه...</p>
      <footer>
        <p>این مقاله ۵ بار به اشتراک گذاشته شده است.</p>
      </footer>
    </article>
  </main>

  <footer>
    <p>تمام حقوق محفوظ است © ۱۴۰۳</p>
  </footer>
</body>

تو این مثال، سه تا بخش مجزا داریم: header کلی سایت (بالای صفحه)، header مخصوص همون مقاله (داخل article)، و footer مخصوص همون مقاله (هم داخل article)، و در نهایت footer کلی سایت (پایین صفحه). هرکدوم دقیقاً مربوط به نزدیک‌ترین والد معنایی خودشونه.

چند اشتباه رایج

تصور اینکه فقط می‌شه یه header و یه footer در کل صفحه داشت.
استفاده از div به‌جای header یا footer برای بخش‌های داخلی مثل عنوان و اطلاعات یه article خاص.
گذاشتن header داخل header دیگه (تودرتویی نامعتبر).

بهترین روش‌ها

برای هر بخش مستقل (مثل هر article) که نیاز به عنوان یا اطلاعات پایانی مخصوص خودش داره، از header و footer محلی استفاده کن.
header کلی صفحه رو مستقیم زیر body، و footer کلی رو در انتهای body قرار بده.

نکته‌ی سئو

استفاده‌ی درست از header داخل هر article (مثلاً شامل عنوان و تاریخ انتشار) به گوگل کمک می‌کند اطلاعات فراداده‌ی هر مقاله را به‌طور مجزا و دقیق‌تر تشخیص دهد، به‌خصوص در صفحاتی با چند مقاله یا پست مختلف.

نکته‌ی دسترسی‌پذیری

وقتی چند header یا footer در صفحه وجود دارد، صفحه‌خوان‌ها معمولاً بر اساس نزدیک‌ترین بخش معنایی والد (مثل article یا section)، این‌ها را به‌عنوان نقاط عطف محلی (Landmark) همان بخش معرفی می‌کنند، نه کل صفحه؛ این تفکیک برای پیمایش دقیق‌تر صفحات پیچیده مفید است.

جمع‌بندی

تگ‌های header و footer محدود به سربرگ و پابرگ کلی صفحه نیستند و می‌توانند به‌طور مستقل داخل هر بخش معنایی دیگری مثل article یا section هم تکرار شوند. رابطه‌ی این دو تگ همیشه با نزدیک‌ترین والد معنایی‌شان تعیین می‌شود، نه لزوماً با کل سند.

عناصر header و footer