خصائص HTML العامة: id وclass وlang وdata-* وhidden
شرح الخصائص العامة التي يمكن استخدامها مع عناصر HTML لتنظيم المحتوى وربطه بالأنماط والسلوك البرمجي.
ما الخصائص العامة؟
الخصائص العامة يمكن استخدامها على عدد كبير من عناصر HTML، مع مراعاة أن لكل خاصية قواعدها. وهي تساعد في تعريف العناصر أو توضيح اللغة أو إضافة معلومات يحتاجها CSS وJavaScript.
خصائص شائعة
id: معرّف فريد داخل المستند.class: مجموعة أسماء لتطبيق أنماط أو تحديد عناصر.lang: اللغة المستخدمة في النص، مثلlang="ar".dir: اتجاه النص مثلrtlأوltr.title: معلومات إضافية عند الحاجة، لكنه ليس بديلًا عن تسمية مرئية.hidden: يخفي المحتوى من العرض المعتاد.
<article id="lesson-3" class="lesson-card" lang="ar" dir="rtl" data-level="beginner">
<h2>درس للمبتدئين</h2>
</article>استخدام data-*
يمكن تخزين بيانات مخصصة في خصائص مثل data-level ثم قراءتها من JavaScript عبر element.dataset.level. استخدمها للبيانات غير الحساسة التي تخص العنصر، وليس لكلمات المرور أو الأسرار أو الصلاحيات.
أخطاء شائعة
لا تكرر قيمة id في الصفحة؛ قد يؤدي ذلك إلى سلوك ملتبس في الروابط والبرمجة. لا تستخدم hidden لإخفاء معلومات ينبغي أن تبقى متاحة للمستخدم، ولا تعتمد على title وحده لتوفير تعليمات مهمة.
قاعدة عملية
أضف الخاصية عندما تخدم معنى أو وظيفة واضحة. الخصائص الزائدة تزيد التعقيد ولا تجعل الصفحة أفضل تلقائيًا.
مراجع موثوقة
تابع سلسلة HTML
تابع الدروس السابقة: ما هي HTML؟، بنية مستند HTML، العناوين والفقرات والروابط، القوائم والصور، وأساسيات النماذج.
اختيار الخاصية المناسبة
استخدم id عندما تحتاج إلى معرّف فريد للربط أو الاستهداف، وclass لتجميع عناصر تشترك في النمط، وlang لتحديد لغة مقطع يختلف عن لغة الصفحة. خصائص data-* مناسبة للبيانات الإضافية الصغيرة المرتبطة بعنصر، لكنها ليست مكانًا للأسرار أو بديلًا عن مصدر بيانات منظم.
<button class="product-action" data-product-id="42" type="button">
عرض المنتج
</button>عند قراءة الخاصية في JavaScript استخدم element.dataset.productId. تعامل مع قيمها كنصوص غير موثوقة، وتحقق منها قبل استخدامها في عمليات حساسة.
قائمة مراجعة
- تأكد من عدم تكرار قيمة
idداخل الصفحة. - لا تستخدم
hiddenلمحتوى يجب أن يبقى متاحًا لقارئ الشاشة. - استخدم أسماء خصائص واضحة ومتسقة مع معنى البيانات.
متى تستخدم id وclass وdata-*؟
id معرّف فريد للروابط الداخلية وربط التسميات، وclass لتجميع عناصر تشترك في نمط أو سلوك، أما data-* فتخزن بيانات صغيرة مخصصة للتطبيق. لا تضع أسرارًا في خصائص data؛ يمكن قراءة قيمها من المتصفح.
<button class="js-tab" data-panel="settings" aria-controls="settings">الإعدادات</button>
<section id="settings" hidden>إعدادات الحساب</section>يمكن قراءة القيمة عبر element.dataset.panel. إذا استُخدمت البيانات في عملية حساسة، تعامل معها كمدخل غير موثوق، ولا تُدرج نصوصًا غير موثوقة في HTML دون معالجة مناسبة.
أخطاء تنظيمية شائعة
- تكرار
idفي المستند نفسه. - اختيار أسماء class لا تعبّر عن وظيفتها.
- تخزين حالة في DOM دون إبقائها متوافقة مع الواجهة.
- إخفاء محتوى دون مراعاة توقيت إتاحته للمستخدم.
راجع تفرد المعرفات واختبر الروابط الداخلية والتسميات. وثّق معنى قيم data-* حتى يبقى استخدامها واضحًا لفريق التطوير.
كيف تختار خصائص HTML العامة دون تعقيد؟
الخصائص العامة تضيف معلومات أو سلوكًا إلى عناصر HTML، لكن لكل خاصية وظيفة مختلفة. استخدم id عندما تحتاج معرفًا فريدًا داخل المستند، وclass لتجميع عناصر تشترك في نمط أو سلوك، وdata-* لحمل بيانات مخصصة صغيرة ترتبط بعنصر. لا تجعل هذه الخصائص بديلًا عن البنية الدلالية أو نموذج البيانات في التطبيق.
| الخاصية | قاعدة الاستخدام | مثال على خطأ |
|---|---|---|
id | قيمة فريدة في الصفحة الحالية | نسخ المعرف نفسه إلى عدة عناصر |
class | يمكن تكرارها واستخدام أكثر من صنف | اسم غامض مثل blue2 يربط المعنى باللون فقط |
lang | تحديد لغة النص الفعلية | تعيين لغة الصفحة الافتراضية على مقطع بلغة أخرى |
hidden | إخفاء محتوى غير معروض حاليًا | إخفاء محتوى مطلوب دون وسيلة لإظهاره |
data-* | بيانات مخصصة مرتبطة بالعنصر | وضع أسرار أو بيانات حساسة داخل DOM |
الفرق بين id وclass في مشروع عملي
إذا كان لديك عدد من بطاقات المنتجات، فغالبًا يناسبها صنف مشترك مثل product-card لأن كل بطاقة تحتاج النمط نفسه. أما عنوان قسم واحد قد يحمل معرفًا مثل shipping-info كي تشير إليه وصلة داخلية أو يربطه عنصر تحكم. اجعل المعرفات وصفية، وتجنب بناء منطق كامل يعتمد على ترتيب العناصر أو أسماء أصناف مؤقتة.
التعامل مع data attributes
يمكن قراءة data-category من JavaScript لتمييز نوع عنصر أو تمرير إعداد بسيط إلى مكون. لكن البيانات الموجودة في HTML مرئية للمستخدم ويمكن تعديلها من أدوات المطور؛ لذلك لا تستخدمها لتقرير الصلاحيات أو إثبات السعر أو هوية المستخدم. يجب أن يتحقق الخادم من أي قيمة تؤثر في عملية مهمة.
hidden وaria-hidden ليسا مترادفين
تخفي الخاصية hidden العنصر من العرض المعتاد، بينما aria-hidden تؤثر في ما تعرضه تقنيات المساعدة، وقد يبقى العنصر مرئيًا بصريًا. استخدام aria-hidden على عنصر تفاعلي أو على عنصر يحتوي عنصرًا يملك التركيز قد يخلق تجربة مربكة. اختر الآلية بناءً على الهدف واختبرها باستخدام لوحة المفاتيح وقارئ شاشة عند بناء واجهة ديناميكية.
قواعد تسمية وصيانة
- اختر أسماء أصناف تصف الدور أو المكوّن لا مظهره وحده.
- لا تضف data attributes إذا كانت القيمة يمكن استنتاجها بأمان من بنية العنصر.
- تأكد من أن تغيير اسم صنف لا يكسر اختبارات أو سكربتات تعتمد عليه.
- استخدم lang على المقاطع متعددة اللغات عندما يختلف نطقها عن لغة الصفحة.
راجع مرجع الخصائص العامة في MDN والمواصفة الرسمية للخصائص العامة للتفاصيل والسلوك المتوافق مع المعايير.
تشخيص مشكلات الخصائص العامة في DOM
قد تظهر مشكلة بسبب خاصية مكررة أو قيمة غير متوافقة مع العنصر أو اختلاف بين مصدر HTML وDOM بعد أن تعدله JavaScript. عند التشخيص، افحص العنصر في أدوات المطور وتأكد من قيم id وclass وlang وhidden الفعلية. لا تعتمد على اسم الصنف وحده إذا كان التطبيق يغيره أثناء التفاعل.
لا تجعل الخصائص عقدًا هشًا بين الطبقات
قد تستخدم JavaScript صنفًا لاكتشاف عنصر، بينما يستخدم CSS الصنف نفسه للمظهر. إذا كان الصنف يتغير عند إعادة التصميم، فقد ينكسر السلوك. عندما يكون المشروع كبيرًا، افصل أسماء أصناف المظهر عن محددات السلوك أو استخدم خصائص data مخصصة واضحة الغرض، مع تجنب بناء تعقيد غير ضروري.
احذر البيانات الحساسة في DOM
كل قيمة موجودة في HTML أو data attributes يمكن للمستخدم رؤيتها وتعديلها من أدوات المطور. لا تخزن رموز وصول أو معلومات سرية أو قرارات صلاحية داخل هذه الخصائص. استخدمها لبيانات عرض بسيطة، واترك القرارات الحساسة للخادم الذي يستطيع التحقق من هوية المستخدم وصلاحياته.
اختبار التوافق
- تحقق من أن id فريد وأن كل label يشير إلى الحقل الصحيح.
- اختبر إظهار وإخفاء العناصر دون ترك عنصر مخفي داخل ترتيب التركيز.
- تأكد من أن lang يطابق لغة النص، خصوصًا في المقاطع المختلطة.
- راجع ما إذا كانت خصائص data تتغير بطريقة متوقعة عند تحديث الواجهة.
مرجع مفيد: الخصائص العامة في MDN ومرجع dataset.
استخدام السمات العامة دون خلق اعتماديات هشة
تمنح السمات العامة مثل id وclass وlang وdir وhidden وtitle معلومات وسلوكًا يمكن أن تعتمد عليهما الأنماط والبرامج المساعدة. لذلك ينبغي اختيارها بحسب معناها، لا إضافة كل سمة متاحة لكل عنصر. اجعل قيمة id فريدة داخل المستند، واستخدم class لتجميع عناصر تشترك في نمط أو وظيفة، ولا تعتمد على أسماء أصناف العرض وحدها كواجهة JavaScript مستقرة إذا كان بإمكانك استخدام محددات واضحة مخصصة للسلوك.
تعامل مع data-* كبيانات وليست مساحة للأسرار
تساعد سمات data-* في ربط معلومات صغيرة بعنصر DOM، مثل معرف سجل أو خيار واجهة. لكنها مرئية في مصدر الصفحة ويمكن تعديلها من أدوات المتصفح، ولذلك لا تستخدمها لتخزين كلمات مرور أو رموز جلسات أو معلومات تعتبرها موثوقة. أي قيمة تأتي من DOM يجب التحقق منها قبل استخدامها في عمليات حساسة، ولا ينبغي أن تمنح المستخدم صلاحية بناءً على معرف مخفي داخل العنصر.
استخدم اللغة والاتجاه على المستوى الصحيح
في صفحات متعددة اللغات، عيّن اللغة المناسبة للمستند، وحدد لغة المقطع عندما تختلف عن بقية المحتوى. وفي العربية، قد تحتاج إلى اتجاه من اليمين إلى اليسار مع وجود مقاطع لاتينية أو أرقام؛ استخدم الوسوم أو السمات الملائمة لتجنب اضطراب الترتيب البصري. لا تعتمد على إدخال مسافات يدوية لإصلاح الاتجاه، لأنها غالبًا تنكسر عند تغيير المحتوى أو حجم الشاشة.
تحقق من أثر السمات على التجربة
قد تخفي سمة hidden محتوى من العرض، لذا تأكد أن إظهار العنصر وإخفاءه يتزامنان مع حالة التطبيق. لا تستخدم title بديلًا وحيدًا للتسمية أو التعليمات، لأن ظهوره غير مضمون لجميع المستخدمين. افحص DOM بعد تحديثات JavaScript، وتحقق من أن السمات لا تتعارض مع ARIA أو مع السلوك الافتراضي للعنصر.
راجع مرجع MDN للسمات العامة ومواصفة HTML عند الحاجة إلى تفاصيل دقيقة حول السلوك والتوافق.
خطة اختبار السمات العامة في القوالب الديناميكية
عند توليد الصفحة من قالب، افحص ما إذا كانت قيم id فريدة حتى عندما تتكرر المكونات مثل البطاقات أو الحوارات. تكرار المعرف قد يجعل الروابط الداخلية أو استدعاءات JavaScript تستهدف العنصر الخطأ. استخدم أصنافًا للمجموعات، ومعرفات مستقرة عند الحاجة إلى ربط عنصر محدد، وتأكد من أن أي بيانات داخل data-* لا تُعامل باعتبارها مصدرًا موثوقًا للصلاحيات.
افحص حالات الإظهار والإخفاء
إذا استخدمت hidden لإخفاء منطقة، فتأكد من تحديثها مع حالة الواجهة ومن عدم بقاء محتوى تفاعلي مخفي قابلًا للوصول بطريقة غير متوقعة. عند وجود aria-expanded أو aria-controls، حافظ على اتساق القيم مع العنصر الذي يتحكم فيه المكوّن. اختبر التنقل بلوحة المفاتيح بعد فتح وإغلاق القوائم، لأن تغييرات DOM قد تترك التركيز في موضع غير مناسب.
أضف هذه الفحوصات إلى مراجعة القوالب المشتركة، إذ يمكن لخطأ صغير في سمة عامة أن يتكرر في صفحات كثيرة. تحقق من المصدر النهائي بعد التوليد، لا من ملف القالب فقط.
الخلاصة
الخلاصة: استخدم id وclass وlang وdata-* وفق أدوارها، ولا تضع أسرارًا أو صلاحيات في DOM. اختبر الخصائص مع السلوك الفعلي بدل الاعتماد على أسماء الأصناف وحدها.