جاري التحميل...

تنسيق النص في HTML

سبق أن استخدمت سمة style لتغيير مظهر النص. وسوم التنسيق تجيب عن سؤال مختلف: ماذا يعني هذا الجزء من النص؟ التحذيرات المهمة، والتأكيد المنطوق، والتمييز، والتعديلات، والطباعة الدقيقة، والصيغ مثل H₂O تنتمي إلى عناصر HTML مخصّصة. المتصفحات غالباً تعرضها عريضة أو مائلة افتراضياً، لكن أدوات المساعدة وأنظمة البحث يمكنها أيضاً استخدام المعنى — شيء لا يوفّره اللون وحده.

ما هو تنسيق النص في HTML؟

عناصر تنسيق النص تلف كلمة أو عبارة داخل فقرة (أو نص مشابه) لتحدد دوراً: أهمية، تأكيد، تمييز، حذف، إدراج، وأكثر. وهي عناصر ضمن السطر. لا تبدأ كتلة جديدة مثل p أو h1. تضعها حول المدى الدقيق من النص الذي يحمل ذلك الدور، ثم تغلقها ليعود باقي الجملة إلى الحالة العادية.

إجابة مباشرة

استخدم وسوم التنسيق الدلالية للمعنى: strong للأهمية القوية، وem لتأكيد الضغط (كما لو شدّدت على الكلمة وأنت تتكلم)، وmark لتمييز الصلة، وsmall للطباعة الدقيقة أو التعليقات الجانبية، وdel وins للنص المحذوف أو المُضاف، وsub / sup للأسفل والأعلى. فضّل هذه الوسوم عندما يهم المعنى. عندما تريد مظهراً عريضاً أو مائلاً فقط دون معنى إضافي، استخدم CSS — بما في ذلك أفكار style المضمّن من الجلسة السابقة — بدل إساءة استخدام strong أو em.

مرجع الوسوم بنظرة سريعة

📊 وسوم التنسيق الشائعة

الوسم	المعنى المعتاد	المظهر الافتراضي (غالباً)
strong	أهمية قوية	عريض
em	تأكيد / ضغط	مائل
mark	مميّز / ذو صلة	خلفية صفراء تقريباً
small	تعليقات جانبية / طباعة دقيقة	نص أصغر
del	نص محذوف	يتوسطه خط
ins	نص مُضاف	تحته خط
sub	أسفل السطر	نص أسفل وأصغر
sup	أعلى السطر	نص أعلى وأصغر

أولاً strong و em

strong وem هما الزوج الذي ستستخدمه أكثر. اقصد strong عندما يكون المحتوى مهماً — مصطلح مفتاحي، تحذير، تسمية حقل مطلوب في النص. اقصد em عندما تغيّر صوتك لتضغط على كلمة. العريض والمائل الافتراضيان ليسا إلا العرض الشائع؛ الوسوم ما زالت تحمل المعنى إذا غيّر stylesheet المظهر لاحقاً.

الأهمية والتأكيد

html

HTML Code

<p>
يشمل <strong>السعر النهائي</strong> الضريبة.
يُرجى قراءة قواعد الاسترداد <em>قبل</em> الدفع.
</p>

قراءة المثال

strong يلف «السعر النهائي» لأن تلك العبارة مهمة في الجملة
em يلف «قبل» لأن التوقيت هو الفكرة المضغوطة
الوسمان داخل فقرة واحدة؛ لا يحلّان محل p
إذا أردت نصاً كحلياً فقط دون معنى أهمية، فـ style (أو CSS لاحقاً) أداة أفضل

مزيد من وسوم التنسيق في فقرة واحدة

عندما يصبح strong وem طبيعيين، أضف المساعدات للتمييز والتعديلات والطباعة الدقيقة والصيغ. أبقِ التداخل ضحلاً: لفّ فقط الكلمات التي تحتاج كل دور.

عدة وسوم تنسيق معاً

html

HTML Code

<p>
الماء هو H<sub>2</sub>O. ملاحظة السلامة <strong>مهمة</strong>.
يُرجى قراءة هذا <em>بعناية</em>.
انتقل الموعد من <del>الجمعة</del> إلى <ins>الاثنين</ins>.
ملاحظة: <small>قد تتغيّر الأسعار</small>.
نتيجة بحث: تنسيق <mark>HTML</mark>.
المساحة: 12<sup>2</sup> متراً مربعاً.
</p>

ماذا يفعل كل مساعد

sub ينزّل «2» في صيغة الماء؛ وsup يرفع الأس في 12²
del وins يعرضان أثر التعديل — القيمة القديمة خارجاً والجديدة داخلاً
small يعلّم الطباعة الدقيقة الثانوية، لا الادعاء الرئيسي
mark يميّز نتيجة ذات صلة، شبيهة بتمييز البحث
strong وem ما زالا يعلّمان الأهمية والضغط داخل الفقرة نفسها
لا تحتاج كل وسم في كل جملة. اختر ما يطابق المعنى الحقيقي لنصك.

وسوم المعنى مقابل التنسيق البصري فقط

الصفحات القديمة أحياناً تستخدم b وi للعريض والمائل دون معنى قوي. في هذه الدورة فضّل strong عندما يكون المحتوى مهماً وem عندما تضغط على كلمة وأنت تتكلم. استخدم CSS عندما تريد مظهراً فقط. هذه العادة تُبقي HTML صادقاً: وسوم التنسيق تصف المحتوى، وملفات الأنماط تصف العرض.

تمرّن في المحرّر

اكتب فقرة عادية عن سعر منتج.
لفّ اسم المنتج في strong.
لفّ كلمة تحذير واحدة في em.
علّم سعراً قديماً بـ del وسعراً جديداً بـ ins.
اختياري: أضف ملاحظة صغيرة بأسلوب حاشية بـ small، أو جزءاً من صيغة بـ sub / sup.
احفظ وافتح الصفحة. تأكد أن الوسوم مغلقة وأن المعنى يُقرأ بوضوح.
اترك وسم إغلاق واحد عمداً، حدّث الصفحة، لاحظ كيف يبقى باقي السطر منسّقاً، ثم أصلحه.
رؤية تسرّب أسلوب وسم غير مغلق عبر الفقرة يدرّب التداخل الحذر أسرع من نسخ أمثلة مثالية فقط.

أخطاء تضعف التنسيق

استخدام style="font-weight: bold" فقط عندما تكون الكلمة مهمة فعلاً — فضّل strong للمعنى
استخدام strong في كل مكان فقط لجعل النص أثخن — ذلك يخفّف معنى الأهمية
تداخل خمسة وسوم تنسيق داخل بعضها بلا سبب
استخدام sup / sub للزينة بدل الصيغ الحقيقية (رياضيات، كيمياء، حواشٍ)
نسيان وسوم الإغلاق فيرث باقي الصفحة العريض أو المائل أو التمييز
معاملة mark كأداة طلاء صفراء عامة لفقرات كاملة غير مرتبطة

ملخص

وسوم التنسيق تضيف معنى داخل النص، وليس الزينة فقط
ابدأ بـ strong وem، ثم أضف mark وsmall وdel وins وsub وsup عند الحاجة
فضّل الوسوم الدلالية عندما تهم الأهمية أو التأكيد أو التعديلات أو الصيغ
استخدم CSS عندما تحتاج مظهراً فقط دون معنى إضافي
أبقِ التداخل بسيطاً وأغلق دائماً كل وسم تفتحه
اختر الوسوم من معنى الجملة، لا من عادة تعريض كل شيء

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة