خمسة عناصر دلالية للمحتوى التقني والبرمجي:
• <code>: كود برمجي مضمّن في النص. يعرضه بخط monospace.
• <pre>: نص محدد المسافات — يحترم المسافات وأسطر الكود كما كُتبت. يستخدم دائماً مع <code> لعرض كتل كود.
• <kbd>: مدخلات لوحة المفاتيح. يعني "اضغط هذا المفتاح".
• <samp>: مثال مخرجات البرنامج (Sample Output). يعني "هذا ما سيطبعه البرنامج".
• <var>: متغير رياضي أو برمجي. يُعرض مائلاً.
| 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: توثيق API
| 1 | <section> |
| 2 | <h2>طريقة الاستخدام</h2> |
| 3 | |
| 4 | <p>اتصل بالدالة <code>fetchData(url)</code> وأرسل الـ URL:</p> |
| 5 | |
| 6 | <pre><code>const data = await fetchData('https://api.example.com/users'); |
| 7 | console.log(data); // طباعة البيانات</code></pre> |
| 8 | |
| 9 | <p>النتيجة المتوقعة:</p> |
| 10 | <samp>{ "users": [{ "id": 1, "name": "أحمد" }] }</samp> |
| 11 | |
| 12 | <p>اضغط <kbd>F12</kbd> لفتح Developer Tools.</p> |
| 13 | |
| 14 | <p>المتغير <var>n</var> يمثل عدد العناصر.</p> |
| 15 | </section> |