دلالات semantics

في البرمجة فأن كلمة semantics تشير الى معنى قطعه من الكود code. اليوم نتحدث عن معنى العناصر وليس مظهرها. هذا الموضوع الشيق يأخذنا الى ابعد من ذلك من خلال تركيز على معنى كتابة الكود code. وطرح تسائل مهم هو "ماهو تأثير هذا السطر عندما نقوم بتنفيذ الايعاز؟" وربما يأخذنا الى ابعد من ذلك بقليل "ماهو الغرض او الدور الذي يلعبة هذا العنصر في الـ html ؟".

دعنا نأخذ العنصر <h1> كمثال تطبيقي، فهو عنصر دلالي semantics يقوم بإعطاء النص الذي يحيطه القدرة على أن يؤدي دور (أو وظيفة) "مستوى العنونة الأوّل في صفحتك" (أي أوَّل عنوان رئيسي في الصفحة).

<h1>هذا مستوى العنونة الأوّل</h1>

يُنسَّق العنصر السابق، إفتراضياً، بحجم خط كبير لجعله عنواناً (بالرغم من أنَّه يمكنك إعادة تصميمه وتنسيقه لتغيير شكله جذرياً)، ولكن الأكثر أهميّة من شكله هو القيمة الدلاليّة (semantic) التي يحملها هذا العنصر ويمكن استخدامها في طرق متعددة، كاستخدامها من قبل محركات البحث عبر اعتبار هذا الجزء من المحتوى (العنوان) كلمة مفتاحيّة مهمة ستُؤثِر على ترتيب الموقع في نتائج البحث (طالع مصطلح تحسين محركات البحث)، أو كاستخدام قيمة العنوان الدلاليّة من قبل قارئِات الشاشة كإشارة (أو ما يسمى بعلامة الإرشاد) لمساعدة المستخدمين المتضررين بصرياً على التنقل بين محتويات الصفحة.

على الرغم من كل ما سبق، يمكنك جعل أي عنصر يبدو كعنوان ذو درجة عنونة أولى. دعنا نأخذ المثال أدناه على سبيل المثال:

<span style="font-size: 32px; margin: 21px 0;">هل هذا مستوى العنونة الأوّل؟</span>

سيُعرَض هذا العنصر في المتصفح كعنوان من الدرجة الأولى، ولكنه لن يحمل أي قيمة دلاليّة، وبالتالي لن تستفيد من الفوائد الإضافيّة التي تضفيها هذه القيمة كما شُرِحَ أعلاه. وبالتالي، من الأفضل استخدام عنصر ل.ت.ن.ف الصحيح في المكان الصحيح لإنجاز المهمة المخصص لها.

الـ semantics  و الجافا سكربت javaScript

لنفهم الـ semantics في الجافا سكربت javaScript علينا ان نأخذ مثال يقوم بانشاء عنصر ولنقل مثلا عنصر <li>. الدالة function التي تقوم بهذا الامر تقوم بأرجاع هذا العنصر ونحن نقوم فقط بارسال محتوى العنصر textContent. حسناً اذا اسمينا الدالة باسم build وقمنا باستخدامها : 

build('Peach');

بالتأكيد لم تسطيع فهم عمل هذه الدالة الى في حالة رؤية الكود الداخلي الخاص بها. او البعض يحل المشكلة باستخدام التعليقات comments . وهذا حل ليس مثاليا. 

الحال المثالي ان تجعل اسم الدالة يدعى على عملها. بهذا حققت غالية الـ semantics ولا تحتاج الى سطر اضافي لتعليقات comments: 

createLiWithContent('Peach')

برأيك من هو الاحلى والافضل الدالة build او createLiWithContent ؟!!! 

عناصر دلاليّة

يوجد أدناه بعض من عناصر ل.ت.ن.ف الدلاليّة (مأخوذة من هنا):

المزيد من التفاصيل

معلومات عامة

مراجع تقنيّة