وثائق HTML قابلة للتشغيل: وسم span

Q: ما الفرق بين div وspan؟

عنصر كتلي: يبدأ في سطر جديد ويأخذ كامل العرض. عنصر سطري: يبقى داخل سطر النص وعرضه بقدر محتواه فقط. استخدم div لتجميع كتل المحتوى، وspan لتمييز كلمات داخل النص.

Q: لماذا لا تعمل خاصية width على span؟

العناصر السطرية تتجاهل width وheight والهوامش العمودية. أعطِ span القيمة display: inline-block ليبقى في السطر مع قبول الحجم، أو display: block ليتصرف مثل div.

Q: كيف أغيّر لون كلمة واحدة في HTML؟

ضع الكلمة داخل span يحمل class ولوّنها في CSS: word مع .accent { color: #2563eb; }. ولتعديل سريع لمرة واحدة يعمل أيضًا word .

وسم span في HTML: تنسيق جزء من النص والفرق بين div وspan

الوسم <span> حاوية سطرية عامة: يحيط ببضع كلمات داخل السطر كي تنسّقها أو تتحكم بها بسكربت من دون كسر السطر. تعلّم كيف تستخدمه، وكيف يختلف عن div، ومتى يناسب وسم أكثر تحديدًا.

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

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

ما وظيفة وسم span

<span> يحيط بجزء من النص داخل السطر كي تنسّقه أو تجده بـ JavaScript. هو التوأم السطري لـ <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>`
العرض (display)	كتلي	سطري
يبدأ سطرًا جديدًا	نعم	لا
العرض	كامل العرض المتاح	بقدر محتواه
`width` و`height` والهامش العمودي	تُطبَّق	تُتجاهل
يمكن أن يحتوي على	أي شيء، بما في ذلك العناصر الكتلية	النص والعناصر السطرية فقط
الاستخدام المعتاد	الأقسام والبطاقات وأغلفة التخطيط	كلمة أو عبارة داخل النص

فرق آخر: لا يُسمح بـ <div> داخل <p>، ويغلق المتصفح الفقرة مبكرًا إن حاولت، بينما يمكن وضع span في أي مكان يوضع فيه النص. المزيد عن ذلك في صفحة div.

تنسيق span: ما يعمل وما لا يعمل

اللون والخط والخلفية والحشو الأفقي كلها تعمل على span. أما الحجم فلا: العنصر السطري يتجاهل width وheight والهوامش العلوية والسفلية. حوّله إلى 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 بكسل بالضبط وما زال داخل الجملة.

span مع JavaScript

span هو العنصر المعتاد لحجز مكان قيمة يملؤها سكربت، مثل عدّاد أو اسم مستخدم:

<!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 غير صالح يكسر السطر. اجعل العنصر الخارجي div بدلًا من span.
عناصر span قابلة للنقر. مثل div، لا يمكن الوصول إلى span يحمل onclick بلوحة المفاتيح. استخدم <button> أو رابطًا.
span لكل تنسيق. إذا احتاجت فقرات أو أقسام كاملة إلى تنسيق، ضع class على <p> أو الحاوية نفسها بدلًا من إحاطة نصها بـ span.

الأسئلة الشائعة

ما هو span في HTML؟

<span> حاوية سطرية عامة. يحيط بجزء من سطر النص، مثل كلمة واحدة، كي يستهدفه CSS أو JavaScript، وليس له مظهر أو معنى خاص به.

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

<div> عنصر كتلي: يبدأ في سطر جديد ويأخذ كامل العرض. <span> عنصر سطري: يبقى داخل سطر النص وعرضه بقدر محتواه فقط. استخدم div لتجميع كتل المحتوى، وspan لتمييز كلمات داخل النص.

لماذا لا تعمل خاصية width على span؟

العناصر السطرية تتجاهل width وheight والهوامش العمودية. أعطِ 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 إلا على محتوى سطري مثل النص والروابط والصور وعناصر span أخرى. تعرض المتصفحات div داخل span مع ذلك، لكنه HTML غير صالح ويكسر السطر، لذلك اجعل العنصر الخارجي div.

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