الأكواد البرمجية في صفحة الويب
في عالم تطوير الويب، تُعد لغة HTML حجر الأساس لبناء صفحات الويب وتنظيم محتواها. ولا يقتصر دورها على عرض النصوص والصور فقط، بل تمتد أيضًا لتشمل عرض الأكواد البرمجية بطريقة واضحة ومنسقة تساعد القارئ أو المستخدم على فهمها بسهولة. ومن هنا تأتي أهمية استخدام الأوسمة الدلالية (Semantic Tags) التي تمنح الصفحة معنى وهيكلًا منظمًا، خصوصًا عند التعامل مع الأكواد البرمجية ومخرجاتها…
في مقالات سابقة تعرفنا على العديد من ووسوم الـ HTML في هذا المقال سنعرف أهمية الوسوم الدلالية عن غيرها من الوسوم كما سنتعرض وبشكل مفصل وسوم الـ HTML المستخدمة في كتابة وعرض الأكواد البرمجية في صفحات HTML بشكل احترافي وسهل القراءة…
في هذا المقال سنتعرف على:
- نبذة عن الأوسمة الدلالية (Semantic Tags).
- الأوسمة الدلالية لتمثيل الأكواد البرمجية في صفحة HTML.
- شرح تفصيلي لأهم الوسوم المستخدمة مثل:
نبذة عن الأوسمة الدلالية (Semantic Tags)
الأوسمة الدلالية (Semantic Tags) في HTML هي وسوم تعطي معنى ودلالة واضحة لمحتوى الصفحة بدلًا من مجرد تحديد شكلها أو تنسيقها. بمعنى آخر، عندما يستخدم المطوّر هذه الوسوم، يفهم المتصفح ومحركات البحث دور المحتوى الموجود داخلها.
الأوسمة الدلالية (Semantic Tags) يمكن تعريفها بأنها وسوم HTML تصف الغرض أو وظيفة المحتوى الموجود بداخلها بشكل صريح، وهو ما يساعد في:
- تعزز الوصولية (Accessibility) لمستخدمي التقنيات المساعدة.( التقنيات المساعدة مثل قارئات الشاشة تميّز نوع المحتوى)
- تحسين الظهور في محركات البحث (SEO) محركات البحث تفهم هيكل الصفحة واستخدام الاوسمة الدلالية يسهل في فهم محركات البحث لهيكل الصفحة..(مثل رأس صفحة، مقالة، تنقّل…) وليس مجرد كونه نصًا أو صورة.
- جعل الكود منظمًا وسهل القراءة والصيانة.
- قابلية إعادة الاستخدام وهو ما يسهل على المطورين الآخرين فهم الكود بسرعة.
الفرق بين الأوسمة الدلالية وغير الدلالية:
- وسوم دلالية توضح وظيفة المحتوى بداخلها.
- وسوم غير دلالية لا تحمل معنى بحد ذاتها، مجرد حاويات يمكن تنسيقها بـCSS مثل <div>, <span> .
أمثلة على الأوسمة الدلالية في HTML5:
الأمثلة على الاوسمة الدلالية كثيرة وسبق وتكلمنا عنها في مقالات سابقة مثل : الاوسمة في مقال عناصر تقسيم الصفحة مثل ، <header> ، <nav> ، <main> ، <article> ، <section>، <aside> ،<footer> والعديد من الأوسمة مثل:
- <figure> يمثل صورة أو رسم توضيحي مع تعليق مرتبط بها.
- <figcaption> يمثل التعليق المرفق بالصورة أو الرسم في <figure>.
- <mark> يحدد النصوص المميزة أو المظللة.
- <time> يمثل تاريخًا أو وقتًا بشكل دلالي يمكن للمتصفح فهمه.
هنالك المزيد من الأوسمة الدلالية المستخدمة في لغة HTML في هذا المقال سنتطرق للأوسمة الدلالية الخاصة بعرض الأكواد البرمجية على صفحات الويب.
الأوسمة الدلالية لتمثيل الأكواد البرمجية في صفحة HTML
عند إدراج الأكواد البرمجية في صفحات الويب، لا يكفي مجرد وضعها كنصوص عادية، بل يجب استخدام وسوم دلالية مخصصة تجعل المتصفح ومحركات البحث والأدوات المساعدة تدرك أن هذا المحتوى عبارة عن كود برمجي وليس نصًا عاديًا.
فعند إنشاء صفحات ويب تحتوي على شفرات أو أوامر برمجية، لا يكون الهدف مجرد عرض هذه الأكواد بشكل نصي فحسب، بل من المهم أن تظهر للقارئ بطريقة منظمة وواضحة تعكس طبيعتها البرمجية وتُسهِّل فهمها وتمييزها عن باقي النصوص العادية. هنا يأتي دور الأوسمة الدلالية (Semantic Tags) التي أُضيفت إلى HTML لتمنح المحتوى معنىً وهيكلاً واضحين.
وتكمن أهمية الأوسمة الدلالية الخاصة بعرض الأكواد البرمجية في أنها:
- تعرف نوع المحتوى للمتصفح ومحركات البحث على أنه شفرة برمجية وليس نصًا عاديًا.
- تحسن تجربة المستخدم عبر تسهيل قراءة الأكواد وفهم المدخلات والمخرجات.
- تدعم الوصولية (Accessibility) حيث تتعرف أدوات المساعدة مثل قارئات الشاشة على طبيعة النص.
- الحفاظ على التنسيق الصحيح للمسافات والأسطر في الأكواد البرمجية.
ومن أبرز هذه الوسوم التي تقدمها HTML لتمثيل الأكواد البرمجية بطريقة صحيحة:
- الوسم <pre> : للحفاظ على تنسيق الأكواد والأسطر كما هي مكتوبة.
- الوسم <code> : لتعريف النصوص على أنها أوامر أو أكواد برمجية.
- الوسم <samp>: لتمثيل مخرجات البرامج أو الأوامر بشكل مميز.
- الوسم <kbd> : لتمثيل المدخلات التي يكتبها المستخدم مثل أوامر سطر الأوامر أو اختصارات لوحة المفاتيح.
باستخدام هذه الوسوم بشكل صحيح، يمكن لأي مطور ويب تقديم الأكواد البرمجية داخل صفحات HTML بشكل احترافي ومنظم يسهل قراءته وفهمه ويمنح الصفحة قيمة دلالية إضافية. فيما يلي سنتعرض هذه الوسوم بالتفصيل لفهم دور كل منها في عرض الأكواد البرمجية بشكل صحيح واحترافي.
الوسم <pre>
الوسم <pre> في HTML اسمه اختصار لـ Preformatted Text أي “النصوص المهيأة مسبقاً”. وهو وسم دلالي يُستخدم لعرض النصوص كما هي مكتوبة بالضبط في شيفرة المصدر(source code ) للصفحة، بما في ذلك المسافات والأسطر الجديدة.
أي يمكن أن يعرّف الوسم <pre> كتلة من النصوص أو الأكواد التي يجب أن تظهر على الصفحة بنفس التنسيق الأصلي (المسافات – الأسطر). المتصفح يعرض النص داخل <pre> بخط monospace (أحادي المسافة) افتراضيًا.
كما يوضح المثال التالي:
...........
<pre> Hello World! </pre>
...........
الـ Output للمثال:
النتيجة في المتصفح ستظهر بالضبط كما كتبتها، مع المسافات والأسطر الجديدة.كما يمكن تخصيص شكل النص داخل <pre> عبر تنسيقية بواسطة CSS بإضافة خلفية أو حدود أو ألوان.
مميزات <pre>:
- يحافظ على التنسيق الأصلي للنصوص.
- يسهل عرض الأكواد أو البيانات المنظمة.
- يمكن دمجه مع وسوم أخرى مثل <code> لزيادة الدقة الدلالية.
استخداماته الشائعة:
- عرض الأكواد البرمجية مع تنسيقها.
- عرض نصوص أو بيانات لها تنسيق محدد (مثل ASCII Art أو بيانات جدولية).
- الحفاظ على المسافات والأسطر عند عرض محتوى خام.
الوسم <code>
الوسم <code> في HTML هو وسم دلالي (Semantic Tag) يُستخدم لعرض نصوص أو أكواد برمجية (Code Snippets) داخل صفحات الويب. بمعنى أنه يُخبر المتصفح ومحركات البحث أن ما بين الوسمين هو نص يمثل كود برمجي وليس نصًا عادياً.
الوسم <code> يحدد نصوصًا على أنها كود برمجية. لا يقوم الوسم بتطبيق تمييز بصري كبير بشكل افتراضي سوى أنه يستخدم خطًا ثابت العرض (monospace) لعرض النصوص، مثل Courier.
لنرى المثال التالي :
...........
<p>In Python, we use the print function like this example:<code>print("Hello World")</code> </p>
...........الـ Output للمثال:
في النتيجة يظهر النص بين <code> بخط أحادي المسافة، مما يوضح للقارئ أنه كود برمجي.
مزايا الوسم <code>:
- وسم دلالي Semantic يوضح للمتصفح أن النص عبارة عن كود برمجي.
- سهولة التنسيق: يمكن استخدام CSS لتنسيق الكود بشكل أجمل.
- توافق مع محركات البحث: يساعد على تمييز أجزاء الكود عند أرشفة الصفحات.
أفضل الممارسات:
عند عرض كتلة كاملة من الكود البرمجي يفضل دمج <code> مع الوسم <pre> حتى يتم الحفاظ على المسافات والأسطر، لاحظ المثال التالي :
...........
<pre><code>
function hello() {
console.log("Hello World");
}
</code></pre>
...........
هذا يحافظ على تنسيق الكود كما هو في المحرر.و يمكن استخدام CSS لإضافة تلوين للكود (Syntax Highlighting) أو تخصيص الخلفية كتالي :
...........
code {
background-color: #78a4be;
color:#732121;
}
...........الـ Output للمثال:
الفرق بين <pre> و <code>:
| الوسم | الاستخدام الأساسي | المحافظة على المسافات والأسطر |
|---|---|---|
| code | حديد النصوص كأكواد برمجية قصيرة (Inline) | لا |
| pre | عرض نص أو كود مع الحفاظ على التنسيق والمسافات | نعم |
الوسم <samp>
الوسم <samp> في HTML اسمه اختصار لـ Sample Output أي “ناتج تجريبي أو مخرجات نموذجية . وهو وسم دلالي (Semantic Tag) يُستخدم لتمثيل الناتج أو المخرجات (Sample Output) الخاصة ببرنامج أو أمر أو كود برمجي. يُستخدم الوسم <samp> لعرض النصوص التي تمثل مخرجات برنامج أو نظام. المتصفح يعرض النص داخل <samp> بخط monospace (أحادي المسافة) بشكل افتراضي (مثل وسوم <code> و <pre>).
ويوضح المثال التالي طريقة استخدام الوسم <samp>:
...........
<p>When you enter this command : <code>dir</code></p>
<p>You show this output: <samp> Volume in drive C is Windows</samp></p>
...........الـ Output للمثال:
النص الموجود في <samp> يظهر كمخرجات برنامج بشكل مميز.كما يمكن تنسيقة بواسطة CSS.
مميزات <samp>:
- يضيف دلالة واضحة أن النص هو مخرجات برنامج.
- يساعد المستخدمين ومحركات البحث وأدوات المساعدة على فهم السياق (Output).
- يعمل بخط أحادي المسافة افتراضيًا ليبدو مثل مخرجات سطر الأوامر أو البرامج.
استخداماته الشائعة:
- عرض مخرجات Output البرامج أو الأوامر.
- تمثيل رسائل النظام أو رسائل الخطأ للمستخدم.
- توضيح الفرق بين الكود الذي يكتبه المستخدم وبين الناتج الذي يظهر له.
الوسم <kbd>
الوسم <kbd> في HTML اسمه اختصار لـ Keyboard Input أي “إدخال لوحة المفاتيح”. وهو وسم دلالي (Semantic Tag) يُستخدم لتمثيل المدخلات من لوحة المفاتيح أو أوامر يكتبها المستخدم.
يُستخدم الوسم <kbd> لتوضيح أن النص بداخله يمثل شيئًا يكتبه المستخدم، مثل مفاتيح على لوحة المفاتيح أو اختصارات أو أوامر إدخال. المتصفح يعرض النص داخل <kbd> بخط monospace (أحادي المسافة) افتراضيًا (مثل باقي وسوم الأكواد).
لنرى المثال التالي:
...........
<p>For copy text press: <kbd>Ctrl</kbd> + <kbd>C</kbd></p>
...........يمكن تنسيقية عبر CSS:
...........
kbd {
background-color:#969191;
color:#180871; }
...........
الـ Output للمثال:
في النتيجة يظهر “Ctrl + C” بخط أحادي المسافة ليبدو كمفتاح على لوحة المفاتيح. ايضا يمكن تنسيقة بواسطة CSS. (المزيد عن الـ CSS في سلسلة مقالات تشرح الـ CSS).
مميزات <kbd>:
- يضيف دلالة واضحة على أن النص يمثل إدخالًا من لوحة المفاتيح.
- يساعد المستخدم على تمييز التعليمات الخاصة بالكتابة أو الضغط على المفاتيح.
استخداماته الشائعة:
- تمثيل اختصارات لوحة المفاتيح مثل Ctrl+C أو Ctrl+V.
- تمثيل ما يجب أن يكتبه المستخدم في سطر الأوامر أو حقول الإدخال.
- توضيح الفرق بين النصوص العادية وبين مدخلات المستخدم.
باختصار الفرق بين الوسوم الدلالية <code> و <samp> و <kbd> كتالي :
| الوسم | الغرض الأساسي | أمثلة على الاستخدام |
|---|---|---|
| code | لعرض الأكواد البرمجية (التي يكتبها المبرمج) | أوامر أو دوال |
| samp | لعرض المخرجات الناتجة عن الأكواد أو الأوامر | نتائج تشغيل برنامج |
| kbd | لتمثيل الإدخال من لوحة المفاتيح | المفاتيح أو الاختصارات |
جميع الاكواد في هذا المقال متوفرة على الرابط.
إن استخدام الأوسمة الدلالية في HTML لعرض الأكواد البرمجية ليس مجرد خيار شكلي، بل هو عنصر أساسي يضمن تنظيم المحتوى وتحسين فهمه لكل من القارئ ومحركات البحث والأدوات المساعدة. فالوسوم مثل pre, code, samp, و kbd تمنح المطوّر القدرة على عرض الأكواد بشكل واضح واحترافي مع الحفاظ على التنسيق والتمييز بين الأكواد والمدخلات والمخرجات. ومع الالتزام باستخدام هذه الوسوم بالشكل الصحيح، تصبح صفحات الويب أكثر وضوحًا، وأكثر سهولة في القراءة، وأكثر توافقًا مع معايير الويب الحديثة.