HTML data-* Attributes

#attributes #html #data

😄 This post is based on the content from coding.courses.

Definition and Usage

The data-* attributes are standard HTML 'custom data attributes' beyond those predefined by HTML.
They are created by combining the data- prefix with a custom name, allowing you to store custom data in the attribute's value.

Custom data attributes are used to store custom 'data,' 'state,' 'annotations,' and similar information for a page or application.
They are standardized HTML attributes used when no other appropriate standard attribute or element exists.
As global attributes, they can be applied to any HTML element.

They are primarily used in JavaScript and CSS to add dynamic functionality or apply styling.

Basic Example

This example demonstrates how to use custom data attributes with JavaScript to display basic product information. Clicking the 'View Product Details' button displays an alert showing the product's details.

---- HTML ----
<!-- The data-* attributes are used to store product information.
     Each attribute represents:
     product name (data-name),
     price (data-price),
     stock (data-stock),
     and color (data-color).
-->
<div 
    id="product-12345"
    data-name="Sneakers"
    data-price="10000"
    data-stock="5"
    data-color="red">
    Sneakers
</div>

<!-- The button includes a data-product-id attribute
     that identifies the corresponding product ID.
-->
<button
    type="button"
    id="product-details"
    data-product-id="product-12345">
    View Product Details
</button>

---- JavaScript ----
const viewDetails = document.getElementById("product-details");

viewDetails.addEventListener("click", function() {
    const productId = this.dataset.productId;
    const product = document.getElementById(productId);

    /* Retrieves product name, price, stock, and color
       using data attributes from the product element. */
    const productName = product.dataset.name;
    const price = product.dataset.price;
    const stock = product.dataset.stock;
    const color = product.dataset.color;

    /* Combines the retrieved product information into a string
       and displays it in an alert dialog. */
    const msg = "Product Name: " + productName +
                "\nPrice: " + price + " USD" +
                "\nStock: " + stock + " pcs" + 
                "\nColor: " + color;          
    alert(msg);
});

Purpose of Use

The data-* attributes are designed to allow custom data to be added to HTML elements in a standardized way, without the need for non-standard elements, semantically inappropriate attributes, or unnecessary workarounds.
By using these attributes, developers can easily attach their own data to HTML elements in a consistent manner.

Using Data Attributes in CSS

---- HTML ----
<div 
    id="product-12345"
    data-name="Sneakers"
    data-price="10000"
    data-stock="5"
    data-color="red">
    Sneakers
</div>

---- CSS ----
[data-name] { /* Targeted using a CSS attribute selector */
    padding: 1em;
    background-color: yellowgreen;
}
[data-color="red"] { /* Targeted using a CSS attribute selector */
    color: red;
}

References