خصائص HTML المهمة: شرح id و class و data-* مع أمثلة
بعد تعلم الوسوم الأساسية في HTML وإدراج النصوص، الوسائط، والعناصر الدلالية، نصل الآن إلى مرحلة مهمة جدًا وهي خصائص HTML أو ما يُعرف بالـ Attributes. في هذا الدرس سنتعرف على أشهر الخصائص وهي id و class و data-*، وستفهم لماذا تُعتبر أساس العمل مع CSS و JavaScript.
ما هي خصائص HTML؟
خصائص HTML هي معلومات إضافية نضعها داخل الوسم لتحديد سلوك العنصر أو إعطائه هوية. تُكتب الخصائص داخل الوسم الافتتاحي، وكل خاصية لها دور معين.
خاصية id في HTML
خاصية id تُستخدم لإعطاء معرف فريد لعنصر واحد فقط داخل الصفحة. لا يمكن تكرار نفس id لأكثر من عنصر. تُستعمل غالبًا مع CSS و JavaScript لاستهداف عنصر معين بدقة.
مثال على id
<h2 id="main-title">مرحبا بكم في موقعنا</h2>
في هذا المثال، القيمة main-title تُستخدم مرة واحدة فقط ولا يجب تكرارها في نفس الصفحة.
خاصية class في HTML
خاصية class تُستخدم لإعطاء اسم لمجموعة من العناصر. يمكن تكرار نفس class لعدة عناصر في الصفحة. وهي الأكثر استعمالًا في تنسيق الصفحات باستخدام CSS.
مثال على class
<p class="text-box">هذا نص تجريبي</p> <p class="text-box">فقرة أخرى بنفس التنسيق</p>
كما تلاحظ، نفس class استُعمل لأكثر من عنصر وهذا أمر طبيعي وصحيح.
الفرق بين id و class
الفرق الأساسي هو أن id فريد ولا يُستخدم إلا مرة واحدة، بينما class يمكن تكراره. عادةً نستخدم id للأجزاء المهمة، و class للتنسيق العام.
خاصية data-* في HTML
خاصية data-* تُستخدم لتخزين بيانات مخصصة داخل عناصر HTML. هذه البيانات لا تظهر للمستخدم، لكن يمكن الوصول إليها بسهولة عن طريق JavaScript. تُستعمل بكثرة في المواقع التفاعلية.
مثال على data-*
<button data-id="15" data-name="product"> اضغط هنا </button>
في هذا المثال، قمنا بتخزين رقم ومعطى إضافي داخل الزر، ويمكن استعمالهما لاحقًا في البرمجة باستخدام JavaScript.
استعمال الخصائص مع CSS
خصائص id و class تُعتبر أساس العمل مع CSS. بدون فهمها، سيكون من الصعب تنسيق الصفحات بطريقة احترافية.
أخطاء شائعة عند استخدام الخصائص
من الأخطاء الشائعة تكرار نفس id أكثر من مرة، أو استعمال أسماء غير مفهومة. يُفضل اختيار أسماء واضحة تعبر عن وظيفة العنصر.
مصادر إضافية للتعلم
للمزيد من الشرح يمكنك زيارة MDN Web Docs أو W3Schools .
خلاصة
خصائص id و class و data-* هي أساس بناء صفحات HTML الحديثة. بفهمها ستتمكن من الانتقال بسهولة إلى تعلم CSS و JavaScript وبناء مواقع احترافية.