תיעוד HTML עם דוגמאות להרצה: Section

Q: מה ההבדל בין section ל-div?

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

HTML section: ההבדל בין section, article ו-div

האלמנט <section> מקבץ תוכן בנושא אחד תחת כותרת משלו. למדו מתי להשתמש ב-<section>, מתי <article> או <div> מתאימים יותר, איך השלושה מקוננים זה בזה, ואיך section עם תווית הופך לציון דרך.

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

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

פורסם ב-Sep 24, 2026

בשביל מה התגית section

<section> מקבץ תוכן בנושא אחד, ומתחיל בכותרת שנותנת שם לנושא הזה. עמוד נחיתה שמחולק ל-"Features", ל-"Pricing" ול-"FAQ" הוא מקרה קלאסי:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    section h2 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Acme Notes</h1>
  <section>
    <h2>Features</h2>
    <p>Sync, search and share your notes.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>Free for personal use.</p>
  </section>
  <section>
    <h2>FAQ</h2>
    <p>Answers to common questions.</p>
  </section>
</body>
</html>

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

section מול article מול div

שלושתם נראים אותו דבר על המסך. מה ששונה הוא מה שהם אומרים על התוכן:

אלמנט	משמעות	מבחן
`<article>`	יחידה שלמה שעומדת בפני עצמה	האם יהיה לה היגיון אם תפורסם לבד, באתר אחר או בפיד?
`<section>`	חלק נושאי מתוך שלם גדול יותר	האם יש לו (או צריכה להיות לו) כותרת, והאם הוא פרק אחד של משהו?
`<div>`	כלום: קופסה לעיצוב או לפריסה	האם הוא שם רק בשביל CSS או JavaScript?

פוסטים בבלוג, תגובות בפורום, כתבות חדשות וכרטיסי מוצר הם articles. "Features", "Chapter 2" ו-"Related products" הם sections. שורת flex שמיישרת שלושה כרטיסים היא div.

articles בתוך section

השניים מקוננים לשני הכיוונים. כאן section בשם "Latest posts" מכיל כמה articles עצמאיים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Section of articles</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .grid { display: flex; gap: 10px; }
    article { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px; }
    article h3 { margin: 10px 0 4px; font-size: 16px; }
    article p { color: #6b7280; font-size: 14px; }
  </style>
</head>
<body>
  <section>
    <h2>Latest posts</h2>
    <div class="grid">
      <article>
        <h3>Flexbox in 5 minutes</h3>
        <p>Rows, columns and gaps.</p>
      </article>
      <article>
        <h3>CSS Grid basics</h3>
        <p>Two-dimensional layout.</p>
      </article>
      <article>
        <h3>Forms that work</h3>
        <p>Labels and validation.</p>
      </article>
    </div>
  </section>
</body>
</html>

שימו לב ל-<div class="grid">: הוא קיים רק כדי לסדר את הכרטיסים בשורה, ולכן div היא התגית הנכונה בשבילו. כל כרטיס הוא article כי כל פוסט עומד בפני עצמו.

sections בתוך article

article ארוך אפשר לחלק ל-sections, בדיוק כמו פרקים בספר. רמות הכותרות ממשיכות מהכותרת של ה-article עצמו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article with sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #2563eb; border-radius: 8px; padding: 0 14px; }
    section { border-inline-start: 4px solid #16a34a; padding-inline-start: 10px; margin-bottom: 12px; }
    section h3 { margin: 4px 0; }
  </style>
</head>
<body>
  <article>
    <h2>A beginner's guide to bread</h2>
    <section>
      <h3>Ingredients</h3>
      <p>Flour, water, salt, yeast.</p>
    </section>
    <section>
      <h3>Method</h3>
      <p>Mix, knead, rise, bake.</p>
    </section>
  </article>
</body>
</html>

התיבה הכחולה היא ה-article (המדריך כולו), והפסים הירוקים הם ה-sections שלו. תנו ל-section רמת כותרת משלו: article עם h2 מכיל sections עם h3.

sections עם שם הופכים לציוני דרך

קוראי מסך מציגים אלמנטים מסוימים כציוני דרך (landmarks) שמשתמשים יכולים לקפוץ ביניהם. <section> הופך לציון דרך מסוג region רק כשיש לו שם נגיש. הפנו את aria-labelledby לכותרת שלו:

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  ...
</section>

עשו זאת לכמה sections שמשתמש ירצה לקפוץ אליהם ישירות, לא לכל section: עמוד עם עשרים ציוני דרך קשה לסריקה בדיוק כמו עמוד בלי אף אחד. גם sections בלי שם עוזרים, כי הכותרות שלהם מופיעות ברשימת הכותרות של קורא המסך.

sections הם גם יעדים טובים לקישורים בתוך העמוד. תנו לאחד מהם id וקישור עם href="#id" יקפוץ אליו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jump links</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { min-height: 420px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <p><a href="#faq">Jump to the FAQ</a></p>
  <section id="features" aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
  </section>
  <section id="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">FAQ</h2>
    <p><a href="#features">Back to features</a></p>
  </section>
</body>
</html>

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

שימוש ב-<section> כעטיפה לעיצוב. אם אין כותרת ואין נושא, השתמשו ב-<div>. העמוד על HTML סמנטי מראה איפה כל תגית פריסה מתאימה.
עטיפת פוסט בודד בבלוג ב-<section>. פוסט שעומד בפני עצמו הוא <article>.
sections בלי כותרות. הוסיפו כותרת, אפילו מוסתרת חזותית, או חשבו שוב אם זה באמת section.
החלפת <main> ב-<section>. התוכן העיקרי של העמוד נכנס ל-<main>; ה-sections נכנסים לתוכו.
לתת שם לכל section. הוסיפו aria-labelledby רק לחשובים, כדי שרשימת ציוני הדרך תישאר קצרה.

שאלות נפוצות

מהי התגית section ב-HTML?

<section> מקבץ תוכן ששייך לנושא אחד, כמו פרק במסמך או החלק "Pricing" בעמוד נחיתה. בדרך כלל הוא צריך להתחיל בכותרת שאומרת על מה החלק.

מה ההבדל בין section ל-div?

<section> אומר שהתוכן הוא חלק נושאי במסמך עם כותרת משלו. <div> לא אומר כלום; הוא קופסה לעיצוב או לפריסה. אם צריך רק עטיפה בשביל CSS, השתמשו ב-<div>.

מה ההבדל בין section ל-article?

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

האם article יכול להכיל sections, ו-section יכול להכיל articles?

כן, שניהם. article ארוך אפשר לחלק ל-sections, ו-section כמו "Latest posts" יכול להכיל רשימה של articles.

האם section צריך כותרת?

כמעט תמיד כדאי שתהיה לו, כי הכותרת היא מה שנותן שם לנושא. אם אין לכם רעיון לכותרת בשבילו, כנראה שהתוכן אינו section ו-<div> מתאים יותר.

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