سؤال في اساسيات HTML

ال span هو عنصر inline يستخدم لتجميع وتنسيق جزء من النص داخل عنصر آخر لكنه لا يضيف أي تنسيق افتراضي للمحتوى أي أنه يمكننا استخدامه مع CSS لتنسيق أجزاء محددة من النص كالتالي:

<p>
  هذه الجملة تحتوي على <span style="color: red;">كلمات ملونة</span> باللون الأحمر.
</p>

لأنّ أهم استخدامات span تكمن في تطبيق تنسيقات CSS على جزء محدد من النص من خلال إضافة classes أو IDs لأجزاء معينة للتحكم بها عبر جافا سكريبت لتمييز كلمات أو عبارات معينة داخل النص أو لتغيير لون أو حجم أو نمط خط جزء من النص.

ويختلف span عن div في أنه عنصر inline بينما div هو عنصر block وهذا يعني أن span لا يبدأ سطرا جديدا ويأخذ فقط المساحة الضرورية لمحتواه يمكنك الاطلاع أكثر من هنا: العنصر <span> موسوعة حسوب

وأرجو في قادم المرات طرح سؤالك في أسفل الدرس في صندوق التعليقات المخصص لذلك في حال كان سؤالك متعلقا بإحدى الدروس المتعلقة بأساسيات HTML في إحدى الدورات حيث هنا نطرح فقط الأسئلة العامة وهذا لمساعدتك بالشكل المناسب.
 

يتم تمييز العنصر Span أنه

• عنصر مضمّن يستخدم لتنسيق أجزاء صغيرة داخل النصوص.
• لا يُغير تخطيط الصفحة مثل <div> أي لا يؤثر على تدفق الصفحة .
• مفيد عند استخدام CSS أو JavaScript على جزء محدد من النص.

وبالإضافة للشرح في التعليق السابق يمكنك الفهم أكثر من خلال الأمثلة الواقعية التالية

<p>السعر: <span style="color: green; font-weight: bold;">99.99$</span></p>

يتم تلوين السعر باللون الأخضر ليكون أكثر وضوحًا.

أيضاً في معظم المواقع عند الضغط على تسجيل الدخول، يتغير النص ليعرض اسم المستخدم المسجّل.

<p>مرحبًا، <span id="user-name">زائر</span>!</p>
<button onclick="login()">تسجيل الدخول</button>

<script>
  function login() {
    document.getElementById("user-name").textContent = "أحمد";
  }
</script>

عند النقر على الزر، يتغير النص من "زائر" إلى "أحمد".