| العنصر | المظهر الافتراضي في المتصفح | الوظيفة الدلالية ومثاله الواقعي |
|---|---|---|
| code | خط أحادي المسافة مدمج في نفس السياق | يحدد الكلمات البرمجية أو أسماء الدوابع داخل الجملة دون كسر السطر |
| pre | كتلة مستقلة تحافظ على نفس الأسطر والفراغات | يعرض النصوص البرمجية الكبيرة تماماً كما كتبت يدوياً في محرر الأكواد |
| kbd | خط أحادي المسافة يحيطه بعض المطورين بإطار | يمثل الأزرار أو الاختصارات التي يجب على المستخدم الضغط عليها في لوحة المفاتيح |
| samp | خط أحادي المسافة قياسي | يمثل رسائل النظام أو مخرجات الكود التي تظهر للمستخدم نتيجة تشغيل البرنامج |
| var | خط مائل محايد | يمثل المتغيرات الرياضية أو المعاملات البرمجية التي تتغير قيمتها داخل المعادلة أو الشيفرة |
إذا كنت تبني موقعاً تعليمياً، أو مدونة تقنية، أو منصة لعرض الشروحات البرمجية مثل منصتنا، فلن يكفيك استخدام وسوم النصوص العادية. محركات البحث وأنظمة المساعدة بحاجة لتعرف أين هو الكود، وأين هي مخرجات النظام، وما الذي يجب على المستخدم ضغطه في لوحة المفاتيح.
لغة HTML توفر 5 وسوم أساسية مخصصة بالكامل للمحتوى الهندسي والتقني.
يُستخدم هذا الوسم لتحديد كلمة برمجية واحدة أو أمر برمي قصير داخل سياق الكلام. يقوم المتصفح تلقائياً بعرض هذا النص بخط أحادي المسافة (Monospace) - وهو الخط الذي تكون فيه جميع الحروف متساوية في العرض تماماً مثل الخطوط المستخدمة في محررات الأكواد (VS Code). مثال: عندما تريد إخبار الطالب: "قم باستدعاء الدالة print في لغتك".
بشكل افتراضي، يقوم المتصفح بتجاهل المساحات الزائدة (Spaces) وسطور النزول الجديدة (Enter) التي تكتبها في ملف الـ HTML ويضغطها كلها في مسافة واحدة. وسم pre (مختصر Preformatted) جاء ليلغي هذه الخصائص؛ فهو يجبر المتصفح على عرض النص تماماً وبالميليمتر كما كتبته في المحرر بمساحاته وسطور الطولية.
الخلطة السحرية: في المواقع التقنية، نقوم دائماً بدمج الوسمين معاً وتغليف وسم code داخل وسم pre لعرض كتل البرمجة الطويلة (Code Blocks) لتظهر منسقة ومرتبة.
يُمثل كلمة (Keyboard). يُستخدم هذا الوسم للإشارة إلى زر أو اختصار مطلوب من المستخدم النقر عليه في لوحة المفاتيح أو إدخاله في النظام. مثال: لنسخ الكود اضغط على Ctrl + C. (تلميح محترف: المطورون يقومون بتنسيقه عبر CSS ليظهر على شكل زر حقيقي بارز).
يُمثل كلمة (Sample Output). يُستخدم لعرض الرسائل الناتجة عن أخطاء السيرفر، أو مخرجاتTerminal، أو استجابة البرامج بعد تشغيلها. يخبر هذا الوسم محرك البحث أن هذا النص ليس شرحاً من الكاتب وليس كوداً يكتبه المطور، بل هو "نتيجة وعينة" مما يطبعه التطبيق.
يُمثل كلمة (Variable). يُستخدم لتحديد المتغيرات الرياضية في المعادلات أو المتغيرات البرمجية داخل الشروحات. يقوم المتصفح بعرضه بشكل مائل (Italic) افتراضياً لتمييزه كعنصر متغير القيمة.
| 1 | <!-- code: كود مضمّن --> |
| 2 | <p>استخدم الدالة <code>console.log()</code> للطباعة.</p> |
| 3 | |
| 4 | <!-- pre + code: كتلة كود --> |
| 5 | <pre><code>function greet(name) { |
| 6 | return "مرحباً " + name; |
| 7 | } |
| 8 | console.log(greet("أحمد"));</code></pre> |
| 9 | |
| 10 | <!-- kbd: مفاتيح لوحة المفاتيح --> |
| 11 | <p>اضغط <kbd>Ctrl</kbd> + <kbd>C</kbd> للنسخ.</p> |
| 12 | |
| 13 | <!-- samp: مخرجات البرنامج --> |
| 14 | <p>ستظهر: <samp>Hello, World!</samp></p> |
| 15 | |
| 16 | <!-- var: متغير --> |
| 17 | <p>في المعادلة: <var>y</var> = <var>mx</var> + <var>b</var></p> |
| 1 | <!-- 1. استخدام code للمصطلحات المدمجة --> |
| 2 | <p>في لغة بايثون، نستخدم الأمر <code>print()</code> لطباعة النصوص على الشاشة.</p> |
| 3 | |
| 4 | <!-- 2. دمج pre و code لعرض كتل برمجية كاملة ومنظمة --> |
| 5 | <p>إليك كود دالة حساب المجموع:</p> |
| 6 | <pre><code>function calculateTotal(price, tax) { |
| 7 | let total = price + tax; |
| 8 | return total; |
| 9 | }</code></pre> |
| 10 | |
| 11 | <!-- 3. استخدام kbd لتوضيح اختصارات النظام --> |
| 12 | <p>لفتح أدوات المطورين في المتصفح، انقر على زر <code><kbd>F12</kbd></code>.</p> |
| 13 | <p>لإعادة تحميل الصفحة بدون كاش اضغط <code><kbd>Ctrl</kbd></code> + <code><kbd>Shift</kbd></code> + <code><kbd>R</kbd></code>.</p> |
| 14 | |
| 15 | <!-- 4. استخدام samp لعرض مخرجات الأكواد ورسائل الخطأ --> |
| 16 | <p>إذا قمت بالقسمة على صفر، سيظهر لك النظام الرسالة التالية:</p> |
| 17 | <p><samp>Error: Division by zero at line 14.</samp></p> |
| 18 | |
| 19 | <!-- 5. استخدام var في المعادلات الرياضية والبرمجية --> |
| 20 | <p>معادلة أينشتاين الشهيرة هي: <var>E</var> = <var>m</var><var>c</var><sup>2</sup></p> |
| 21 | <p>حيث يمثل المتغير <var>m</var> الكتلة، بينما يمثل <var>c</var> سرعة الضوء.</p> |