في هذا الجزء من سلسلة HTML/CSS ندرس أكثر الوسوم الأساسية استخدامًا: فقرة (<p>)، غامق (<b>، <strong>)، مائل (<i>، <em>)، أسفل/أعلى (<sub>، <sup>)، خط أفقي (<hr>).
الوسوم واحدًا واحدًا
1. فقرة — <p>
يجمع النص في فقرة. المتصفح يضيف فراغًا فوق وتحت.
<p>هذه فقرة.</p>2. غامق — <b> و <strong>
كلاهما يظهر النص غامقًا، لكن المعنى مختلف:
<b>: غامق بصري فقط (stylistic).<strong>: يحمل معنى الأهمية — قارئات الشاشة تؤكّد، مفيد لـSEO.
3. مائل — <i> و <em>
<i>: مائل للكلمات الأجنبية والمصطلحات.<em>: يحمل معنى التأكيد.
4. أسفل/أعلى — <sub> و <sup>
صيغ كيميائية (H2O)، رياضية (E = mc2).
H<sub>2</sub>O
E = mc<sup>2</sup>5. خط أفقي — <hr>
فاصل موضوعي. في HTML الحديث يعني «تغيير قسم».
<hr>وسوم إضافية لـ2026
في 2015 كان HTML5 جديدًا. اليوم هذه الوسوم semantic شائعة:
<mark>: نص مميّز (highlight أصفر).<ins>/<del>: مُضاف / محذوف.<abbr>: اختصار (يظهر عند hover).<kbd>: إدخال لوحة مفاتيح (مثل Ctrl + S).<code>: جزء كود.<cite>: مصدر اقتباس.<time>: تاريخ/وقت — هيكلي لـGoogle.
ملاحظة 2026: في CSS الحديث font-weight وfont-style يعطيان نفس المظهر. لكن اختيار الوسم الصحيح مهم لـإمكانية الوصول (a11y) وSEO — prefer
<strong> إن كانت الكلمة مهمة فعلًا.
