شرح تنسيق النصوص في HTML بالعربي — strong, em, mark

أحياناً تحتاج أن تُبرز كلمة مهمة، تُشير إلى سعر قديم شُطب عليه، أو تكتب معادلة رياضية. HTML تمتلك وسوماً خاصة لكل هذه الحالات. في هذا الدرس ستتعلم جميع وسوم تنسيق النصوص ومتى تستخدم كل واحدة.

التنسيق البصري مقابل التنسيق الدلالي — فرق مهم

قبل أن نبدأ، يجب أن تفهم مفهوماً أساسياً: في HTML يوجد نوعان من وسوم التنسيق:

• التنسيق البصري (Presentational): يغير شكل النص فقط — مثل <b> و<i>. لا يُعطي النص أي معنى إضافي لمحركات البحث أو أدوات قراءة الشاشة.
• التنسيق الدلالي (Semantic): يغير الشكل ويُضيف معنى — مثل <strong> و<em>. جوجل يقرأ هذه الوسوم ويفهم أن هذه الكلمات مهمة.

القاعدة الذهبية: إذا كنت تُبرز نصاً لأنه مهم فعلاً، استخدم <strong> أو <em>. إذا كنت تُبرزه لأسباب بصرية فقط، استخدم CSS.

وسوم التنسيق الأساسية — الشرح الكامل

النص العريض — <b> و <strong>

كلاهما يجعل النص عريضاً (Bold) — لكن بينهما فرق مهم:

<!-- b: تنسيق بصري فقط — لا معنى إضافي -->
<p>المكونات: <b>دقيق، سكر، بيض</b></p>

<!-- strong: تنسيق + أهمية دلالية — جوجل يقرأها -->
<p><strong>تحذير: لا تترك الكود يعمل بدون اختبار.</strong></p>

النص المائل — <i> و <em>

كلاهما يجعل النص مائلاً (Italic) — لكن بينهما نفس الفرق السابق:

<!-- i: للأسماء الأجنبية، المصطلحات التقنية، العناوين -->
<p>مصطلح <i>Hypertext</i> يعني النص التشعبي.</p>

<!-- em: للتأكيد على كلمة مهمة في الجملة -->
<p>يجب أن تحفظ ملفك <em>قبل</em> إغلاق المتصفح.</p>

التظليل — <mark>

يُظلّل النص بلون أصفر افتراضي — كأنك استخدمت قلم تحديد (Highlighter). مفيد جداً لتمييز نتائج البحث أو المعلومات المهمة.

<p>في هذا الدرس سنتعلم <mark>تنسيق النصوص</mark> في HTML.</p>

<!-- مثال شائع: تمييز نتيجة بحث -->
<p>نتائج البحث عن: <mark>تعلم HTML</mark></p>

النص المشطوب — <del>

يضع خطاً في وسط النص للإشارة إلى نص محذوف أو قديم. يُستخدم كثيراً في عروض الأسعار.

<p>
    السعر الأصلي: <del>500 درهم</del><br>
    السعر بعد الخصم: <strong>350 درهم</strong>
</p>

النص المُضاف — <ins>

يضع خطاً تحت النص للإشارة إلى نص مُضاف حديثاً. يُستخدم عادةً مع <del> لإظهار التغييرات في مستند.

<p>الإصدار القديم: <del>HTML 4</del></p>
<p>الإصدار الجديد: <ins>HTML 5</ins></p>

النص الصغير — <small>

يجعل حجم النص أصغر قليلاً من المحيط به. يُستخدم كثيراً للحواشي، التنبيهات القانونية، حقوق النشر.

<p>اشترِ الآن واحصل على خصم 20%!</p>
<small>* الخصم سارٍ حتى نهاية الشهر فقط</small>

النص المنخفض والمرتفع — <sub> و <sup>

<sub> يُنزّل النص تحت خط الكتابة — للصيغ الكيميائية.
<sup> يرفع النص فوق خط الكتابة — للمعادلات الرياضية والمراجع والأسّ.

<!-- صيغة كيميائية: الماء -->
<p>الماء: H<sub>2</sub>O</p>

<!-- معادلة رياضية: e = mc² -->
<p>نظرية أينشتاين: E = mc<sup>2</sup></p>

<!-- حاشية مرجعية -->
<p>القرآن الكريم<sup>[1]</sup> أفضل مرجع للغة العربية.</p>

جدول مرجعي — كل وسوم التنسيق

مثال عملي كامل — مقال منسّق

<h1>دليل تعلم HTML للمبتدئين</h1>

<p>
    <strong>HTML</strong> هي اللبنة الأساسية لبناء صفحات الويب.
    يجب أن تتعلمها <em>قبل</em> أي لغة أخرى.
</p>

<p>
    السعر الأصلي للكورس: <del>200 دولار</del>
    الآن فقط: <strong>مجاني تماماً!</strong>
</p>

<p>
    الصيغة الكيميائية للماء: H<sub>2</sub>O
    ونظرية أينشتاين: E = mc<sup>2</sup>
</p>

<p>
    <mark>ملاحظة مهمة:</mark> التطبيق العملي أهم من الحفظ النظري.
</p>

<small>* جميع الأمثلة مختبرة وتعمل في Chrome وFirefox وEdge</small>

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

ما الفرق بين <strong> و<b> في الواقع العملي؟

بصرياً لا فرق — كلاهما يُظهر النص عريضاً. لكن محركات البحث مثل جوجل وأدوات قراءة الشاشة تعطي وزناً أكبر للكلمات داخل <strong>. لهذا يُفضّل دائماً استخدام <strong> عندما تريد تأكيد أهمية نص.

هل يمكن دمج وسوم التنسيق معاً؟

نعم، يمكن تداخلها: <strong><em>نص عريض ومائل ومهم</em></strong>. لكن لا تبالغ في التداخل لأن الكود يصبح معقداً وصعب القراءة.

هل <mark> يدعمه كل المتصفحات؟

نعم، <mark> مدعوم في كل المتصفحات الحديثة بالكامل. يمكن تغيير لون التظليل الافتراضي (الأصفر) بـ CSS: mark { background-color: lightblue; }

متى أستخدم <del> ومتى أستخدم CSS لعمل خط عبر النص؟

استخدم <del> عندما يكون للنص معنى "محذوف" أو "قديم" (مثل سعر قديم). إذا كنت تريد الخط لأسباب بصرية فقط، استخدم CSS: text-decoration: line-through;