תיעוד HTML עם דוגמאות להרצה: Header (כותרת עליונה)

Q: מה ההבדל בין head ל-header ב-HTML?

הוא החלק הבלתי נראה של המסמך עם ה- , תגיות ה- והקישורים לגיליונות סגנון, ויש בדיוק אחד כזה. הוא תוכן גלוי בתוך , ובעמוד יכולים להיות כמה.

Q: יכול להיות בעמוד יותר מאלמנט header אחד?

כן. לעמוד יש בדרך כלל header אחד של האתר, ולכל או יכול להיות משלו לכותרת ולמידע הנלווה. רק header שלא נמצא בתוך article, aside, main, nav או section נחשב ל-banner של העמוד עבור קוראי מסך.

Q: איך גורמים ל-header להישאר למעלה בזמן גלילה?

תנו לו position: sticky; top: 0; ועוד צבע רקע ו-z-index, כך שהתוכן נגלל מתחתיו. sticky עובד רק כל עוד ההורה של ה-header גבוה יותר מה-header, ואב קדמון עם overflow: hidden מונע ממנו להידבק לעמוד.

HTML header: התגית header, דוגמאות ו-header דביק

האלמנט <header> מכיל את הפתיחה של עמוד או של קטע: לוגו, כותרת, ניווט, שם הכותב. למדו איך לבנות header לאתר, במה <header> שונה מ-<head> ומכותרות, איך משתמשים בו בתוך מאמרים, ואיך הופכים אותו לדביק.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

עטפו את החלק העליון של העמוד (לוגו, שם האתר, תפריט ראשי) באלמנט <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> ועדיין יהיה לכם header: התגית היא מה שהופך אותו ל-header, לא הרקע הכהה.

שלושה שמות שנשמעים דומים ועושים עבודות שונות:

אלמנט	איפה	גלוי	כמה
`<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 מכיל לעיתים קרובות כותרת, אבל הוא לא חייב, וכותרת לא צריכה header סביבה.

<header> פותח את המאמר או הקטע הקרוב ביותר אליו, לא רק את העמוד. רשימת פוסטים בבלוג שבה לכל פוסט יש 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>

עבור קוראי מסך, רק ה-header ברמת העמוד (כזה שלא נמצא בתוך article, aside, main, nav או section) הופך ל-landmark מסוג banner. ה-header של המאמרים הם קבוצות רגילות, כך שלא יוצא שיש כמה banners.

position: sticky משאיר את ה-header למעלה בזמן שהתוכן מתחתיו נגלל. גללו בתוך התיבה שלמטה:

<!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 כדי שתוכן ממוקם לא יצויר מעליו. בעמוד אמיתי תיבת הגלילה היא העמוד עצמו, ולכן ה-header יושב ישירות ב-<body>.

גם header עם position: fixed נשאר במקום, אבל הוא יוצא מזרימת העמוד, כך שהתוכן מחליק מתחתיו וצריך ריפוד למעלה. sticky שומר על המקום שלו בפריסה.

header יכול להכיל כמעט כל תוכן: כותרות, תמונת לוגו, <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. השתמשו ב-<header> כשיש קבוצה של תוכן פתיחה.
header דביק בלי רקע. טקסט העמוד נגלל ונראה דרכו. הגדירו background.
sticky שלא נדבק. אב קדמון עם overflow: hidden או overflow: auto הופך לתיבת הגלילה של sticky, כך שה-header נדבק בתוך התיבה הזו (או בכלל לא). בדקו את האבות הקדמונים.
שימת תפריט האתר ב-<div> בתוך ה-header. השתמשו ב-<nav> כדי שמשתמשי קוראי מסך יוכלו לקפוץ אליו.

שאלות נפוצות

מה זו התגית header ב-HTML?

<header> הוא אלמנט סמנטי לתוכן פתיחה: לוגו ותפריט של האתר בראש העמוד, או הכותרת ושם הכותב בראש מאמר. הוא תיבת בלוק רגילה בלי עיצוב ברירת מחדל.

מה ההבדל בין head ל-header ב-HTML?

<head> הוא החלק הבלתי נראה של המסמך עם ה-<title>, תגיות ה-<meta> והקישורים לגיליונות סגנון, ויש בדיוק אחד כזה. <header> הוא תוכן גלוי בתוך <body>, ובעמוד יכולים להיות כמה.

יכול להיות בעמוד יותר מאלמנט header אחד?

כן. לעמוד יש בדרך כלל header אחד של האתר, ולכל <article> או <section> יכול להיות <header> משלו לכותרת ולמידע הנלווה. רק header שלא נמצא בתוך article, aside, main, nav או section נחשב ל-banner של העמוד עבור קוראי מסך.

האם ה-nav צריך להיות בתוך ה-header?

הוא יכול, ולעיתים קרובות הוא נמצא שם כשהתפריט הראשי יושב בראש העמוד. גם שימת <nav> מחוץ ל-<header> תקינה; בחרו מה שמתאים לפריסה שלכם.

איך גורמים ל-header להישאר למעלה בזמן גלילה?

תנו לו position: sticky; top: 0; ועוד צבע רקע ו-z-index, כך שהתוכן נגלל מתחתיו. sticky עובד רק כל עוד ההורה של ה-header גבוה יותר מה-header, ואב קדמון עם overflow: hidden מונע ממנו להידבק לעמוד.

מושגים קשורים