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

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

תיעוד HTML עם דוגמאות להרצה: קו תחתון וקו חוצה

Q: איך מוסיפים קו תחתון לטקסט ב-HTML?

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

Q: איך מוסיפים קו חוצה לטקסט ב-HTML?

השתמשו ב- לטקסט שכבר אינו מדויק, כמו מחיר ישן, וב- לטקסט שהוסר בעריכה. שתיהן מותחות קו דרך הטקסט. ב-CSS, text-decoration: line-through עושה את אותו הדבר ויזואלית.

Q: האם התגית הוצאה משימוש?

לא. הוצאה משימוש ב-HTML 4 אבל חזרה ב-HTML5 עם משמעות חדשה: טקסט עם הערה שאינה טקסטואלית, כמו שגיאת כתיב או שם פרטי בטקסט סיני. היא תקינה, רק שלעיתים רחוקות היא הבחירה הנכונה.

HTML underline וקו חוצה: התגיות u, ins, s ו-del

הוסיפו קו תחתון לטקסט ב-HTML עם או עם text-decoration של CSS, וקו חוצה עם <s> או <del>. למדו מה כל תגית אומרת, איך <ins> ו-<del> מסמנות שינויים, ולמה קו תחתון על טקסט שאינו קישור מבלבל את הקוראים.

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

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

פורסם ב-Sep 24, 2026

איך מוסיפים קו תחתון לטקסט ב-HTML

יש שתי דרכים: התגית , או מאפיין ה-CSS text-decoration: underline. שתיהן מציירות את אותו הקו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

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

מה התגית u אומרת

 היא לא כפתור "קו תחתון" כללי. ב-HTML של היום היא מציינת טקסט עם הערה לא מפורשת: סימון שאומר "יש כאן משהו מיוחד" בלי לומר מה. השימושים האמיתיים הנפוצים:

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

להדגשה השתמשו ב- או ב- (ראו טקסט מודגש), ולשמות של ספרים השתמשו ב-<cite>. אם אתם רוצים רק את המראה, השתמשו ב-CSS.

קו חוצה: s ו-del

ב-HTML יש שתי תגיות שמותחות קו דרך הטקסט, ויש להן משמעויות שונות:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

תגית	משמעות	שימוש טיפוסי
`<s>`	כבר לא מדויק או רלוונטי, נשמר לצורך הקשר	מחיר ישן, סוג כרטיס שאזל
`<del>`	הוסר מהמסמך	עריכות, יומני שינויים, משימות שבוצעו ברשימת מטלות

סימון שינויים עם ins ו-del

<ins> היא בת הזוג של <del>: היא מסמנת טקסט שנוסף. דפדפנים מוסיפים לה קו תחתון כברירת מחדל. שתיהן מקבלות datetime (מתי השינוי קרה) ו-cite (כתובת URL שמסבירה אותו):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

הסגנון האדום והירוק הזה הוא המראה המוכר של diff. text-decoration: none על ins מסיר את הקו התחתון של ברירת המחדל כדי שהטקסט לא ייראה כמו קישור.

קו תחתון וקו חוצה עם CSS

text-decoration מטפל בחלק הוויזואלי בכל אלמנט: הוא מקבל צבע וסגנון, ו-text-decoration-thickness קובע את העובי. לקווים דקורטיביים בלבד זה הכלי הנכון:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

הסרת הקו התחתון מקישורים, המרחק של הקו מהטקסט ושאר הפרטים של text-decoration נמצאים בעמוד CSS underline.

נגישות

התמיכה של קוראי מסך ב-<s>, <del> ו-<ins> לא עקבית: חלקם מכריזים עליהן כטקסט שנמחק או שנוסף, ורבים מקריאים אותן כטקסט רגיל, כך שמאזין עלול לשמוע "מחיר 49 דולר 29 דולר" בלי שום רמז איזה מהם הנוכחי. כשההבדל חשוב, אמרו אותו גם במילים, למשל בטקסט שמוסתר ויזואלית אבל מוקרא בקול, או פשוט "היה 49 $, עכשיו 29$ ".

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

קו תחתון על טקסט שאינו קישור. קוראים ינסו ללחוץ עליו. כדי להבליט, השתמשו בהדגשה, בצבע או ברקע.
שימוש ב- להדגשה. השתמשו ב- או ב-.
שימוש ב-<strike>. היא מיושנת. השתמשו ב-<s>, ב-<del> או ב-text-decoration: line-through.
שימוש ב-<s> לתוכן שנמחק בהיסטוריה של מסמך. לזה נועדה <del>, שיכולה גם לתעד מתי זה קרה.
להסתמך רק על הקו כדי להעביר משמעות. קוראי מסך רבים לא מכריזים עליו.

שאלות נפוצות

איך מוסיפים קו תחתון לטקסט ב-HTML?

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

איך מוסיפים קו חוצה לטקסט ב-HTML?

השתמשו ב-<s> לטקסט שכבר אינו מדויק, כמו מחיר ישן, וב-<del> לטקסט שהוסר בעריכה. שתיהן מותחות קו דרך הטקסט. ב-CSS, text-decoration: line-through עושה את אותו הדבר ויזואלית.

האם התגית הוצאה משימוש?

לא.  הוצאה משימוש ב-HTML 4 אבל חזרה ב-HTML5 עם משמעות חדשה: טקסט עם הערה שאינה טקסטואלית, כמו שגיאת כתיב או שם פרטי בטקסט סיני. היא תקינה, רק שלעיתים רחוקות היא הבחירה הנכונה.

מה קרה לתגית <strike>?

<strike> מיושנת. דפדפנים עדיין מציגים אותה עם קו חוצה, אבל היא לא HTML תקין. השתמשו ב-<s> או ב-<del> לפי המשמעות, או ב-text-decoration: line-through.

מה ההבדל בין <s> ל-<del>?

<s> מסמנת טקסט שכבר אינו רלוונטי או נכון אבל נשמר לצורך הקשר, כמו מחיר מחוק. <del> מסמנת טקסט שנמחק מהמסמך, לרוב ליד <ins> שמראה מה בא במקומו, ויכולה לקבל את המאפיינים datetime ו-cite.

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