در اين بخش از
دوره آموزش HTML در آموزش دون
، با تگ
<data> آشنا ميشويم. اين تگ براي پيوند دادن دادههاي انسانيخوان (مثل متن) با دادههاي
ماشينيخوان (مثل عدد يا تاريخ) استفاده ميشود و در نمايش اطلاعات ساختاريافته و سئو اهميت دارد.
تگ data در HTML چيست؟
تگ <data> براي نگهداري دادهها با مقدار مشخص قابل پردازش توسط برنامهها
طراحي شده است.
ويژگي اصلي اين تگ، استفاده از صفت value براي ذخيره مقدار عددي يا رشته قابل پردازش است، در حالي
که متن قابل مشاهده براي کاربر همان متن داخل تگ است.
مثال ساده از تگ data
<p>قيمت محصول: <data value="299000">??????? تومان</data></p>
در اين مثال، مقدار واقعي عددي 299000 در صفت value ذخيره شده و کاربر متن فارسي و
خوانا "??????? تومان" را ميبيند.
استفاده در تاريخ و زمان
<p>تاريخ انتشار: <data value="2025-10-15">?? مهر ????</data></p>اين کار به مرورگرها و موتورهاي جستجو امکان ميدهد که تاريخ را به شکل استاندارد و قابل پردازش دريافت کنند.
ويژگيهاي مهم تگ data
| ويژگي | توضيح |
|---|---|
| value | مقدار داده قابل پردازش توسط مرورگر يا برنامه |
| class | براي افزودن کلاس CSS جهت استايلدهي |
| id | شناسه يکتا براي دسترسي به اين تگ توسط جاوااسکريپت يا CSS |
مثال ترکيبي با لينک
<p>براي مشاهده قيمت به
<a href="/product/123"><data value="299000">??????? تومان</data></a> مراجعه کنيد.</p>
در اين مثال، مقدار دادهاي value قابل پردازش است و لينک کاربر را به صفحه محصول هدايت ميکند.
مزاياي استفاده از data
- موتورهاي جستجو ميتوانند اطلاعات عددي و تاريخها را بهتر تشخيص دهند.
- امکان پردازش دادهها توسط اسکريپتها بدون نياز به تغيير متن قابل مشاهده فراهم ميشود.
- به افزايش دسترسي و استانداردسازي محتوا کمک ميکند.
استايلدهي تگ data با CSS
<style>
data {
font-weight: bold;
color: #2196f3;
}
</style>
<p>وزن محصول: <data value="1200">???? گرم</data></p>
با اين روش، تگ <data> علاوه بر کاربرد معنايي، ظاهر قابل مشاهده زيبايي نيز دارد.
براي يادگيري کامل تگهاي معنايي HTML و نحوه استفاده از دادهها در وب، پيشنهاد ميکنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.
براي مشاهده تمام آموزشهاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.
آموزش قبلي: تگ colgroup در HTML
آموزش بعدي: تگ datalist در HTML
دیدگاه و پرسش