دائمـا عنـدما تقـرأ مقـالة أو تسـأل صديق لـك عن نصـائح لكـي تكـون مطـور ويب محترف أو طريقة لكتابة الكـود بافضل الطرق تجـد دائمـا مصطلـح Semantic حاضرا أمامك اذا ما هو الـSemantic ولماذا يجب علينا اتباعه؟

في التـرجمـة الحـرفيـة للكلـمة نجـد أن كلمـة Semantic تعنـي "الدلالة اللفظيه" ، اذا ماذا تعنـي هذه الجملـة في طريقـة كتـابة الكـود؟

كمـا نعـرف ان HTML هي لغـة هيكلية "Structure language" اى أن هدفها هو بناء العناصر وليست لغة مظهر ، لذلك في التحديـث الأخيـر للـHTML تم ازاله عنـاصر في اللغـة و اضافة عنـاصر أخري بدل منها لتأدية الدور المخصص للغـة ولكـن مفهـوم الـsemantic  كان أيضا حاضرا قبل التحديث الأخير. 

مـا المقصـود بـ HTML Semantics ؟

المقصـود بهـا هو عنـاصر ذات معنـي أى عنـاصر عندما يتم قرائتها يتـم فهم ما تشير اليه ،تشيـر الي المطـور وظيفـة هذا العنصـر و ايضـا للمتصفح ، المتصفح ليس عنصر بشري  يجب شرح و توضيح كل شئ حتي يستجيب و يفهم ما كتبته.

هل يوجد عناصر Semantics وعنـاصر أخري            non-Semantics؟

نعـم يـوجد عنـاصر non-Semantics نستخـدمها دائما مثل:

<div></div> , <span></span> هل هذه العناصر تشير بشئ عند قرائتها ؟ بالطبع لا.

ننتقل اذا الي العناصر Semantics التي نستخدمهـا: 

< / header></header> , <nav></nav>,<img>

<section></section>, <article></article> هل هذه العناصر تشير الي شئ؟ بالفعل هي كذلك فعند قراءة اي عنصر نفهم ما يقصده وما يشير اليه.

هنا ستجد جميع العناصر الـsemantic .

اذا ما الفائدة من استخـدام هذة العناصر ؟

الفائدة من استـخدام هذه العناصر هو الأستـخدام الأمثل لكـل عنصـر وايضا لتـعريف المتصفـح ماذا يعني هذا العنصر وايضا لتوحيد طريقة الكتابة بين المطورين.

في السابق كنا نجد ان شكـل الكـود كما هو في الصـورة وان كل شخص يسمي الـclass كما يريد مما يعني عدم وجود طريقة ثابتـة لفهم العناصر اما مع أستخدام الــsemantic elements أصبح هناك روية واضحة وطريقة كتابة معروفة وثابتة.

 

اذا الأستخـدام الصحيـح للكـود والي العناصر في اللغـة شئ أساسي ومهم وهنا أنا لا أقول توقف عن أستخدام non-semantic elemnts بل تعلـم فائدة كل عنصـر و الي ماذا يشير العنصر ومتي يتم استخدام هذا العنصر ومتي لا.

ايضـا يهـدف مفهـوم و مبـدأ الـsemantic  في أستخدام كل عنصر في المكان المناسب والمخصص له.

امثـلة علي الـHTML semantic: