وثائق HTML قابلة للتشغيل: وسم header

Q: ما الفرق بين head وheader في HTML؟

هو الجزء غير المرئي من المستند الذي يحتوي على ووسوم وروابط ملفات التنسيق، ويوجد منه واحد بالضبط. أما فمحتوى ظاهر داخل ، ويمكن أن يكون في الصفحة عدة منه.

Q: هل يمكن أن يكون في الصفحة أكثر من عنصر header؟

نعم. عادةً يكون للصفحة ترويسة موقع واحدة، ويمكن لكل أو أن يملك خاصًا لعنوانه ومعلوماته. وحدها الترويسة غير الموجودة داخل article أو aside أو main أو nav أو section تُعد شريط الصفحة (banner) لقارئات الشاشة.

Q: كيف أجعل الترويسة تبقى في الأعلى عند التمرير؟

أعطها position: sticky; top: 0; مع لون خلفية وz-index، كي يتمرر المحتوى تحتها. لا يعمل sticky إلا ما دام أب الترويسة أطول منها، والجد الذي يحمل overflow: hidden يمنعها من الالتصاق بالصفحة.

كيف تنشئ ترويسة في HTML

أحط أعلى صفحتك (الشعار، اسم الموقع، القائمة الرئيسية) بعنصر <header>. هو صندوق كتلي بلا مظهر افتراضي، فتحوّله بضعة أسطر CSS إلى شريط:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site header</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    .site-header {
      display: flex; align-items: center; gap: 16px;
      padding: 12px 20px; background: #111827; color: #fff;
    }
    .logo { font-weight: 700; font-size: 20px; margin-inline-end: auto; }
    .site-header a { color: #e5e7eb; text-decoration: none; }
    .site-header a:hover { color: #fff; text-decoration: underline; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="logo">Acme</div>
    <nav>
      <a href="#">Products</a>
      <a href="#">Pricing</a>
      <a href="#">Blog</a>
    </nav>
    <a class="cta" href="#">Sign up</a>
  </header>
  <main style="padding: 20px;">
    <h1>Welcome</h1>
    <p>The page content starts here.</p>
  </main>
</body>
</html>

margin-inline-end: auto على الشعار تدفع القائمة والزر إلى الطرف الآخر من الشريط. احذف العنصر <style> وتبقى لديك ترويسة: فالوسم هو ما يجعلها ترويسة، لا الخلفية الداكنة.

ثلاثة أسماء متشابهة في النطق وتؤدي وظائف مختلفة:

العنصر	أين	ظاهر	العدد
`<head>`	مباشرة داخل `<html>`، قبل `<body>`	لا: يحتوي على `<title>` و`<meta>` و`<link>`	واحد بالضبط
`<header>`	داخل `<body>`	نعم: المحتوى التمهيدي للصفحة أو القسم	أي عدد
`<h1>` إلى `<h6>`	في أي مكان داخل `<body>`	نعم: عنوان	أي عدد

العنصر <head> أدناه يحدد عنوان الصفحة الذي يعرضه المتصفح في تبويبه. وكل ما تراه في المعاينة يأتي من <body>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>This text is in the head</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <header style="border: 2px solid #2563eb; padding: 0 12px;">
    <h1>This h1 is inside a header</h1>
    <p>The header is visible content.</p>
  </header>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title from the head: ' + document.title;
  </script>
</body>
</html>

الترويسة تحتوي غالبًا على عنوان، لكن ذلك ليس إلزاميًا، والعنوان لا يحتاج إلى ترويسة حوله.

الترويسات داخل المقالات

<header> يقدّم أقرب مقال أو قسم إليه، لا الصفحة وحدها. قائمة تدوينات لكل منها ترويستها الخاصة صالحة وشائعة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article headers</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    article header { border-bottom: 1px solid #e5e7eb; }
    article h2 { margin: 12px 0 4px; }
    .meta { color: #6b7280; font-size: 14px; margin: 0 0 10px; }
  </style>
</head>
<body>
  <article>
    <header>
      <h2>Why tabs beat spaces</h2>
      <p class="meta">By Sam, <time datetime="2026-09-20">Sep 20</time></p>
    </header>
    <p>A short argument.</p>
  </article>
  <article>
    <header>
      <h2>Why spaces beat tabs</h2>
      <p class="meta">By Lee, <time datetime="2026-09-22">Sep 22</time></p>
    </header>
    <p>A shorter reply.</p>
  </article>
</body>
</html>

بالنسبة لقارئات الشاشة، وحدها الترويسة على مستوى الصفحة (غير الموجودة داخل article أو aside أو main أو nav أو section) تصبح معلم banner. ترويسات المقالات مجموعات عادية، فلا ينتهي بك الأمر بعدة معالم banner.

الترويسة الثابتة (Sticky)

position: sticky تُبقي الترويسة في الأعلى بينما يتمرر المحتوى تحتها. مرّر داخل الصندوق أدناه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .viewport { height: 220px; overflow-y: auto; border: 2px solid #e5e7eb; }
    header {
      position: sticky; top: 0; z-index: 1;
      background: #2563eb; color: #fff; padding: 10px 14px; font-weight: 600;
    }
    .content p { margin: 0; padding: 14px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="viewport">
    <header>I stay at the top</header>
    <div class="content">
      <p>Row 1</p><p>Row 2</p><p>Row 3</p><p>Row 4</p>
      <p>Row 5</p><p>Row 6</p><p>Row 7</p><p>Row 8</p>
    </div>
  </div>
</body>
</html>

ثلاثة تفاصيل تجعلها تعمل: top: 0 (لا يفعل sticky شيئًا من دون إزاحة)، ولون خلفية (وإلا ظهرت الصفوف من خلالها)، وz-index كي لا يُرسم المحتوى المموضع فوقها. في صفحة حقيقية يكون صندوق التمرير هو الصفحة نفسها، فتوضع الترويسة مباشرة في <body>.

الترويسة التي تحمل position: fixed تبقى في مكانها أيضًا، لكنها تخرج من تدفق الصفحة، فينزلق المحتوى تحتها ويحتاج إلى حشو في الأعلى. أما sticky فتحتفظ بمساحتها في التخطيط.

ما الذي يوضع في الترويسة

يمكن أن تحتوي الترويسة على أي محتوى تقريبًا: عناوين، صورة شعار، <nav>، نموذج بحث، زر. لكنها لا يمكن أن تحتوي على <header> آخر أو على <footer>، ولا يمكن أن تقع داخل <footer> أو <address> أو <header> آخر.

<header>
  <a href="/"><img src="logo.svg" alt="Acme home"></a>
  <nav aria-label="Main">...</nav>
  <form role="search">...</form>
</header>

حين يكون الشعار رابطًا إلى الصفحة الرئيسية، يجب أن يقول نص alt الخاص به إلى أين يذهب الرابط («Acme home»)، لأن هذا ما يعلنه قارئ الشاشة.

أخطاء شائعة

الخلط بين <header> و<head>. البيانات الوصفية توضع في <head>، والمحتوى الظاهر لا يوضع فيه أبدًا.
استخدام <header> لكل عنوان. العنوان وحده لا يحتاج إلى غلاف ترويسة. استخدم <header> حين توجد مجموعة من المحتوى التمهيدي.
ترويسة ثابتة بلا خلفية. يظهر نص الصفحة وهو يتمرر من خلالها. اضبط background.
ترويسة sticky لا تلتصق. الجد الذي يحمل overflow: hidden أو overflow: auto يصبح صندوق التمرير لـ sticky، فتلتصق الترويسة داخل ذلك الصندوق (أو لا تلتصق أبدًا). افحص العناصر الأجداد.
وضع قائمة الموقع في <div> داخل الترويسة. استخدم <nav> كي يستطيع مستخدمو قارئات الشاشة القفز إليها.

الأسئلة الشائعة

ما هو وسم header في HTML؟

<header> عنصر دلالي للمحتوى التمهيدي: شعار الموقع وقائمته أعلى الصفحة، أو العنوان واسم الكاتب أعلى المقال. هو صندوق كتلي عادي بلا تنسيق افتراضي.

ما الفرق بين head وheader في HTML؟

<head> هو الجزء غير المرئي من المستند الذي يحتوي على <title> ووسوم <meta> وروابط ملفات التنسيق، ويوجد منه واحد بالضبط. أما <header> فمحتوى ظاهر داخل <body>، ويمكن أن يكون في الصفحة عدة منه.

هل يمكن أن يكون في الصفحة أكثر من عنصر header؟

نعم. عادةً يكون للصفحة ترويسة موقع واحدة، ويمكن لكل <article> أو <section> أن يملك <header> خاصًا لعنوانه ومعلوماته. وحدها الترويسة غير الموجودة داخل article أو aside أو main أو nav أو section تُعد شريط الصفحة (banner) لقارئات الشاشة.

هل يوضع nav داخل header؟

يمكن ذلك، وغالبًا ما يحدث حين تكون القائمة الرئيسية أعلى الصفحة. ووضع <nav> خارج <header> صالح أيضًا، فاختر ما يناسب تخطيطك.

كيف أجعل الترويسة تبقى في الأعلى عند التمرير؟

أعطها position: sticky; top: 0; مع لون خلفية وz-index، كي يتمرر المحتوى تحتها. لا يعمل sticky إلا ما دام أب الترويسة أطول منها، والجد الذي يحمل overflow: hidden يمنعها من الالتصاق بالصفحة.

مفاهيم ذات صلة