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

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

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

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

▶ مثال

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

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. الاقتباسات والنص الخاص

▶ مثال

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

<!-- اقتباس كتلة -->
<blockquote>
الحياة مثل علبة الشوكولاتة، لا تعرف أبدًا ما الذي ستحصل عليه.
<cite>— فورست غامب</cite>
</blockquote>

<!-- اقتباس سطري -->
<p>قال رسول الله صلى الله عليه وسلم: <q>إنما الأعمال بالنيات.</q></p>
### ▶ مثال

<!-- اختصار -->
<p><abbr title="شبكة الويب العالمية">WWW</abbr> غيرت العالم.</p>

<!-- معلومات الاتصال -->
<address>
المؤلف: أحمد علي<br>
البريد الإلكتروني: ahmed@example.com
</address>

<!-- اتجاه النص -->
<p><bdo dir="rtl">هذا النص يُعرض من اليمين إلى اليسار</bdo></p>

❓ أسئلة شائعة

📖 ملخص

• <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 التقني

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

من نحن