Data attributes in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are data attributes in HTML?

Data attributes are custom attributes that start with data- and allow you to store extra information on HTML elements without affecting the layout or functionality.

beginner

How do you write a data attribute for a user's ID on a <div> element?

You write it like this: <div data-user-id="123"></div>. The attribute name is data-user-id and the value is 123.

intermediate

How can JavaScript access the value of a data attribute?

JavaScript can access data attributes using the dataset property. For example, element.dataset.userId gets the value of data-user-id.

intermediate

Why use data attributes instead of classes or IDs for storing extra info?

Data attributes store extra info without affecting styles or behavior. Classes and IDs are for styling and identifying elements, not for storing custom data.

beginner

Can data attribute names contain uppercase letters or special characters?

No. Data attribute names must be lowercase and can only contain letters, numbers, and hyphens. They cannot contain uppercase letters or special characters.

Which of these is a valid data attribute?

A data_user_name

B data-user-name

C user-data-name

D dataUserName

Data attributes must start with 'data-' and use lowercase letters and hyphens only. 'data-user-name' is correct.

How do you access the value of data-item-id in JavaScript?

A element.dataset.itemId

B element.data.itemId

C element.getAttribute('itemId')

D element.dataItemId

JavaScript uses the 'dataset' property with camelCase for multi-word names: 'data-item-id' becomes 'itemId'.

What is the main purpose of data attributes?

A To store extra custom data on HTML elements

B To style elements with CSS

C To identify elements uniquely

D To add event listeners

Data attributes store extra information on elements without affecting style or behavior.

Which is NOT true about data attributes?

A They can be accessed via JavaScript

B They start with 'data-'

C They affect the visual style of elements by default

D They can store custom information

Data attributes do not affect the visual style unless CSS or JavaScript uses them explicitly.

Which is a correct way to add a data attribute for a product price?

A <div data_price="19.99"></div>

B <div price-data="19.99"></div>

C <div dataPrice="19.99"></div>

D <div data-price="19.99"></div>

Data attributes must start with 'data-' and use hyphens, not camelCase or underscores.

Explain what data attributes are and how they can be used in HTML and JavaScript.

Think about how you can add hidden info to elements without changing their look.

Describe the rules for naming data attributes and why these rules matter.

Consider what happens if you use uppercase or spaces in attribute names.