26. التخطيط الدلالي لـ HTML5: "لماذا؟"

قبل HTML5، اعتمد المطورون بشكل كبير على عناصر <div> العامة ذات المعرفات الوصفية (على سبيل المثال، <div id="header">). قدمت HTML5 عناصر دلالية لوصف معنى المحتوى، وليس مجرد مظهره.

26.1 ما هي الدلالات (Semantics)؟

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

• غير دلالي (Non-Semantic): <div> (لا يخبرك بأي شيء عن المحتوى بالداخل).
• دلالي (Semantic): <header> (يشير بوضوح إلى أن المحتوى بالداخل هو المحتوى التمهيدي للصفحة أو القسم).

26.2 فوائد HTML الدلالية

1. إمكانية الوصول (Accessibility): تستخدم قارئات الشاشة هذه الوسوم لمساعدة المستخدمين ضعاف البصر على التنقل في الصفحة بكفاءة.
2. تحسين محركات البحث (SEO): تعطي محركات البحث أولوية للمحتوى داخل العناصر الدلالية لفهم موضوع وهيكل صفحتك بشكل أفضل.
3. سهولة قراءة المطور: يصبح الكود أسهل بكثير للفهم من قبل المطورين الآخرين (ونفسك في المستقبل).

في الدروس القليلة التالية، سنقوم باستبدال هياكل div الشائعة بنظيراتها الدلالية في HTML5.