Data attributes in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a custom data attribute named user-id with value 123 to the div element.

HTML

<div [1]="123">User Info</div>

Drag options to blanks, or click blank then click option'

Aid-user

Buser-id

Cdata-user-id

Ddataid

Attempts:

3 left

💡 Hint

Common Mistakes

Using attribute names without the data- prefix.

Using invalid attribute names like user-id without data-.

Custom data attributes in HTML start with data-. So to create a data attribute named user-id, you write data-user-id.

2fill in blank

medium

Complete the code to access the data-role attribute value from the button element using JavaScript.

HTML

const btn = document.querySelector('button');
const role = btn.[1];

Drag options to blanks, or click blank then click option'

Adataset['role']

Bdataset.role

CgetAttribute('role')

DgetAttribute('data-role')

Attempts:

3 left

💡 Hint

Common Mistakes

Using getAttribute('role') which misses the data- prefix.

Trying to access dataset.role without knowing it returns a string, not a method.

To get a data attribute value using getAttribute, you must use the full attribute name including data-. So getAttribute('data-role') returns the value.

3fill in blank

hard

Fix the error in the JavaScript code to correctly read the data-index attribute from the element.

HTML

const item = document.querySelector('.item');
const index = item.dataset.[1];

Drag options to blanks, or click blank then click option'

Aindex

Bdata-index

CIndex

DdataIndex

Attempts:

3 left

💡 Hint

Common Mistakes

Using dataset.data-index which is invalid syntax.

Using incorrect casing like dataset.Index.

When accessing data attributes via dataset, the attribute name drops the data- prefix and uses camelCase. So data-index becomes index.

4fill in blank

hard

Fill both blanks to create a span element with a data-status attribute set to active and access it in JavaScript.

HTML

<span [1]="active">Status</span>
<script>
  const statusSpan = document.querySelector('span');
  const status = statusSpan.dataset.[2];
</script>

Drag options to blanks, or click blank then click option'

Adata-status

Bstatus

CdataStatus

Dstatus-active

Attempts:

3 left

💡 Hint

Common Mistakes

Using dataStatus in HTML which is invalid.

Accessing dataset.dataStatus instead of dataset.status.

The HTML attribute must be data-status. In JavaScript, access it as dataset.status (without data- and camelCase).

5fill in blank

hard

Fill all three blanks to create a button with a data-action attribute set to save, then read and log it in JavaScript.

HTML

<button [1]="save">Save</button>
<script>
  const btn = document.querySelector('button');
  const action = btn.dataset.[2];
  console.log([3]);
</script>

Drag options to blanks, or click blank then click option'

Adata-action

Baction

Dbtn.dataset.action

Attempts:

3 left

💡 Hint

Common Mistakes

Using dataAction instead of data-action in HTML.

Logging action instead of btn.dataset.action.

The HTML attribute is data-action. In JavaScript, access it as dataset.action. To log the value, use btn.dataset.action.

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