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

آخر تحديث: 2026-09-08

وسوم التنسيق تجعل النص أكثر من مجرد كلمات — عريض، مائل، يتوسطه خط، مرتفع، منخفض، اقتباسات. لكل تنسيق وسم دلالي مقابل يغير المظهر وينقل المعنى.

وسوم هذا القسم: <b> <i> <strong> <em> <del> <ins> <u> <mark> <small> <pre> <sub> <sup> <blockquote> <q> <abbr> <cite> <address> <bdo>

1. العريض والمائل

<b> يجعل النص عريضًا، و <i> يجعل النص مائلاً. ومع ذلك، يوصي HTML5 باستخدام <strong> الدلالي (للإشارة إلى محتوى مهم) و <em> (للإشارة إلى التأكيد)، لأن المتصفحات ومحركات البحث يمكنها فهم معناها، وليس فقط التنسيق البصري.

▶ مثال

2. الحذف والإدراج والتمييز

<del> يعرض نصًا يتوسطه خط، للإشارة إلى محتوى تم حذفه؛ <ins> يعرض نصًا تحته خط، للإشارة إلى محتوى مدخل حديثًا. لاحظ أن <u> ينتج أيضًا تأثير تسطير، لكن <ins> يحمل المعنى الدلالي لـ "إضافة جديدة"، بينما <u> يغير المظهر فقط. بالإضافة إلى ذلك، <mark> يميز النص مثل قلم التمييز؛ <small> يمثل ملاحظات إضافية بخط صغير، تُستخدم عادةً لإخلاء المسؤولية أو معلومات حقوق النشر.

<p>السعر الأصلي: <del>199$</del> <ins>129$</ins></p>
### ▶ مثال
<p>لا تنسَ الاجتماع <mark>غدًا الساعة 3 مساءً</mark>.</p>
<p><small>* يحتفظ المنظم بالحق في التفسير النهائي لهذا الحدث.</small></p>

بالإضافة إلى ذلك، وسم <pre> (النص المنسق مسبقًا) يحافظ على المسافات وفواصل الأسطر من الكود المصدر، مما يجعله مثاليًا لعرض مقتطفات الكود أو فن ASCII البسيط:

<pre>
+---------------------------+
|    Web-Tutorial.com       |
|   HTML · CSS · JavaScript |
+---------------------------+
### ▶ مثال
</pre>

3. الحرف المنخفض والمرتفع

<sub> يعرض النص كحرف منخفض، و <sup> يعرض النص كحرف مرتفع. يُستخدمان عادةً في الصيغ الكيميائية والمعادلات الرياضية والحواشي السفلية.

<p>الصيغة الكيميائية للماء هي H<sub>2</sub>O</p>
<p>معادلة أينشتاين للطاقة: E=mc<sup>2</sup></p>
<p>حاشية هذا المقال<sup>[1]</sup> في أسفل الصفحة.</p>

4. الاقتباسات والنص الخاص

▶ مثال

هذه الوسوم تُستخدم خصيصًا لتمثيل الاقتباسات والاختصارات ومعلومات الاتصال ومحتوى خاص آخر:

وسوم هذا القسم: <b> <i> <strong> <em> <del> <ins> <u> <mark> <small> <pre> <sub> <sup> <blockquote> <q> <abbr> <cite> <address> <bdo>

❓ أسئلة شائعة

📖 ملخص

• <strong> يشير إلى الأهمية، <em> يشير إلى التأكيد — أكثر دلالية من <b> و <i>
• <del> يتوسطه خط، <ins> تسطير دلالي، <u> تسطير تنسيقي، <mark> تمييز، <small> خط صغير
• <sub> حرف منخفض، <sup> حرف مرتفع، <pre> يحافظ على المسافات وفواصل الأسطر
• <blockquote> اقتباس كتلة، <q> اقتباس سطري، <abbr> اختصار، <address> معلومات الاتصال، <cite> عنوان العمل، <bdo> اتجاه النص

📝 تمارين

1. نسّق قطعة نص: اكتب رسالة ترويجية لمنتج تتضمن السعر الأصلي (يتوسطه خط)، سعر البيع (تسطير إدراج)، ملاحظة الخصم (نص صغير)، وعلامة مميزة "عرض لفترة محدودة".
2. الصيغ الكيميائية والأسس: استخدم <sub> و <sup> لكتابة CO₂ و x² + y² = z².
3. الفحص الذاتي: افتح موقعًا إخباريًا في متصفحك، انقر بزر الماوس الأيمن "تفقد"، وافحص وسوم HTML المستخدمة للاقتباسات والنص المؤكد والحواشي في المقال. هل يمكنك تحديد أي منها يستخدم <strong> وأيها يستخدم <b>؟

فريق Web-Tutorial التقني

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

من نحن