تگ <header> در HTML برای محتوای مقدمه‌ای یا ناوبری (Navigation) استفاده میشه. یعنی هرجایی که می‌خواهی محتوای شروع‌کننده‌ی یک صفحه، یک بخش یا یک مقاله رو بذاری، از <header> استفاده می‌کنی.

مثال خیلی ساده:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>

✅ کجاها میشه <header> استفاده کرد؟

  • بالای کل صفحه (Global Header)
    • مثل هدر سایت که لوگو، نام سایت و منو داره.
  • داخل مقاله (Article)
    • برای عنوان مقاله، نویسنده، تاریخ انتشار.
  • داخل بخش‌ها (Section, Aside, etc.)
    • هدر مخصوص هر بخش برای عنوان یا توضیح مقدمه.

مثال: هدر کل سایت

<header>
  <h1>My Blog</h1>
  <p>Welcome to my blog about cute puppies!</p>
</header>

مثال: هدر مقاله

<article>
  <header>
    <h2>Beagles</h2>
    <p>By Jane Doe - <time datetime="2025-06-28">28 June 2025</time></p>
  </header>
  <p>Beagles are very cute and friendly dogs!</p>
</article>

✅ ویژگی‌های مهم <header>

✅ میتونه شامل چی باشه؟

  • تگ‌های heading مثل <h1> تا <h6>
  • لوگو یا آیکون
  • فرم جستجو
  • اسم نویسنده یا تاریخ
  • منوهای ناوبری

✅ کجا نباید بذاری؟

  • نباید داخل:
    • <footer>
    • <address>
    • یک <header> دیگه قرار بگیره

✅ تعداد استفاده

  • می‌تونی چندتا <header> توی یک صفحه داشته باشی.
    مثلاً یکی برای کل سایت، یکی برای هر مقاله، یکی برای هر بخش مهم.

✅ نکته خیلی مهم: نقش در دسترس‌پذیری (Accessibility)

  • اگر <header> مستقیماً داخل <body> باشه → نقش banner پیدا می‌کنه (مثل هدر کلی سایت)
  • اگر داخل article, section, aside, nav, etc. باشه → دیگه banner نیست و فقط هدر اون بخش محسوب میشه.

✅ قواعد فنی

ویژگیمقدار
محتوای مجازFlow Content (هر محتوای HTML مثل متن، عکس، nav و…)
اجازه داخل چه المنتی باشه؟هر المنتی که Flow Content قبول کنه
نباید داخلش چی باشه؟یک <header> دیگه یا <footer> یا <address>
ARIA Role پیش‌فرضbanner (اگه تو body باشه) یا generic (اگه تو section یا article باشه)
تگ اختیاری؟نه، شروع و پایانش لازمه

✅ چند مثال کامل و واقعی

مثال ۱ – هدر کل سایت

<header>
  <h1>My Website</h1>
  <img src="logo.png" alt="Website Logo">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

مثال ۲ – هدر مقاله

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>Posted on <time datetime="2025-06-28">28 June 2025</time> by Jane Smith</p>
  </header>
  <p>We live on a beautiful planet...</p>
</article>

مثال ۳ – هدر داخل Section

<section>
  <header>
    <h3>Latest News</h3>
  </header>
  <p>Some news content here...</p>
</section>

✅ تفاوت <header> با <head>

  • <head> → شامل اطلاعات متا و تنظیمات صفحه است (مثل عنوان، CSS، اسکریپت‌ها). نمایش داده نمی‌شود.
  • <header> → شامل محتوای دیداری و مقدمه‌ای است که در صفحه نمایش داده می‌شود.

✅ نکات کاربردی

✅ همیشه سعی کن در هدر از تگ‌های معنایی مثل <nav> یا <h1> استفاده کنی. این کمک می‌کنه دسترس‌پذیری سایتت بهتر باشه.

✅ هدر می‌تونه با CSS استایل بشه، مثلاً رنگ، اندازه فونت، جایگذاری عناصر (Flexbox یا Grid).

مثلاً:

header {
  background-color: #007BFF;
  color: white;
  padding: 20px;
}

header nav ul {
  list-style: none;
  display: flex;
  gap: 10px;
}

✨ جمع‌بندی

<header> = محتوای مقدمه‌ای (intro) یا ناوبری

  • می‌تونه در چند جای صفحه باشه (global یا local)
  • نباید تو <footer> یا <header> دیگه باشه
  • کمک بزرگی به دسترس‌پذیری سایت می‌کنه
  • قابل استایل‌دهی کامل با CSS هست