شرح صفوف ومحتوى الفقرة
تمنح خاصية
id هوية فريدة وحصرية لعنصر واحد فقط في كامل مستند صفحة الويب. وخلافاً للفئات التي تقبل التكرار، فإن قيمة المعرف يجب ألا تتكرر إطلاقاً؛ وتكرار نفس المعرف يخل بصحة المستند القياسية ويجعل دوال جافا سكريبت مثل getElementById('id') تفشل في الوصول السليم.يوضح الجدول المقارن التالي أبرز الفروق الهندسية والوظيفية بين خاصية الفئة class وخاصية المعرّف الفريد id:
| وجه المقارنة | خاصية الفئة (.class) | خاصية المعرّف (#id) | الغرض الأساسي |
|---|---|---|---|
| التكرار في المستند | قابلة لإعادة الاستخدام على عدد غير محدود من العناصر | فريدة تماماً ولا يجوز تكرارها في الصفحة الواحدة | الفئة للمجموعات المشتركة والمعرّف للعنصر المفرد |
| تعدد القيم بالخاصية | تقبل عدة أسماء فئات مفصولة بمسافات | تقبل اسماً واحداً متصلاً فقط بدون أي مسافات | دمج أنماط تصميمية متعددة بمرونة عالية |
| وزن الأولوية في CSS | أولوية متوسطة متوازنة (0, 1, 0) | أولوية مرتفعة جداً (1, 0, 0) | تسهيل صيانة الأنماط عبر الاعتماد على الفئات |
| روابط القفز الداخلي | لا تعمل كهدف لروابط التجزئة #hash | تعمل كمرساة مباشرة لروابط href="#id" | بناء فهارس التنقل السريع داخل الصفحات الطويلة |
| ربط الحقول وإمكانية الوصول | لا تصلح لربط وسم التسمية بالحقل | الهدف الإلزامي لخاصية for="id" لربط الحقول | ضمان توافق النماذج مع قارئات الشاشة |
HTML
<!-- Form Label binding via unique ID -->
<label for="user-email">Email Address</label>
<input type="email" id="user-email" name="email">
<!-- JavaScript DOM Query hook -->
<div id="checkout-total">$149.00</div>إلى جانب التنسيق، يمثل المعرف
id ركيزة أساسية في معايير إتاحة الويب؛ حيث يربط بين نصوص التسمية <label> وحقول الإدخال عبر خاصية for="user-email". ويضمن هذا الربط قيام برمجيات قراءة الشاشة بنطق وظيفة الحقل بوضوح للمستخدمين من ذوي الإعاقة البصرية.