id, class, data-* and dataset
CSS styled the out-of-stock pencil from its data attribute. dataset turned data-in-stock into inStock.
Global attributes work on every HTML element: id and class name elements, title, lang and dir describe them, hidden, tabindex and contenteditable change behaviour, and data-* stores your own data.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a list of three books, each with data-year. Add a script that logs the oldest year.
Mark up an English page sentence that contains the Hindi word नमस्ते, and a user comment of unknown language.
Make a "Saved!" message that starts hidden, and a script that shows it.
Explain it without notes
What's the difference between id and class? When would you use each?
What are data-* attributes for, and how do JavaScript and CSS read them?
Explain the three kinds of tabindex values and which one to avoid.
Why can an element with hidden still be visible?
Preview
Console
Nothing logged yet.Expected console output
Items with class item: 3
DOMStringMap { price: '120', inStock: 'true' }
string 120
Total: 410
Classes of pencil: 2 item sale