Global Attributes in HTML: `id`, `class`, `title`, `hidden` and `data-*`

Use global attributes with better judgment so your markup stays clearer, scales more cleanly and connects more safely with styling, scripts and testing.

How much do you know about HTML?

📘 Theory

Why Global Attributes Matter

They are part of the glue between structure, style and behavior.

`id` helps with unique references and in-page anchors. `class` helps reuse styles and behavior across several elements.

`data-*` lets you store small bits of domain context near the element that needs them without breaking HTML meaning.

`id` vs `class` Without Confusion

A practical rule works well here: `id` for one, `class` for many.

Do not reuse the same `id` on two different elements.
Prefer `class` for repeatable styling and shared patterns.
Use clear names such as `course-card` or `primary-button`.

1 Why Global Attributes Matter 2 `id` vs `class` Without Confusion

🧪 Learn by doing

Example Guided Example: A Reusable Course Block Combine `id`, `class` and `data-*` in one small component.

⌄

🏁 Challenges

Challenge Challenge: Fix `id` and `class` Usage Make repeated blocks share a class instead of repeating the same id.

⌄

🧰 Resources

Useful links

MDN: Global attributes web.dev: Learn HTML - Attributes MDN: Use data attributes

Test

Check your knowledge with a test about HTML.

Test for HTML

Course resources 27

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 07

Basic HTML Document Structure

Lesson 09

Semantic HTML: Structure with Meaning

›