HTML الدلالي يعني اختيار العنصر الذي يصف وظيفة المحتوى بدل استخدام div لكل شيء ثم محاولة إضافة المعنى لاحقًا. button تعرف كيف تعمل بلوحة المفاتيح، nav تعرّف مجموعة تنقل، main تحدد المحتوى الرئيسي، label تربط النص بحقل الإدخال. هذا يفيد accessibility و SEO والصيانة معًا لأن المعنى يصبح جزءًا من ال ـDOM نفسه، لا convention مخفية في CSS أو JavaScript.
استخدم العنصر الذي يملك السلوك المطلوب
زر يجب أن يكون button لا div عليها click. الرابط الذي ينتقل لمكان آخر يكون a. بهذه الطريقة تحصل على focus و keyboard semantics وسلوك disabled أو form integration الصحيح بدون إعادة بناء كل ذلك يدويًا.
Landmarks تساعد التنقل
header و nav و main و aside و footer تعطي assistive technologies نقاطًا واضحة. لا تضع عدة main، وسمِّ عدة nav إذا كانت لأغراض مختلفة حتى يستطيع المستخدم التمييز بينها.
العناوين تعكس بنية المحتوى
استخدم h1-h6 حسب hierarchy لا حسب الحجم. CSS مسؤولة عن الشكل. القفز العشوائي في المستويات يجعل outline أصعب على قارئ الشاشة وعلى أي شخص يراجع DOM.
Forms تحتاج أسماء وتعليمات حقيقية
placeholder ليست label. اربط label ب ـinput، واستخدم fieldset/legend للمجموعات عند الحاجة، واربط error text عبر aria-describedby إذا كان النص ديناميكيًا. التحقق يجب أن يكون على الخادم أيضًا.
خطوات عملية
- اختر العنصر الدلالي أولًا.
- أضف CSS للشكل.
- اختبر keyboard.
- افحص accessibility tree.
- أضف ARIA فقط لما لا توفره HTML.
SEO تستفيد من الوضوح لا من حيلة
محركات البحث تستطيع فهم DOM معقدة، لكن article و headings و lists و links واضحة تسهل استخراج العلاقات والمحتوى. الدلالة لا تضمن ranking، لكنها تمنع بنية غامضة وتساعد أنظمة أخرى مثل reader modes و AI parsers.
الدلالة تقلل JavaScript
details/summary و dialog و form controls الأصلية قد تغطي احتياجات كثيرة بسلوك built-in. استخدم platform قبل إعادة بناء widget كاملة، لكن اختبر الدعم والتصميم حسب احتياجك.
قائمة مراجعة
- زر = button.
- تنقل = nav.
- محتوى رئيسي = main.
- العناوين مرتبة.
- الحقول لها labels.
- ARIA مكملة لا بديلة.
الجداول والقوائم لها معنى أيضًا
استخدم ul/ol عندما تكون العناصر قائمة فعلًا، و table للبيانات الجدولية بدل Grid مرئية من divs فقط. في الجداول، استخدم th وعلاقات headers عندما تكون البنية معقدة. هذا يعطي القارئ وسياق الأدوات معنى لا تستطيع CSS وحدها إضافته.
Dialogs و Forms تستفيد من العناصر الأصلية
عنصر dialog وال ـform controls الأصلية توفر سلوكًا كثيرًا جاهزًا، لكن اختبر focus و submission و validation بعناية. إذا بنيت modal من divs فقط ستحتاج تنفيذ keyboard trap و aria-modal و return focus بنفسك. استخدام العنصر الصحيح يقلل كمية السلوك الذي تعيد اختراعه.
اختبر بنية الصفحة بدون CSS
افتح الصفحة مع تعطيل CSS أو راجع DOM outline. إذا ظل ترتيب المحتوى والعناوين والروابط مفهومًا، فغالبًا البنية الدلالية سليمة. هذا اختبار بسيط يكشف عندما يكون الشكل هو الذي يحمل المعنى بدل HTML نفسها.
شارك في تقييم ونقاش المقال
رأيك يضيف قيمة للمقال ويساعدنا على تحسين المحتوى والنقاش حوله.
النقاش
جارٍ تحميل التعليقات…