| العنصر | نوع التأثير | الوظيفة والدلالة البرمجية، متى يُستخدم؟ |
|---|---|---|
| strong | دلالي (Semantic) | يعلن أن النص ذو أهمية قصوى وتشدد عليه قارئات الشاشة بصوت مرتفع، يُستخدم للتحذيرات والنقاط الحرجة |
| b | مرئي وبصري فقط (Visual) | يجعل الخط عريضاً وسميكاً دون إعطاء أي أهمية دلالية في محركات البحث، يُستخدم لجذب الانتباه للكلمات المفتاحية |
| em | دلالي (Semantic) | يعلن عن نبرة تأكيد وتشديد على الكلمة وتغير قارئات الشاشة نبرة الصوت عند مروره، يُستخدم للكلمات التي تغير معنى الجملة |
| i | مرئي وبصري فقط (Visual) | يجعل الخط مائلاً دون قيمة دلالية إضافية، يُستخدم للمصطلحات العلمية أو الكلمات الأجنبية والأفكار الداخية |
في لغة HTML، لا تقتصر كتابة النصوص على عرض الكلمات فحسب، بل تمتد لتحديد "معنى" النص وكيفية فهمه من قِبل محركات البحث وتقنيات المساعدة. توفر اللغة أربعة عناصر أساسية لتنسيق وإبراز النصوص، تنقسم هندسياً إلى نوعين: عناصر دلالية وعناصر مرئية.
العناصر الدلالية هي الأوسمة التي تشرح للمتصفح، لمحركات البحث (SEO)، ولأنظمة قارئات الشاشة (Screen Readers) المخصصة للمكفوفين طبيعة ومعنى هذا النص، وليس مجرد شكله البصري.
هي أوسمة تنسيق سطحي وتجميلي فقط، تُخبر المتصفح بكيفية عرض النص للعين المجردة دون أن تحمل أي قيمة أو معنى دلالي يفهمه الزاحف البرمجي لمحركات البحث أو قارئ الشاشة.
| 1 | <!-- دلالي - مهم للـ SEO والوصولية --> |
| 2 | <p>تحذير: <strong>لا تحفظ كلمة مرورك في ملفات نصية!</strong></p> |
| 3 | <p>المقصود هو <em>الجودة</em> وليس الكمية.</p> |
| 4 | |
| 5 | <!-- مرئي فقط --> |
| 6 | <p>المنتجات الأكثر مبيعاً: <b>لابتوب، موبايل</b></p> |
| 7 | <p>المصطلح العلمي: <i>Homo sapiens</i></p> |
| 8 | |
| 9 | <!-- دمجهما --> |
| 10 | <p><strong><em>ملاحظة مهمة جداً:</em></strong> احفظ عملك دورياً.</p> |
مثال 1: استخدامات واقعية
| 1 | <article> |
| 2 | <p> |
| 3 | لتعلم البرمجة تحتاج <strong>الممارسة اليومية</strong>، |
| 4 | فالقراءة وحدها <em>لا تكفي</em>. |
| 5 | </p> |
| 6 | <p> |
| 7 | اللغة الموصى بها للمبتدئين هي <i>Python</i> |
| 8 | وهي أيضاً الأكثر <b>شعبية</b> في علم البيانات. |
| 9 | </p> |
| 10 | </article> |