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.