Store details in data attributes – HTML Practice

Give every button the information that a script would need.

What to build

Two buttons with data attributes.

Requirements

The first button has data-code="tea-500" and data-size="500".
The second has data-code="tea-250" and data-size="250".
The word ধন্যবাদ in the paragraph is wrapped in a span with lang="bn".
The paragraph with the brand name StepVioz has that word in a span with translate="no".

Constraints

Do not put the codes in the visible text.

Example

<button data-code="x">Buy</button>

Why it works

Scripts can read those values without showing them. The language and translate attributes help screen readers and translation tools.

Hints

Hint 1

Each button has data-code and data-size.

Hint 2

Names go in lowercase with dashes.

Solution

Show one correct solution (try it yourself first)

<button data-code="tea-500" data-size="500">Buy 500 g</button>
<button data-code="tea-250" data-size="250">Buy 250 g</button>
<p>Say <span lang="bn">ধন্যবাদ</span> to <span translate="no">StepVioz</span>.</p>

Lesson: Global attributes and custom data →