ما الفرق بين و ؟

يحدد نصًا لم يعد مناسبًا أو صحيحًا لكنه باقٍ للسياق، مثل سعر مشطوب. يحدد نصًا حُذف من المستند، وغالبًا ما يأتي بجانب الذي يُظهر ما حلّ محله، ويمكن أن يحمل السمتين datetime وcite.

وثائق HTML قابلة للتشغيل: التسطير في HTML

Q: كيف أضع خطًا تحت النص في HTML؟

ضعه داخل ، أو طبّق text-decoration: underline في CSS. استخدم فقط لمعناه المحدد (مثل تحديد كلمة بها خطأ إملائي)، أما التسطير البصري فقط فاستخدم له CSS على أو على العنصر نفسه.

Q: كيف أشطب النص في HTML؟

استخدم للنص الذي لم يعد دقيقًا، مثل سعر قديم، و للنص الذي حُذف في تعديل. كلاهما يرسم خطًا عبر النص. وفي CSS تفعل text-decoration: line-through الشيء نفسه بصريًا.

Q: هل وسم مهجور؟

لا. أُهمل في HTML 4 لكنه عاد في HTML5 بمعنى جديد: نص يحمل تعليقًا توضيحيًا غير نصي، مثل خطأ إملائي أو اسم علم في نص صيني. هو صالح، لكنه نادرًا ما يكون الخيار الصحيح.

التسطير والشطب في HTML: وسوم u وins وs وdel

ضع خطًا تحت النص في HTML بـ أو بخاصية text-decoration في CSS، واشطبه بـ <s> أو <del>. تعلّم معنى كل وسم، وكيف يحدد <ins> و<del> التعديلات، ولماذا يربك تسطير نص ليس رابطًا القراء.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & 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 (رابط يشرحه):

<!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.

إمكانية الوصول

دعم قارئات الشاشة لـ <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.

مفاهيم ذات صلة