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

Q: כמה תגיות כותרת יש ב-HTML?

שש: , , , , ו- . היא החשובה ביותר (כותרת העמוד) ו- הכי פחות. אין ; תגית כזו מטופלת כאלמנט inline לא מוכר.

Q: מה גדלי ברירת המחדל של כותרות HTML?

עם טקסט ברירת מחדל של 16px, דפדפנים מציגים h1 ב-32px (2em), h2 ב-24px (1.5em), h3 ב-18.72px (1.17em), h4 ב-16px (1em), h5 ב-13.28px (0.83em) ו-h6 ב-10.72px (0.67em), כולן מודגשות.

Q: אפשר שיהיה יותר מ-h1 אחד בעמוד?

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

Q: איך משנים את הגודל של כותרת?

הגדירו font-size ב-CSS, למשל h2 { font-size: 20px; } או מחלקה על כותרת אחת. לעולם אל תבחרו רמת כותרת בגלל גודל ברירת המחדל שלה.

כותרות ב-HTML: h1 עד h6, גדלים, סדר ועיצוב

ב-HTML יש שש רמות כותרת, <h1> עד <h6>, שנותנות לעמוד את המבנה שלו. למדו את גדלי ברירת המחדל, איך לסדר כותרות, כמה תגיות h1 להשתמש, איך לשנות את הגודל שלהן עם CSS ואיך קוראי מסך משתמשים בהן.

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

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

פורסם ב-Sep 24, 2026

שש תגיות הכותרת של HTML

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

תגית	גודל ברירת מחדל	עם טקסט של 16px
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

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

כותרות הן המבנה של העמוד

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

שנו את ה-<h3> השני ל-<h5> והמבנה יראה פער: קורא שמשתמש בכותרות יתהה לאן נעלם h4.

שינוי הגודל של כותרת

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

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

כותרות משנה וסלוגנים

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

המבנה נשאר נקי (h1 אחד, ואז קטעי h2), והסלוגן עדיין יושב ויזואלית יחד עם הכותרת.

קישור לכותרת

תנו לכותרת id וכל קישור עם #id ב-href שלו יקפוץ ישירות אליה. כך עובדים תוכני עניינים וכפתורי "העתקת קישור לקטע":

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

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

בחירת הרמה לפי הגודל שלה. בחרו לפי המיקום במבנה, ואז עצבו עם CSS.
דילוג על רמות. מעבר מ-<h2> ישר ל-<h4> שובר את הניווט עבור משתמשי קוראי מסך.
כותרות בשביל הדגשה. שורה מודגשת בתוך פסקה היא <strong>, לא <h4>.
אין <h1>, או לוגו בתור ה-<h1> היחיד. ה-<h1> צריך לתת שם לתוכן העמוד, כמו כותרת המאמר או המוצר.
כותרות ריקות. כותרת שיש בתוכה רק אייקון או כלום מוכרזת כריקה. שימו בה טקסט אמיתי.

שאלות נפוצות

כמה תגיות כותרת יש ב-HTML?

שש: <h1>, <h2>, <h3>, <h4>, <h5> ו-<h6>. <h1> היא החשובה ביותר (כותרת העמוד) ו-<h6> הכי פחות. אין <h7>; תגית כזו מטופלת כאלמנט inline לא מוכר.

מה גדלי ברירת המחדל של כותרות HTML?

עם טקסט ברירת מחדל של 16px, דפדפנים מציגים h1 ב-32px (2em), h2 ב-24px (1.5em), h3 ב-18.72px (1.17em), h4 ב-16px (1em), h5 ב-13.28px (0.83em) ו-h6 ב-10.72px (0.67em), כולן מודגשות.

אפשר שיהיה יותר מ-h1 אחד בעמוד?

HTML מתיר את זה, אבל <h1> אחד שנותן שם לעמוד הוא המבנה הברור ביותר עבור משתמשי קוראי מסך ומנועי חיפוש. השתמשו ב-<h2> לקטעים הראשיים שמתחתיו.

אפשר לדלג על רמות כותרת, כמו מ-h2 ל-h4?

הימנעו מזה. משתמשי קוראי מסך מנווטים לפי רמת כותרת, וקפיצה מ-h2 ל-h4 רומזת על קטע חסר. בחרו את הרמה לפי המיקום במבנה ושנו את הגודל עם CSS.

איך משנים את הגודל של כותרת?

הגדירו font-size ב-CSS, למשל h2 { font-size: 20px; } או מחלקה על כותרת אחת. לעולם אל תבחרו רמת כותרת בגלל גודל ברירת המחדל שלה.

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