HTML | متى نستعمل عنصر ما من عناصر semantic element ؟

الأفضل إستخدام semantic element  دائما في كل مشاريعك لكي تجعل الكود الخاص بك اكثر سهولة في القراءة  و التعديل  و تحسين search engine optimization 

و semantic element  مثل

1. <header> : تستخدم مع  header الخاص بال document 
2. <footer> : تستخدم مع  footer الخاص بال document 
3. <nav> : تستخدم مع  روابط التنقل 
4. <main>: تستخدم مع  المحتوي الرئيسي للموقع
5. <section>:  تستخدم مع  قسم في الموقع
6. <article>:  تستخدم مع  مقالة في الموقع
7. <address>: تستخدم مع  المعلومات الخاصة بالتواصل
8. <figure>:تستخدم مع  الصور و الرسوم البيانية

semantic element (العناصر الدلالية) : هي مجموعة من عناصر HTML  لها دلالة منطقية أو معنى ، مثل

• <header>: في الغالب يحتوي على اسم الموقع واللوجو الخاص فيه 
• <nav> : الجزء الذي يحتوي على القائمة 
• <section> : الجزء لذي يتم وضع المحتوى فيه 
• <aside> : الشريط الجانبي للموقع 
• <figure> : الأقسام التي تحتوي على صور وأشكال وغيرها 
• <footer> : يتم وضع فيه معلومات على الموقع 
• وغيرها من العناصر

أهميتها واستخدمها :- 

في إصدارات سابقة في HTML كان يقسم الموقع عن طريق <div> وإعطاء <div> كلاس (class) معين يعبر عنه لكن مع semantic element (العناصر الدلالية) أصبح يستفيد منها مطورين الويب في جعل محركات البحث فهم أجزاء الصفحة وأين توجد المعلومات ذات أهمية وتظهرها في نتائج البحث والمساعدة في عملية SEO . 

يصف العنصر الدلالي بوضوح معناه لكل من المتصفح والمطور.

أمثلة على العناصر غير الدلالية non-semantic مثل: div و span - لا تحدد محتوياتها بوضوح.

أمثلة على العناصر الدلالية semantic :مثل footer و header و article - تحدد محتوياتها بوضوح (أي أنها تستخدم في حالات معينة).

لكل عنصر من نوع semantic يكون له مكان معين يُستعمل فيه، وفي أغلب الأحيان سوف تحصل على نفس النتيجة إن أستعملت div فقط بدلًا من nav أو header على سبيل المثال، لكن الفرق يظهر عندما تريد أن يظهر موقعك في النتائج الأولى لمحركات البحث، حيث تنصح جوجل (وباقي محركات البحث بالطبع) أن تستخدم كل عنصر في مكانه الصحيح، حتى يصبح الأمر أسهل على محركات البحث من فهم محتوى صفحتك، وبالتالي تساعد في تحسين SEO الخاص بالموقع.

هنا صورة توضح الأماكن الرئيسية لكيفية إستخدام أهم العناصر الدلالية semantic:

• header: هو رأس الصفحة ويوجد فيه في الغالب شعار الموقع وأزرار تسجيل الدخول والإشعارات، وقد يحتوي أشياء أخرى مثل زر لفتح قائمة جانبية أو نافذة للبحث .. إلخ.
• nav: هو المكان الذي يوجد فيه أهم الروابط الرئيسية في الموقع، يمكنك أن ترى شرط التنقل في موقع حسوب في الأعلى وستجد أنه يحتوي على رابط الصفحة الرئيسية وأقسام المقالات وأقسام الأسئلة العامة، والدورات .. إلخ، أي أنه يحتوي على أهم روابط الموقع فقط.
• aside: يعبر عن الشريط الجانبي، وقد يحتوي على آخر التعليقات، أحدث المقالات أو حتى روابط صفحات التواصل الإجتماعي الخاص بالموقع.
• footer: يكون في الغالب هو آخر جزء في الموقع، ويحتوي على بعض الصفحات العامة عن الموقع، مثل صفحة "تواصل معنا"، وصفحة "معلومات عنا" وصفحات مختلفة أخرى، وقد يحتوي على روابط التواصل الإجتماعي أيضًا وعلى نموذج للتواصل مع مدير الموقع.
• main: يحتوي على الجزء الرئيسي من الصفحة، مثل الجزء الذي يظهر فيه التدوينة (في المدونات)، أو نتائج البحث (في محركات البحث)، أو حتى المكان الذي يظهر فيه مقطع الفيديو (إن كان موقع لنشر فيديدوهات)، يجب أن تحتوي الصفحة على عنصر main واحد على الأكثر.
• article: تكون في الغالب داخل عنصر main وتحتوي على المقالة/التدوينة.
• section: يستخدم لتقسيم أجزاء الصفحة التي ليس لديها عنصر خاص، على سبيل المثال، يوجد للمقالة عنصر article، ولكن لا يوجد عنصر لعارض شرائح slideshow وبالتي سوف تستخدم هذا العنصر وتضع في داخله عارض الشرائح (بإعتبار أن عارض الشرائح عبارة عن قسم في الصفحة، أي جزء رئيسي منها).
• address: يستخدم لعرض العناوين بشكل خاص، ومعلومات التواصل بشكل عام
• time: لعرض التواريخ والأوقات

هذه بعض العناصر الدلالية semantic elements والأكثر إستخدامًا. وقد تساعدك هذه المقالة (تعرف على أكثر الأخطاء شيوعا لدى استخدام HTML5) في معرفة بعض الأخطاء التي يقع فيها الكثير من مطوير الويب.