💡 تگ <header> چیست؟

تگ <header> یکی از تگ‌های معنایی (semantic) در HTML5 است که بخش بالایی (سربرگ) یک صفحه یا یک بخش از صفحه را مشخص می‌کند. این تگ معمولاً شامل:

  • لوگو
  • نام سایت یا عنوان صفحه
  • منوهای ناوبری (navigation)
  • جستجوگر (search bar)
  • یا هر محتوای معرفی‌کننده بخش اصلی

📌 تفاوت <header> با <head>چیست ؟

خیلی از ما که تازه شروع به کدنویسی کردیم معمولا هدر و هد سایت را با هم اشتباه میگیریم اگر بخواهم بصورت خلاصه توضیح بدهم در

<head> هد سایت ما معمولا متا دیتا هایی را قرار میدهیم که برامون اهمیت دارد موتورهای جستجو آنها را بخونند یا مربوط به بخش هایی از سایتمان میشود که مربوط به برنامه نویسی میشود مثلا

  • تعریف زبان صفحه
  • ورژن زبان HTML ما چیست
  • لینک دادن کد های css – java در حالتی که این کدها بصورت اکسترنال هستند
  • تعریف استایل صفحه بصورت اینترنال

و موارد از این قبیل که این دیتا ها در صفحه دیده نمیشوند و بصورت مستقیم برای کاربر قابل دیدن نیست ولی نتیجه آنها را بصورت غیر مستقیم میبیند مثلا اعمال شدن استایل های مورد نظر ما در صفحه

<header> : اما از طرف دیگر هدر تگی است که در داخل تگ بادی صفحه قرار میگیرد و تمام محتویات درون آن برای کاربران قابل مشاهده است و بسته به نوع طراحی صفحه امکان وجود یک هدر تنها در بالای صفحه و یا چند هدر در یک صفحه وجود خواهد داشت.

مثلاً:

<head>
  <title>My Website</title>
</head>

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

🏷 خصوصیات تگ <header>

✅تگ هدر در وب سایت ها از لحاظ معنایی اهمیت دارد . وقتی ما در صفحه از این تگ استفاده میکنیم باعث میشود موتور های جستجو بهتر محتوای صفحه مارا از لحاظ معنایی درک کنند.

✅ استفاده از تگ هدر باعث میشود screen reader ها یا دستگاه های کمک خوان بسیار قابل فهم تر باشد و این هم برای افرادی که دارای معلولیت هستند و هم برای موتورهای جستجو خوب است و رتبه ما را از نظر موتورهای جستجو هم ارتقا میدهد.

✅ استفاده از این تگ ها باعث میشود کدهای ما تمیز تر و قابل نگهداری تر باشد و ساختار صفحه برای ما مثل یک کتاب با فهرست و فصل بندی باشد و بهتر بتوانیم کدهای خود را مدیریت کنیم .

سوال دیگری که ممکن است برای تازه کار پیش بیاد این است که آیا فقط باید یک تگ هدر صفحه داشته باشیم یا همزمان در یک صفحه میشود چند تگ هدر استفاده کرد.

✅ چند بار استفاده از تگ هدر در سایت ها مجاز است ؟

جواب به این سوال کمی سخت است – اگر به درستی از تگ هدر در صفحه استفاده کنید شما هر چند بار که بخواهید و لازم باشد میتوانید از این تگ در یک صفحه استفاده کنید اما اگر به قواعد برنامه نویسی تسلط کافی ندارید بهتر است فقط یک بار در در ابتدای تگ بادی صفحه بصورت گلوبال استفاده کنید.

اما من در اینجا سعی میکنم تمام قسمت هایی که شما میتوانید از این تگ استفاده کنید و قسمت هایی که نباید از این تگ استفاده کنید را براتون بصورت خلاصه بگم تا یک دید کلی به این موضع داشته باشید .

✅ توضیح جامع تگ <header> در پنج مکان اصلی

✅ 1. داخل <body>

از این تگ در داخل تگ بادی صفحه میتوانیم استفاده کنیم – معمولا در شرایطی که میخواهیم یک هدر اصلی برای کل سایت بسازیم که در تمام صفحات سایت تکرار شود این تگ را در این بخش استفاده میکنم و در وردپرس این هدر در فایل header.php ساخته میشود.

در این حالت معمولا این محتوا ها در داخل این تگ استفاده میشود:

1- لوگو یا نام سایت

2- منو ناوبری اصلی یا navigation

3- فرم جستجو

4- آیکون شبکه های اجتماعی

5- لینک ورود / ثبت نام

6- شعار سایت

✔ مثال:

<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#">خانه</a></li>
        <li><a href="#">محصولات</a></li>
      </ul>
    </nav>
    <form>
      <input type="text" placeholder="جستجو...">
      <button>Search</button>
    </form>
  </header>
</body>

✅ 2. داخل <main>

گاهی اوقات بعضی از صفحه ها نیاز دارند که محتوای اصلی شان یک هدر جداگانه داشته باشدمثلا صفحه اصلی که شعار سایت را نشان میدهد یا زمانی که میخواهیم عنوان صفحه با یک توضیح کوتاه و یک دکمه کال تو اکشن داشته باشیماز این مدل تگ استفاده میکنیم.

همانطور که گفتیم در اکثر موارد محتوای این نوع تگ ها حاوی موارد زیر میشود:

  • عنوان اصلی محتوای صفحه
  • اسلوگان (شعار) یا خلاصه توضیحات
  • دکمه‌های CTA (مثل ثبت‌نام، خرید)

ولی به خاطر داشته باشید که استفاده از این نوع تگ ها زمانی پیشنهاد میشود که محتوای صفحه به عنوان یا معرفی نیاز داشته باشد که معمولا در سایت های شرکتی یا صفحه لندینگ خیلی رایج است.

✔ مثال:

<main>
  <header>
    <h1>به سایت ما خوش آمدید!</h1>
    <p>ما بهترین خدمات طراحی وب را ارائه می‌دهیم.</p>
    <a href="#" class="cta-button">همین حالا شروع کنید</a>
  </header>
  <section>
    <h2>خدمات ما</h2>
    <p>...</p>
  </section>
</main>

✅ 3. داخل <article>

در داخل مقالات به دلیل اینکه هر مقاله یا پست وبلاگ یک هویت مستقل دارد میشود از تگ هدر برای مشخص کردن عنوان مقاله از این تگ استفاده کرد . در این حالت معمولا این موارد در داخل این تگ آورده میشود:

  • عنوان مقاله
  • نویسنده
  • تاریخ انتشار
  • دسته‌بندی یا برچسب‌ها
  • تصویر شاخص (thumbnail)

استفاده از تگ هدر در این حالت از دو منظر دارای اهمیت دارد و میتواند برای مفید باشد:

  • به سئو کمک می‌کنه → موتورهای جستجو بهتر متوجه محتوای مقاله می‌شن.
  • مفیده برای Screen Reader ها (افراد کم‌بینا یا نابینا).

✔ مثال:

<article>
  <header>
    <h2>چرا HTML5 مهم است؟</h2>
    <p>نویسنده: علی | تاریخ: 1403/02/15</p>
  </header>
  <p>HTML5 نسل جدید زبان نشانه‌گذاری وب است...</p>
</article>

✅ 4. داخل <section>

از آنجایی که هر بخش از سکشن ها میتونه موضوع خاصی داشته باشد هدر ها در این حالت به ما کمک میکنه تا اون بخش بهتر شناخته بشه و باعث نظم و معنای بیشتر در کد میشود.

در این حالت معمولا داخل تگ هدر

  • عنوان بخش
  • توضیح کوتاه درباره اون بخش
  • آیکون یا تصویر کوچک (مثلاً آیکون خدمات)

قرار داده میشود. در این حالت هدر مثل عنوان فصل تو کتاب عمل میکنه و چون ساختار محتوا را واضح تر میکند از منظر سئو هم برای سایت ما مفید است.

<section>
  <header>
    <h2>خدمات ما</h2>
    <p>ما خدمات طراحی سایت، سئو و تولید محتوا ارائه می‌دهیم.</p>
  </header>
  <p>اطلاعات بیشتر درباره هر خدمت...</p>
</section>

✅ 5. داخل <aside>

<aside> ها در وب سایت ها معمولا شامل ساید بار سایت – تبلیغات – باکس های پیشنهاد ویژه و مطالب مرتبط میشوند . استفاده از هدر در این بخش هم به کاربر کمک میکند که سریع بفهمد محتوای این بخش ساید بار چیست و هم به دسترسی پذیری و سئو سایت کمک میکند.

معمولا هدر ها در این بخش شامل موارد زیر میشوند:

  • عنوان محتوای جانبی
  • توضیحات کوتاه
  • آیکون یا تصویر کوچک

✔ مثال:

<aside>
  <header>
    <h3>پیشنهاد ویژه</h3>
  </header>
  <p>همین امروز 20% تخفیف بگیرید!</p>
</aside>

✅ تگ <header> کجا نباید استفاده شود؟

تگ <header> معنایش آغاز کردن یا معرفی کردن است. مثل جلد یک کتاب یا عنوان یک فصل. پس نمی‌شود هرجا استفاده‌اش کرد. مثلاً نباید در جایگاهی بیاید که معنا و نقشش پایان‌دهنده یا محتوای تکمیلی است. طبق این فلسفه استفاده از این تگ در حالت های زیر مجاز نیست:

تگ فوتر از لحاظ معنایی به معنای پایان بخش است پس استفاده تگ هدر در این بخش از لحاظ معناییمشکل ایجاد میکند و مثل این است که در انتهای یک کتاب دوباره جلد یا عنوان کتاب را بیاوریم:

<footer>
  <header>
    <h2>Title</h2>
  </header>
</footer>

⛔ نباید داخل <address> باشد

تگ ادرس مربوط به نوشتن اطلاعات تماس ایمیل یا آدرس مکانی است و آوردن تگ هدر در این بخش از لحاظ معنایی درست نیست.

    مثلاً این اشتباه است:

    <address>
      <header>
        <h3>تماس با ما</h3>
      </header>
      تهران، خیابان ...
    </address>

    ⛔ نباید header داخل header باشد

    آوردن تگ هدر در داخل یک تگ هدر دیگر از لحاظ معنایی مشکل آفرین است و مثل این میماند که شما جلد کتاب را شما دوباره در جلد کتاب دیگری قرار بدهی.

    مثلاً این اشتباه است:

    <header>
      <header>
        <h1>عنوان سایت</h1>
      </header>
    </header>

    🎨 استایل‌دهی <header> با CSS

    هیچ استایل پیش‌فرض خاصی برای هدر وجود ندارد و ما باید خودمان با کد های سی اس اس و جاوا اسکریپت استایل مورد نظر خودمان را به هدر بدهیم..

    رنگ و فاصله

    header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

    منو افقی داخل هدر

    header nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

header nav a {
  color: #fff;
  text-decoration: none;
}
header nav a:hover {
  color: yellow;
}

    ✅ تفاوت <header> و <nav>

    • <header> یک بلوک بالایی است → می‌تواند حاوی لوگو، nav و چیزهای دیگر باشد.
    • <nav> فقط مخصوص لینک‌های ناوبری است.

    مثلاً:

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

    ⛔ اشتباه رایج

    ❌ قرار دادن محتوای خیلی زیاد و unrelated در <header>.
    ✅ سعی کنید محتوای هدر ها فقط محتوای معرف یا کمک‌کننده به ناوبری یا توضیح بخش باشد.

    🌍 مرورگرها و <header>

    • تمام مرورگرهای مدرن از <header> پشتیبانی می‌کنند.
    • در مرورگرهای خیلی قدیمی (مثلاً IE8 و پایین) تگ معنایی را نمی‌شناختند و باید CSS می‌گرفت تا نمایش داده شود. امروزه دیگر مشکلی نیست.

    ✅ جمع‌بندی

    تگ <header>:

    • یک بلوک معنایی است.
    • می‌تواند در ابتدای کل صفحه یا هر بخش تکرار شود.
    • شامل لوگو، nav، عنوان و محتوای معرفی‌کننده است.
    • به SEO، دسترس‌پذیری و تمیزی کد کمک می‌کند.

    مثال نهایی یک هدر

    برای ساختن یک هدر حرفه ای برای سایت خودمان که در اینجا منظورمان هدر گلوبال هست ما نیاز به تسلط به یک سری کدهای HTML – CSS – JavaScript داریم من در این مثال سعی میکنم تمام این کد ها را نام ببرم و بگم کجا این کد ازش استفاده شده و در نهایت هم بگم چطور در وردپرس آنها را باید در جای مناسب قرار داد تا به نتیجه دلخواه برسیم برای اینکه از کل این روند آگاه بشید به مقاله چطور یک هدر حرفه ای در وردپرس بسازیم یک سر بزنید.

    <!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8" />
  <title>My Website</title>
  <style>
    body {
      margin: 0;
      font-family: sans-serif;
    }
    header {
      background-color: #222;
      color: #fff;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    header nav ul {
      list-style: none;
      display: flex;
      gap: 20px;
      margin: 0;
      padding: 0;
    }
    header nav a {
      color: #fff;
      text-decoration: none;
    }
    header nav a:hover {
      color: #ff0;
    }
  </style>
</head>
<body>
  <header>
    <h1>MySite</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p>محتوای صفحه...</p>
  </main>
</body>
</html>