תיעוד HTML עם דוגמאות להרצה: מודגש ונטוי

Q: איך מדגישים טקסט ב-HTML?

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

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

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

Q: איך מטים טקסט ב-HTML?

השתמשו ב- להדגשה שמשנה את משמעות המשפט ("I did say that" עם דגש על "did"), וב- לטקסט בקול אחר: מילים בשפה זרה, מונחים טכניים, שמות של ספינות, מחשבות. שתיהן מוצגות בנטוי.

Q: איך עושים טקסט מודגש ונטוי בו זמנית?

קננו את התגיות: text . סגרו אותן בסדר הפוך לסדר שבו פתחתם. עם CSS, הגדירו גם font-weight: bold וגם font-style: italic על אלמנט אחד.

Q: אפשר להדגיש טקסט עם CSS במקום?

כן: font-weight: bold (או 700) על כל אלמנט. השתמשו ב-CSS כשההדגשה היא ויזואלית בלבד, כמו תווית של כפתור או סגנון כותרת בטבלה, ובתגיות HTML כשהמילים עצמן חשובות או מודגשות במשמעותן.

HTML bold ונטוי: התגיות strong, b, em ו-i

הדגישו טקסט ב-HTML עם או , והטו אותו עם או . למדו באיזו תגית להשתמש מתי, איך לשלב מודגש ונטוי, ואיך להדגיש או להטות טקסט עם CSS במקום.

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

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

פורסם ב-Sep 24, 2026

איך מדגישים טקסט ב-HTML

עטפו את הטקסט ב- או ב-. שתיהן הופכות אותו למודגש:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong>Warning:</strong> unplug the device before opening it.</p>
  <p>The <b>Pro</b> plan includes offline mode.</p>
</body>
</html>

הן נראות זהות. ההבדל הוא במה שהן אומרות על הטקסט.

strong מול b

תגית	משמעות	דוגמה
`<strong>`	תוכן חשוב, רציני או דחוף	`<strong>Do not</strong> share your password.`
`<b>`	בולט, אבל בלי חשיבות נוספת	מילות מפתח בתקציר, שם של מוצר, המילים הפותחות של כתבה

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

נטוי: em ו-i

זוג תגיות הנטוי פועל לפי אותו רעיון:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Italics</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>I <em>never</em> said she took the money.</p>
  <p>I never said <em>she</em> took the money.</p>
  <p>The word <i lang="fr">déjà vu</i> comes from French, and the ship was the <i>Endurance</i>.</p>
</body>
</html>

תגית	משמעות	דוגמה
`<em>`	הדגשה בהטעמה: הזזה שלה משנה את משמעות המשפט	`I <em>never</em> said that.`
`<i>`	קול אחר: מילים בשפה זרה, מונחים טכניים, שמות של ספינות, מחשבות	`<i lang="la">et cetera</i>`

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

עוד כמה תגיות נטויות כברירת מחדל: <cite> (שם של יצירה), <dfn> (מונח שמוגדר), <address> ו-<var>. השתמשו בהן כשהן מתאימות ותנו לסגנון ברירת המחדל שלהן לעשות את השאר.

מודגש ונטוי יחד

קננו תגית אחת בתוך השנייה, וסגרו אותן בסדר הפוך:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong><em>Bold and italic</em></strong></p>
  <p><em>Italic with a <strong>bold</strong> word inside</em></p>
  <p><b><i>b and i together</i></b></p>
</body>
</html>

text (סגירה בסדר הלא נכון) עדיין מוצג, אבל הדפדפן צריך לתקן את העץ ועלול לפצל את האלמנטים שלכם; ראו את העמוד על תגיות כדי לראות איך נראה התיקון הזה.

מודגש ונטוי עם CSS

כשהסגנון ויזואלי בלבד (כותרת של כרטיס, מחיר, תווית), השתמשו ב-CSS על האלמנט עצמו במקום להוסיף תגית. font-weight שולט בהדגשה ו-font-style בנטוי:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS bold and italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .price { font-weight: bold; color: #16a34a; }
    .semi { font-weight: 600; }
    .note { font-style: italic; color: #4b5563; }
    .calm strong { font-weight: normal; color: #dc2626; }
  </style>
</head>
<body>
  <p>Price: <span class="price">$12</span></p>
  <p class="semi">font-weight: 600</p>
  <p class="note">A note set in italics with font-style.</p>
  <p class="calm"><strong>Still strong</strong>, shown in red instead of bold.</p>
</body>
</html>

השורה האחרונה מראה שמשמעות ומראה הם דברים נפרדים: ה- שומרת על המשמעות שלה בזמן ש-CSS מעצב אותה אחרת. כל טווח המשקלים (100 עד 900) מוסבר בעמוד CSS font-weight.

נגישות

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

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

שימוש במודגש ככותרת. שורה של טקסט ב- מעל קטע אינה כותרת לקוראי מסך. השתמשו ב-<h2> או <h3> ועצבו אותן.
שימוש ב- לעיצוב. אם שום דבר בטקסט אינו חשוב, השתמשו ב- או ב-CSS.
הדגשה של פסקה שלמה. הדגשה עובדת כשהיא נדירה. הדגישו ביטוי אחד, לא את הפסקה.
סגירת תגיות בסדר הלא נכון. x, לעולם לא x.
תגיות ישנות. התגית  ממדריכים ישנים מיושנת. השתמשו בתגיות שלמעלה או ב-font-weight.

שאלות נפוצות

איך מדגישים טקסט ב-HTML?

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

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

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

איך מטים טקסט ב-HTML?

השתמשו ב- להדגשה שמשנה את משמעות המשפט ("I did say that" עם דגש על "did"), וב- לטקסט בקול אחר: מילים בשפה זרה, מונחים טכניים, שמות של ספינות, מחשבות. שתיהן מוצגות בנטוי.

איך עושים טקסט מודגש ונטוי בו זמנית?

קננו את התגיות: text. סגרו אותן בסדר הפוך לסדר שבו פתחתם. עם CSS, הגדירו גם font-weight: bold וגם font-style: italic על אלמנט אחד.

אפשר להדגיש טקסט עם CSS במקום?

כן: font-weight: bold (או 700) על כל אלמנט. השתמשו ב-CSS כשההדגשה היא ויזואלית בלבד, כמו תווית של כפתור או סגנון כותרת בטבלה, ובתגיות HTML כשהמילים עצמן חשובות או מודגשות במשמעותן.

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