Data attributes in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of data attributes in HTML?

Choose the best explanation for why data attributes are used in HTML elements.

A To replace the use of class and id attributes for styling purposes.

B To store extra information on elements that can be accessed by CSS and JavaScript without affecting the layout or presentation.

C To add inline styles directly to elements for quick design changes.

D To create hyperlinks between different parts of the page.

💡 Hint

Think about how you can keep extra info inside HTML without changing how it looks.

Data attributes allow you to store custom data on HTML elements. This data can be read by JavaScript and CSS selectors but does not affect the element's appearance or behavior by itself.

📝 Syntax

intermediate

Which of these is the correct way to add a data attribute to a div element?

Select the valid HTML syntax for adding a data attribute named 'user-id' with value '123' to a <div>.

A <div data-user-id="123"></div>

B <div data_user_id="123"></div>

C <div dataUserId="123"></div>

D <div data-userid=123></div>

💡 Hint

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

Data attributes must start with 'data-' followed by lowercase letters and hyphens. The value should be quoted.

❓ rendering

advanced

What will be displayed in the browser for this HTML snippet?

Given the code below, what text will the user see on the page?

HTML

<div data-info="secret">Visible Text</div>

A Visible Text

B secret

C data-info="secret"

D Nothing will be displayed

💡 Hint

Data attributes do not change the visible content unless styled or scripted.

The content inside the <div> is 'Visible Text', which is what the browser shows. The data attribute is invisible by default.

❓ selector

advanced

Which CSS selector targets elements with a data attribute 'role' equal to 'button'?

Choose the correct CSS selector to style elements that have data-role="button".

A data-role=button

B .data-role-button

C #data-role=button

D [data-role="button"]

💡 Hint

Attribute selectors use square brackets and quotes for exact matches.

The CSS attribute selector syntax is [attribute="value"]. This selects elements with the exact data-role attribute value.

❓ accessibility

expert

Why should you be careful when using data attributes for storing important accessibility information?

Select the best reason why relying solely on data attributes for accessibility data can be problematic.

A Data attributes cause validation errors in HTML5.

B Data attributes slow down page loading significantly.

C Data attributes are not automatically recognized by assistive technologies like screen readers.

D Data attributes cannot be styled with CSS.

💡 Hint

Think about how screen readers read content and attributes.

Assistive technologies do not read data attributes by default. Important accessibility info should use ARIA attributes or semantic HTML.

Practice

1. What is the main purpose of data- attributes in HTML?

easy

A. To change the color of HTML elements

B. To store extra information inside HTML elements without affecting their appearance

C. To create links between pages

D. To add comments inside HTML code

Solution

1. Step 1: Understand what data attributes do

   Data attributes store extra information inside HTML elements without changing how they look on the page.

2. Step 2: Compare options with this purpose

   Only To store extra information inside HTML elements without affecting their appearance describes storing extra info without affecting appearance, which matches the purpose of data attributes.

3. Final Answer:

   To store extra information inside HTML elements without affecting their appearance -> Option B

4. Quick Check:

   Data attributes store extra info = B [OK]

Hint: Data attributes always start with 'data-' and hold extra info [OK]

Common Mistakes:

• Thinking data attributes change element style
• Confusing data attributes with links or comments
• Believing data attributes are visible on the page

2. Which of the following is the correct way to add a data attribute to a <div> element?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall the correct syntax for data attributes

   Data attributes must start with 'data-' followed by a name using hyphens, not underscores or camelCase.

2. Step 2: Check each option

   uses 'data-user' which is correct. Options A, B, and C use invalid formats like missing 'data-', underscores, or camelCase.

3. Final Answer:

   <div data-user="123"></div> -> Option D

4. Quick Check:

   Correct data attribute syntax = D [OK]

Hint: Data attributes start with 'data-' and use hyphens, not underscores [OK]

Common Mistakes:

• Using underscores instead of hyphens
• Omitting the 'data-' prefix
• Using camelCase instead of hyphen-case

3. Given this HTML code:

<button data-action="save" data-id="42">Save</button>

What will button.dataset.action return in JavaScript?

medium

A. "save"

B. "Save"

C. "data-action"

D. undefined

Solution

1. Step 1: Understand how dataset works in JavaScript

   The dataset property accesses data attributes by their name after 'data-' in camelCase. Here, 'data-action' becomes 'action'.

2. Step 2: Check the value of data-action attribute

   The attribute value is "save" (all lowercase), so button.dataset.action returns "save" exactly.

3. Final Answer:

   "save" -> Option A

4. Quick Check:

   dataset.action returns attribute value = A [OK]

Hint: dataset.property matches data-attribute name after 'data-' [OK]

Common Mistakes:

• Confusing attribute value case
• Trying to access with full 'data-action' name
• Expecting undefined if attribute exists

4. Identify the error in this HTML snippet:

<span data-user_id="7">User</span>

medium

A. The attribute name uses an underscore instead of a hyphen

B. The value '7' should be in single quotes

C. The <span> tag cannot have data attributes

D. Missing closing tag for <span>

Solution

1. Step 1: Check data attribute naming rules

   Data attribute names must use hyphens, not underscores, after 'data-'. Underscores are invalid.

2. Step 2: Verify other parts of the code

   The value can be in double or single quotes, <span> can have data attributes, and the closing tag is present.

3. Final Answer:

   The attribute name uses an underscore instead of a hyphen -> Option A

4. Quick Check:

   Data attribute names use hyphens, not underscores = C [OK]

Hint: Data attribute names must use hyphens, never underscores [OK]

Common Mistakes:

• Using underscores in data attribute names
• Thinking quotes must be single
• Believing some tags can't have data attributes

5. You want to store a user's preferred language and theme inside a <section> element using data attributes. Which of these is the best and valid way to do it?

hard

A.

B.

C.

D.

Solution

1. Step 1: Recall correct data attribute naming conventions

   Data attributes must start with 'data-' and use hyphen-separated lowercase names.

2. Step 2: Evaluate each option

   uses correct 'data-preferred-language' and 'data-theme'. Options B and C use invalid camelCase or underscores.
   misses 'data-' prefix.

3. Final Answer:

   <section data-preferred-language="en" data-theme="dark"></section> -> Option C

4. Quick Check:

   Valid data attributes start with 'data-' and use hyphens = A [OK]

Hint: Use 'data-' prefix and hyphens for multiple words in attribute names [OK]

Common Mistakes:

• Using camelCase or underscores in data attribute names
• Omitting the 'data-' prefix
• Trying to store data without data attributes