HTML — داده (data)

آخرین بروزرسانی: 1404/08/07

قبلی: گروه ستون (colgroup) بعدی: فهرست داده (datalist)

داده (data)

«تگ data» یک مقدار «قابل خواندن برای ماشین (Machine-Readable)» به متن می دهد. بنابراین مرورگر متن عادی را نشان می دهد، ولی برنامه ها مقدار دقیق را می گیرند. مثل فهرست خرید با شناسه کالا.

نمونه نمایه گذاری کالا با تگ data

&lt;ul&gt;
  &lt;li&gt;&lt;data value="21053"&gt;Cherry Tomato&lt;/data&gt;&lt;/li&gt;
  &lt;li&gt;&lt;data value="21054"&gt;Beef Tomato&lt;/data&gt;&lt;/li&gt;
  &lt;li&gt;&lt;data value="21055"&gt;Snack Tomato&lt;/data&gt;&lt;/li&gt;
&lt;/ul&gt;

مشاهده در ادیتور

data دقیقاً چه کاری می کند؟

«value» مقدار ماشینی است و متن داخل تگ، مقدار انسانی است. بنابراین موتورهای پردازش، value را می خوانند، اما کاربر متن خود آیتم را می بیند.

یک نمونه کوتاه از تگ data

&lt;p&gt;کالا: &lt;data value="X-92"&gt;هدفون بی سیم&lt;/data&gt;&lt;/p&gt;

مشاهده در ادیتور

کی از تگ های دیگر استفاده کنم؟

نکته: اگر محتوا «زمان/تاریخ» است، به جایش از تگ time استفاده کن. اگر به ورودی پیشنهادی نیاز داری، تگ datalist کمک می کند.

پشتیبانی مرورگرها

مرورگرها عموماً پشتیبانی می کنند؛ با این حال Safari در فهرست، «پشتیبانی ندارد» نشان داده شده است.

گام های عملی

برای هر آیتم، متن خوانا بنویس.
روی همان متن، یک تگ data بگذار.
مقدار دقیق را در ویژگی value ذخیره کن.

هشدار: «value» باید معنی دار و پایدار باشد؛ مثل شناسه کالا یا کد استاندارد.

جمع بندی سریع

تگ data دو نمایش می دهد: انسانی و ماشینی.
ویژگی value برای پردازشگرهاست.
برای زمان، از تگ time استفاده کن.
تگ data داده ساخت یافته می سازد.