آشنایی با ویژگی های data-* در HTML

ویژگی های data-* در HTML چه کاربردی دارند؟

ویژگی های data-* یکی از امکانات کمتر شناخته شده در HTML هستند که برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. اگر برنامه‌نویسی هستید که دوست دارید HTML شما تمیز و قابل فهم باشد، بدون اینکه نیاز به اضافه کردن مقادیر غیرضروری به کلاس‌ها و idها داشته باشید، data-* به کارتان می‌آید.

ویژگی data-* از نسخه HTML5 به وجود آمده است و به شما امکان می‌دهد اطلاعاتی را به elements اضافه کنید که توسط CSS یا جاوااسکریپت قابل دسترسی باشند. به عبارت دیگر، شما می‌توانید اطلاعات اضافی‌ای را که نیاز به پردازش دارند به عناصر HTML خود اضافه کنید، بدون آنکه در ساختار ظاهری HTML اختلال ایجاد کنید.

استفاده از این ویژگی بسیار ساده است. کافیست پسوند data- را قبل از نام دلخواه خود قرار دهید، مثلاً data-user-id یا data-product-name. این مقادیر به طور مستقیم در مرورگر نمایش داده نمی‌شوند اما می‌توانید از جاوااسکریپت برای دستیابی به این داده‌ها استفاده کنید؛ چیزی که بسیار مفید است زمانی که شما به داده‌های اضافی نیاز دارید اما نمی‌خواهید که آن‌ها در HTML ظاهری داشته باشند.

نکته دیگر این است که data-* فقط برای ذخیره داده‌های ساده به کار می‌رود و باید از آن‌ها برای داده‌های بزرگ یا پیچیده استفاده نشود؛ بدین معنی که بیشتر برای مواردی که داده‌های کوچک و موقت نیاز دارید کاربرد دارد، مانند ویژگی‌هایی که می‌خواهید هنگام کلیک کردن یا دیگر رویدادهای تعامل کاربر به نمایش بگذارید.

چگونه یک ویژگی data-* به یک عنصر اضافه کنیم؟

<div class="product" data-product-id="123" data-product-type="electronics">
    <h2>کالا: تلویزیون</h2>
</div>

در اینجا، یک <div> داریم که دو ویژگی data-* دارد: data-product-id و data-product-type که به ترتیب برای شناسه محصول و نوع محصول هستند.

- <div class="product" data-product-id="123" data-product-type="electronics"> : ما یک div با کلاس "product" ایجاد کرده‌ایم و دو ویژگی داده ای اضافه کرده‌ایم، یکی برای شناسه محصول و دیگری برای نوع آن.

- <h2>کالا: تلویزیون</h2> : یک عنوان اضافه می‌شود که نام کالا را نمایش می‌دهد. این اطلاعات بخشی از محتوای div است.

- </div> : اینجا پایان عنصر div است.