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

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

הוא בלוק: הוא מתחיל בשורה חדשה ותופס את כל הרוחב. הוא inline: הוא נשאר בתוך שורת הטקסט ורחב רק כמו התוכן שלו. השתמשו ב-div כדי לקבץ בלוקים של תוכן, וב-span כדי לסמן מילים בתוך טקסט.

Q: למה width לא עובד על ה-span שלי?

אלמנטים inline מתעלמים מ-width, מ-height ומ-margins אנכיים. תנו ל-span display: inline-block כדי להשאיר אותו בשורה ועדיין לקבל גודל, או display: block כדי שיתנהג כמו div.

Q: איך משנים את הצבע של מילה אחת ב-HTML?

עטפו את המילה ב-span עם class וצבעו אותה ב-CSS: word עם .accent { color: #2563eb; }. לשימוש חד-פעמי מהיר, גם word עובד.

HTML span: עיצוב חלק מטקסט, ו-div מול span

התגית <span> היא מיכל inline כללי: היא עוטפת כמה מילים בתוך שורה כדי שתוכלו לעצב אותן או לגשת אליהן בסקריפט בלי לשבור את השורה. למדו איך להשתמש בה, במה היא שונה מ-div, ומתי תגית ספציפית יותר מתאימה יותר.

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

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

פורסם ב-Sep 24, 2026

מה התגית span עושה

<span> עוטף קטע טקסט בתוך שורה כדי שתוכלו לעצב אותו או למצוא אותו עם JavaScript. הוא התאום ה-inline של <div>: אין לו משמעות ואין לו מראה ברירת מחדל, והוא לא פותח שורה חדשה.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

המשפט נשאר בשורה אחת. רק המילים העטופות משתנות.

div מול span

לשניים יש מטרה זהה (מיכל בלי משמעות), והם שונים באופן שבו הם יושבים בעמוד:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

ה-div שובר את המשפט לשלוש שורות ונמתח לרוחב העמוד; ה-span נשאר בתוך המשפט וצמוד לטקסט שלו.

	`<div>`	`<span>`
תצוגה	בלוק	inline
מתחיל שורה חדשה	כן	לא
רוחב	כל הרוחב הזמין	רחב כמו התוכן שלו
`width`, `height`, margin אנכי	מוחלים	מוזנחים
יכול להכיל	כל דבר, כולל בלוקים	רק טקסט ואלמנטים inline
שימוש טיפוסי	חלקים, כרטיסים, עטיפות פריסה	מילה או ביטוי בתוך טקסט

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

עיצוב span: מה עובד ומה לא

צבע, גופן, רקע ו-padding אופקי עובדים כולם על span. גודל לא: אלמנט inline מתעלם מ-width, מ-height ומ-margins עליונים ותחתונים. החליפו אותו ל-inline-block כדי לתת לו גודל ולהשאיר אותו בשורה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

ה-span הראשון רחב רק כמו המילים שלו. השני הוא בדיוק 120 על 40 פיקסלים ועדיין יושב בתוך המשפט.

spans עם JavaScript

span הוא ה-placeholder הרגיל לערך שסקריפט ממלא, כמו מונה או שם משתמש:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

רק המספר משתנה; שאר המשפט נשאר כמו שהוא.

מתי תגית ספציפית עדיפה על span

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

משמעות	השתמשו במקום span
טקסט חשוב	`<strong>`
הדגשה בטון	`<em>`
טקסט מודגש או מסומן	`<mark>`
קוד, שם קובץ	`<code>`
מקש במקלדת	`<kbd>`
תאריך או שעה	`<time datetime="2026-09-24">`
טקסט בשפה אחרת	`<span lang="fr">` (span ועוד המאפיין `lang`)

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

העמוד על טקסט מודגש מסביר את ההבדל בין <strong>, <b>, <em> ו-<i>.

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

הגדרת width על span רגיל. המאפיין מוזנח. השתמשו ב-display: inline-block.
לשים div או פסקה בתוך span. HTML לא תקין ששובר את השורה. החליפו את ה-span החיצוני ב-div.
spans לחיצים. כמו div, אי אפשר להגיע עם המקלדת ל-span עם onclick. השתמשו ב-<button> או בקישור.
span לכל סגנון. אם פסקאות או חלקים שלמים צריכים סגנון, שימו את ה-class על ה-<p> או על המיכל עצמו במקום לעטוף את הטקסט שלהם ב-span.

שאלות נפוצות

מה זה span ב-HTML?

<span> הוא מיכל inline כללי. הוא עוטף חלק משורת טקסט, כמו מילה אחת, כדי ש-CSS או JavaScript יוכלו לפנות אליו, ואין לו מראה או משמעות משלו.

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

<div> הוא בלוק: הוא מתחיל בשורה חדשה ותופס את כל הרוחב. <span> הוא inline: הוא נשאר בתוך שורת הטקסט ורחב רק כמו התוכן שלו. השתמשו ב-div כדי לקבץ בלוקים של תוכן, וב-span כדי לסמן מילים בתוך טקסט.

למה width לא עובד על ה-span שלי?

אלמנטים inline מתעלמים מ-width, מ-height ומ-margins אנכיים. תנו ל-span display: inline-block כדי להשאיר אותו בשורה ועדיין לקבל גודל, או display: block כדי שיתנהג כמו div.

איך משנים את הצבע של מילה אחת ב-HTML?

עטפו את המילה ב-span עם class וצבעו אותה ב-CSS: <span class="accent">word</span> עם .accent { color: #2563eb; }. לשימוש חד-פעמי מהיר, גם <span style="color: #2563eb">word</span> עובד.

האם span יכול להכיל div?

לא. span יכול להכיל רק תוכן inline כמו טקסט, קישורים, תמונות ו-spans אחרים. דפדפנים עדיין מציגים div בתוך span, אבל זה HTML לא תקין ושובר את השורה, אז החליפו את האלמנט החיצוני ל-div.

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