تعیین یک مقدار (Value) متناظر با محتوا، که می تواند توسط اسکریپت ها (Script) (مثلا توسط کدهای JavaScript) پردازش شود، با تگ data ، در HTML
تگ
data
در HTML ، از محتوایی که در خود دارد، یک مقدار (Value) متناظر با محتوا (نسخه قابل خواندن توسط ماشین (Machine Readable Version)) را نیز ارائه می دهد (یک مقدار متناظر قابل پردازش توسط زبان های برنامه نویسی).
یعنی، علاوه بر خود محتوای اصلی که در بین زوج تگ
data
قرار می گیرد و کاربر در خروجی صفحه می بیند، یک مقدار (اطلاعات) معادل آنها نیز توسط مشخصه
value
از تگ
data
، در میان کدهای صفحه قرار می گیرد که می تواند برای پردازش توسط اسکریپت ها (Script) (مثلا توسط کدهای JavaScript) مورد استفاده قرار گیرد (هر نوع پردازش توسط کدهای زبان های برنامه نویسی).
به عنوان مثال، کد HTML زیر را در نظر بگیرید :
در کد بالا، عبارت های One و Two و Three در خروجی صفحه نمایش داده می شوند (به معنی سه عدد یک و دو و سه)، اما علاوه بر این خروجی، مقدار عددی متناظر با هر یک از این سه عبارت نیز در تگ
data
، توسط مشخصه
value
ذکر شده است.
بنابراین یک اسکریپت (Script) (مثلا کدهای JavaScript) می تواند این مقادیر عددی متناظر را از تگ های
data
بخواند و پردازش مورد نظر خود را بر روی آن اعداد اجرا نماید.
به مثال زیر توجه کنید :
یک فهرست (List) می سازیم که شامل سه آیتم (Item) به صورت سه عبارت One و Two و Three می باشد و همچنین مقدار عددی متناظر با آنها (یعنی 1 و 2 و 3) را نیز با تگ
data
مشخص می کنیم.
سپس با استفاده از مقداری کد CSS ، تعیین می کنیم که اگر کاربر، موس خود را بر روی هر یک از آیتم های (Item) آن فهرست (List) ببرد، مقدار عددی متناظر آن آیتم (Item) که توسط مشخصه
value
از تگ
data
تعیین شده است را به صورت یک عبارت قرمز رنگ نمایش دهد.
خروجی نهایی به صورت زیر می باشد :
کد فهرست (List) :
کد CSS :
کد کامل صفحه HTML :