Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

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> لأنه مصمم خصيصاً لذلك.