HTML الوسم <data>
تعريفه
نستخدم الوسم <data> على هذا النحو <data value="unique-val">content</data> لإعطاء قيمة للمحتوى الموضوع بداخل الوسم.
- مكان الكلمة
unique-valنضع قيمة يمكننا استخدامها برمجياً لتمييز العنصر عن باقي العناصر الموضوعة في الصفحة. - مكان الكلمة
contentنضع محتوى العنصر الذي سيظهر في الصفحة.
إذاً هذا الوسم ليس له تأثير فعلي على المحتوى الذي يتم وضعه بداخله و لكنه يستخدم لإضافة قيمة مقابلة للمحتوى الموضوع فيه, فمثلاً قد يقوم المبرمج بترتيب محتوى الصفحة بشكل تصاعدي نسبةً لقيمه المقابلة.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <data>.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| 62 | ≤18 | 22 | 49 | 10 | 62 | 62 | 22 | 46 | 10 | 8.0 |
خصائصه
يملك خاصية واحدة هي الخاصية value التي نضيفها له لإعطاء المحتوى الذي نضعه فيه قيمة يمكن الإستفادة منها.
القيمة التي نضعها لهذا الوسم يجب أن تكون عبارة عن كلمة أو رقم.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
| Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
| مدعوم | 12 | 1 | مدعوم | مدعوم | مدعوم | مدعوم | 4 | مدعوم | مدعوم | مدعوم |
إستخدامه
في المثال التالي قمنا بإضافة ثلاث عناصر في الصفحة مع إعطاء كل واحد منهم قيمة مختلفة عن الآخر.
مثال
<data value="1">Frontend developer</data> <data value="2">Backend developer</data> <data value="3">Fullstack developer</data>
تصميمه الإفتراضي
لا يوجد تصميم إفتراضي له.
نصائح و ملاحظات
في حال كنت تريد وضع تاريخ أو وقت كقيمة للمحتوى فيجب استخدام الوسم <time> من الأساس بدلاً من الوسم <data> لأنه مصمم خصيصاً لذلك.
