استخدام لغة توصيف النصوص التشعبية الدلالية (Semantic HTML)

لماذا نستخدم وسم <h1> و وسم <p>؟ لماذا لا نستخدم وسم <div> أو <span> دائماً عند كتابة مستند HTML؟ لماذا يوجد وسم مثل <ul> و <h2> و غيرها؟ هل نضع النص داخل وسم <h1> من اجل ان يظهر بحجم اكبر؟

في هذه المقالة سنناقش المعنى الدلالي لوسوم HTML والفوائد وراء استخدامها بالشكل المناسب حسب دلالاتها.

HTML5 Semantics

الصورة من صفحة HTML5 Logo

ما معنى لغة توصيف النصوص التشعبية الدلالية (Semantic HTML)؟

بشكل بسيط ، HTML الدلالية هي استخدام كل وسم حسب دلالته ، فالوسم <h1> يستخدم للدلالة على عنوان من المستوى الأول  في المستند وليس لجعل النص بحجم أكبر ، ووسم <ol>  يستخدم لدلالة على قائمة منظمة، والأهم من ذلك أن يكون لدينا  شيفرة مفهومة ، بإستخدام كل وسم HTML حسب دلالته ، مثلاً :

  • الوسم <ul> يدل على قائمة غير مرقمة.
  • الوسم <p> يدل على فقرة.
  • الوسم <h2> يدل على عنوان من المستوى الثاني في المستند.
  • الوسم <blockquote> يدل على نص مقتبس من مصدر آخر.

ولا تستخدم وسوم HTML  من أجل أي هدف آخر غير الدلالة ، مثلاً :

  • الوسم  <strong> لا يستخدم من أجل جعل النص عريض.
  • الوسم <p></p> الفارغ لا يستخدم من اجل إضافة سطر فارغ.
  • الوسوم أمثال <font>  و <center> ليس لها استخدام دلالي على الإطلاق.

كل هذا من أجل جعل الشفيرة الخاصة بصفحات الويب لديك مفهومة، وسهلة المعالجة  لكل البرامج والأجهزة الذكية ومحركات البحث وأناس آخرين يستخدمون هذه الشيفرة لغرض معين .

وفي المرة القادمة التي نقوم بها بكتابة  مستند HTML ونحن مدركين لدلالات الوسوم (Tags) ستكون الفوائد كثيرة، وأهمها:

شيفرة أسهل  وأخف (Lighter Code)

سندرك أن الشيفرة الدلالية  أفضل للتعامل عند كتابة الستايلات CSS المتعلقة بها ، وأن حجم الشيفرة أقل من السابق عندما كان المطورون يستخدمون الجداول <tables> في الصفحات، بالإضافة إلى سهولة التعامل مع الشيفرة الدلالية عند كتابة  شيفرة JavaScript متعلقة بها.

التحسين الأمثل الخاص بمحركات البحث (SEO: Search Engine Optimization)

من اهم وافضل الفوائد التي نجنيها من كتابة شيفرة دلالية هي أن محركات البحث تُكَّون فكرة أفضل عن محتوى الموقع وتقوم بقراءته وتخزينه بشكل أفضل بمرات من السابق، لأن محركات البحث تقرأ شيفرة HTML  فقط، ولا تهمها تنسيقات CSS او نصوص JavaScript  الموجودة في المستند، فلا يكفي ان يكون الموقع جميلاً حتى يعجب محرك البحث.

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

التعامل مع تطبيقات الويب (Web Applications)

تطبيقات الويب هي من المجالات التي لا يمكن العمل بها دون الشيفرة الدلالية، لأن تطبيق الويب يعد عملاً جماعياً لعدد كبير من المطورين والمبرمجين، فإن لم يقوموا بتعريف الهيكلية الدلالية لشيفرة HTML لن يكون هناك مشروع أساساً.

وأكبر دليل على أهمية الشيفرة الدلالية لـ HTML هو الوسوم الجديدة في HTML5، حيث لا يمكن أن يكون لها أي هدف آخر سوى الدلالة على ما تحتويه ، مثلاً:

  • <header> يدل على الترويسة.
  • <footer> يدل على التذييل.
  • <nav> يدل على روابط التصفح للموقع.
  • <article> يدل على مقالة.

وليس لهذه الوسوم أي أثر على مظهر النص كالحجم أو اللون أو غيرها، حيث يعتبر المظهر والتنسيق مهمة شيفرة CSS الشهيرة.

وآخيراً يمكننا اعتبار الشيفرة الدلالية من أهم الممارسات للمحترفين والمطوريين للويب ولكن ليس لدرجة التعصب لها أيضاً، حيث يمكنك التغاضي عن بعض التفاصيل الدقيقة مقابل فهم المغزى الحقيقي وراء الأمر برمته.

مراجع مساعدة:

أهم مرجع لما تكلمنا عنه هو موقع منظمة الويب العالمية W3C:
W3C HTML5 Reference

موقع whichElement.com
وهو موقع مهم للحصول على أمثلة عن الشيفرة الدلالية.

موقع HMTL5 Doctor
يحوي الكثير من المعلومات الرائعة عن استخدام لغة توصيف النص التشعبية الدلالية.

توفيق النحلاوي

يعمل في مجال تصميم وبرمجة المواقع الإلكترونية منذ 2005، مدرب في نفس المجال، عمل في مشاريع تابعة لـEU حتى عام 2011 ,وتابع مع UNDP أسس مع زملاء الدراسة Guestra كوكالة تصميم وتطوير وموقع HOMELESS-PRO.com لنشر قصص مصورة باللغة العربية للشباب. متابع نشيط لمعظم المستجدات التقنية في عالم تطبيقات الويب والموبايل ، ومهتم بالبرمجيات المفتوحة المصدر المتعلقة بهذا المجال.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
FacebookLinkedIn

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *