<data> يربط محتوى مرئياً بقيمة برمجية مخفية (Machine-readable value).
الصفة value: تحتوي القيمة البرمجية بينما يظهر المستخدم النص الوصفي.
الفرق عن data-*: • data-* صفة تُضاف لأي عنصر (HTML5) • <data> عنصر مستقل يمثل محتوى مرتبطاً بقيمة
متى تستخدمه؟ - رقم المنتج مخفي بينما يظهر الاسم - الكود البريدي مع اسم المنطقة - SKU المنتج مع اسمه التجاري - ID قاعدة البيانات مع النص المعروض
نصيحة: <time> مشابه له لكن مخصص للتواريخ. استخدم <data> لأي قيمة رقمية أو نصية أخرى.
| 1 | <!-- منتجات بأرقام SKU --> |
| 2 | <ul> |
| 3 | <li><data value="UPC-4561">لابتوب Dell XPS 15</data></li> |
| 4 | <li><data value="UPC-7823">شاشة LG 27 بوصة</data></li> |
| 5 | <li><data value="UPC-1290">لوحة مفاتيح ميكانيكية</data></li> |
| 6 | </ul> |
| 7 | |
| 8 | <!-- درجات حرارة بقيم مرجعية --> |
| 9 | <p>درجة الحرارة: <data value="37.5">مرتفعة قليلاً</data></p> |
| 10 | |
| 11 | <!-- ID المنتج مع الاسم --> |
| 12 | <p>المنتج: <data value="PROD-00123">كورس JavaScript الشامل</data></p> |
مثال 1: قائمة منتجات بـ data
| 1 | <section class="product-list"> |
| 2 | <h2>المنتجات المتاحة</h2> |
| 3 | |
| 4 | <ul> |
| 5 | <li> |
| 6 | <data value="101">HTML للمبتدئين</data> |
| 7 | — <span>99 جنيه</span> |
| 8 | </li> |
| 9 | <li> |
| 10 | <data value="102">CSS المتقدم</data> |
| 11 | — <span>149 جنيه</span> |
| 12 | </li> |
| 13 | <li> |
| 14 | <data value="103">JavaScript الشامل</data> |
| 15 | — <span>199 جنيه</span> |
| 16 | </li> |
| 17 | </ul> |
| 18 | </section> |
| 19 | |
| 20 | <script> |
| 21 | // JavaScript يقرأ القيمة البرمجية بسهولة |
| 22 | document.querySelectorAll('data').forEach(el => { |
| 23 | el.addEventListener('click', () => { |
| 24 | addToCart(el.value); // يستخدم الـ ID |
| 25 | }); |
| 26 | }); |
| 27 | </script> |