شرح صفوف ومحتوى الفقرة
قدمت مواصفة HTML5 سمات البيانات المخصصة المسبوقة بالبادئة
data-*، لتوفر وسيلة قياسية ورسمية لتخزين البيانات الوصفية الخاصة مباشرة فوق عناصر المستند. وقضى هذا المعيار على الحيل القديمة المتمثلة في إساءة استخدام خاصية class لتخزين معلومات موجهة لمحركات جافا سكريبت.
HTML
<!-- HTML custom data attributes -->
<div class="user-card"
data-user-id="9421"
data-tier="moderator"
data-active="true">
<h3>User Profile</h3>
</div>
<!-- Access via JavaScript: el.dataset.userId -->يتيح المتصفح الوصول التلقائي لكافة سمات البيانات عبر كائن
dataset في جافا سكريبت، حيث تتحول الأسماء الموصولة بشرطات تلقائياً إلى صيغة سنام الجمل، لتصبح data-user-id قابلة للقراءة عبر el.dataset.userId. كما يمكن استهداف هذه السمات في CSS باستخدام محددات السمات الأنيقة.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس المعمارية الشاملة لخصائص الفئات والمعرفات في HTML: استغلال class لإعادة التنسيق، وتركيب الفئات المتعددة، وإلزامية تفرد id وتطبيقه في القفز الداخلي والوصول، وقواعد التسمية القياسية، واستخدام سمات data مع كائن dataset. الخطوة التالية: سننتقل في الدرس القادم إلى استكشاف العناصر الدلالية ودورها في بناء مستند ويب قياسي وعالي الإتاحة.