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

Q: איך משאירים את ה-footer בתחתית העמוד?

הפכו את ה-body לעמודת flex שגבוהה לפחות כמו החלון (display: flex; flex-direction: column; min-height: 100vh;) ותנו ל- את flex: 1. האזור הראשי גדל אז כדי למלא את המקום הריק ודוחף את ה-footer למטה בעמודים קצרים.

Q: איך כותבים את סמל זכויות היוצרים ב-HTML?

השתמשו בישות ©, שמציגה ©. אפשר גם להקליד את התו ישירות כשהעמוד משתמש ב- . עטיפת השורה ב- מסמנת אותה כאותיות קטנות.

Q: יכול להיות בעמוד יותר מ-footer אחד?

כן. לכל או יכול להיות footer משלו לפרטי הכותב או לתגיות. רק footer שלא נמצא בתוך article, aside, main, nav או section הוא ה-landmark מסוג contentinfo של העמוד עבור קוראי מסך.

HTML footer: התגית footer, דוגמאות ופריסה

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

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

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

פורסם ב-Sep 24, 2026

שימו את התוכן הסוגר של העמוד באלמנט <footer>, בדרך כלל הדבר האחרון ב-<body>. כמו <header>, אין לו מראה ברירת מחדל; CSS הופך אותו לפס תחתון:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site footer</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { padding: 20px; }
    .site-footer { background: #111827; color: #d1d5db; padding: 20px; }
    .columns { display: flex; flex-wrap: wrap; gap: 32px; }
    .columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
    .columns ul { list-style: none; padding: 0; margin: 0; }
    .columns li { margin-bottom: 6px; }
    .site-footer a { color: #d1d5db; }
    .site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
  </style>
</head>
<body>
  <main>
    <h1>Page content</h1>
  </main>
  <footer class="site-footer">
    <div class="columns">
      <div>
        <h2>Product</h2>
        <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
      </div>
      <div>
        <h2>Company</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
      </div>
      <div>
        <h2>Legal</h2>
        <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
      </div>
    </div>
    <small>&copy; 2026 Acme Inc. All rights reserved.</small>
  </footer>
</body>
</html>

© מדפיס את הסמל ©. <small> מסמן את שורת זכויות היוצרים כאותיות קטנות, שזו המשמעות שלו ב-HTML, ולא רק גופן קטן יותר. רשימות הקישורים הן רשימות <ul> אמיתיות, כך שרוב קוראי המסך מכריזים כמה קישורים יש בכל עמודה.

בעמוד עם מעט תוכן, ה-footer יושב מיד מתחת לתוכן, עם מקום ריק מתחתיו. הפתרון הוא עמודת flex: המכל גבוה לפחות כמו החלון, והאזור הראשי לוקח את כל הגובה שנשאר. התיבה האפורה למטה מייצגת חלון דפדפן:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footer at the bottom</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .window {
      height: 260px; border: 2px solid #e5e7eb;
      display: flex; flex-direction: column;
    }
    main { flex: 1; padding: 0 12px; }
    footer { background: #2563eb; color: #fff; padding: 10px 12px; }
  </style>
</head>
<body>
  <div class="window">
    <main>
      <p>Only one line of content.</p>
    </main>
    <footer>Footer stays at the bottom</footer>
  </div>
</body>
</html>

הסירו את flex: 1 מ-main וה-footer יקפוץ למעלה מתחת לפסקה. בעמוד אמיתי, שימו את אותם כללים על <body> עם min-height: 100vh (ו-margin: 0) במקום גובה קבוע, כך שה-footer יישב בתחתית של עמודים קצרים ואחרי התוכן בעמודים ארוכים.

<footer> סוגר את המאמר או הקטע הקרוב ביותר אליו, כך שלפוסט בבלוג או לתגובה יכול להיות footer משלהם, עם הכותב, התאריך או התגיות:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article footer</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
    article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
    .tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
  </style>
</head>
<body>
  <article>
    <h2>Five tips for cleaner HTML</h2>
    <p>Indent nested tags, close what you open, and name classes by meaning.</p>
    <footer>
      Posted in <span class="tag">html</span> <span class="tag">tips</span>
      by Ana on <time datetime="2026-09-24">September 24</time>
    </footer>
  </article>
</body>
</html>

קוראי מסך מתייחסים רק ל-footer ברמת העמוד כאל ה-landmark מסוג contentinfo. footer בתוך מאמר הוא קבוצה רגילה, כך שהוא לא מתחרה ב-footer של האתר.

פרטי קשר עם address

למידע ליצירת קשר על העמוד או על הבעלים שלו, השתמשו ב-<address> בתוך ה-footer. הוא מיועד לפרטי קשר בלבד (לא לכל כתובת דואר בתוכן שלכם), ודפדפנים מציגים אותו בנטוי כברירת מחדל:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
    <address>
      Acme Inc., 12 Market Street, Springfield<br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>
</html>

שבירת השורה בתוך הכתובת היא אחד השימושים הטובים ב-<br>. למידע נוסף על קישורי אימייל, ראו את העמוד על mailto.

footer יכול להכיל קישורים, רשימות, טפסים (הרשמה לניוזלטר), תמונות ו-<nav>. הוא לא יכול להכיל <header>, <footer> נוסף או <main>. תפריט שני ב-footer יכול להיות <nav> עם תווית שמבדילה אותו מהראשי:

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

טעויות נפוצות

שימת <footer> מחוץ ל-<body>. כל מה שגלוי נכנס לתוך <body>, כולל ה-footer.
שימוש ב-position: fixed כדי להשאיר אותו למטה. footer קבוע מכסה תוכן במסכים קטנים ודורש ריפוד בכל מקום. השתמשו בתבנית עמודת ה-flex.
שימוש ב-<address> לכל כתובת. הוא מיועד לפרטי הקשר של כותב העמוד או המאמר. כתובת של חנות ברשימת סניפים היא <p> רגיל.
עמודות קישורים שבנויות מתגיות <br>. השתמשו ברשימות <ul> כדי שהמבנה יוכרז.
קידוד קשיח של השנה שעברה. עדכנו את שנת זכויות היוצרים בתבנית שלכם, או הדפיסו אותה מהשרת או משלב הבנייה.

שאלות נפוצות

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

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

מה צריך להיות ב-footer של אתר?

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

איך משאירים את ה-footer בתחתית העמוד?

הפכו את ה-body לעמודת flex שגבוהה לפחות כמו החלון (display: flex; flex-direction: column; min-height: 100vh;) ותנו ל-<main> את flex: 1. האזור הראשי גדל אז כדי למלא את המקום הריק ודוחף את ה-footer למטה בעמודים קצרים.

איך כותבים את סמל זכויות היוצרים ב-HTML?

השתמשו בישות ©, שמציגה ©. אפשר גם להקליד את התו ישירות כשהעמוד משתמש ב-<meta charset="utf-8">. עטיפת השורה ב-<small> מסמנת אותה כאותיות קטנות.

יכול להיות בעמוד יותר מ-footer אחד?

כן. לכל <article> או <section> יכול להיות footer משלו לפרטי הכותב או לתגיות. רק footer שלא נמצא בתוך article, aside, main, nav או section הוא ה-landmark מסוג contentinfo של העמוד עבור קוראי מסך.

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