Global Attributes & Custom Data (data-*)

1. Simple Definition

Global Attributes wo special attributes hote hain jo HTML ke kisi bhi tag (chahe <div>, <p>, <button> ya <section>) par apply kiye ja sakte hain. Inme sabse powerful hain data-* attributes jo HTML elements ke andar secret custom data store karne ke kaam aate hain.

2. Real-Life Analogy

3. Why Do We Need It?

Jab JavaScript ko pata karna ho ki user ne kaunse product ya button par click kiya, tab data-* attributes HTML aur JavaScript ke beech clean data bridge banate hain.

4. Syntax

<!-- 1. Custom Data Attribute -->
<button data-item-id="101" data-price="499" data-category="shoes">Add to Cart</button>

<!-- 2. Other Key Global Attributes -->
<div contenteditable="true">User is text ko browser me edit kar sakta hai!</div>
<div draggable="true">Drag Me</div>
<div hidden>Ye element screen par render nahi hoga</div>

5. Basic Example (With JavaScript Access)

<div class="card" id="user-card" data-user-id="dev_99" data-role="admin">
  <h3>Vikram Malhotra</h3>
  <p>Role: Software Architect</p>
  <button onclick="showDetails()" class="btn btn-secondary">Inspect Data</button>
</div>

<script>
  function showDetails() {
    const card = document.getElementById("user-card");
    // Accessing through dataset
    const id = card.dataset.userId;
    const role = card.dataset.role;
    alert("User ID: " + id + " | Role: " + role);
  }
</script>

6. Output / Expected Result

7. Code Explanation

• data-*: 'data-' ke baad aap koi bhi custom lowercase naam de sakte hain (e.g. data-price).
• element.dataset: JavaScript me card.dataset.userId se direct read kiya jata hai (hyphen camelCase ban jata hai).
• contenteditable="true": Notion ya Google Docs jaisa in-place rich text editing enable karta hai.
• hidden: Boolean attribute jo element ko visually aur screen readers dono se completely hide kar deta hai (CSS display: none ki tarah).
• title: Element par mouse hover karne par default browser tooltip show karta hai.

8. Real-World Example

Netflix ke video tiles par data-movie-id="4920" laga hota hai taaki jab user click kare toh Netflix player ko exact movie ID pata chal jaye.

9. Common Mistakes

10. Best Practices

• Sensitive data (jaise user passwords, API secret keys) ko kabhi bhi data-* attribute me mat daaliye, kyunki koi bhi user "Inspect Element" karke ise padh sakta hai!
• Sirf UI metadata aur public IDs ke liye data-* use karein.

11. Try It Yourself

Playground me ek button banayein jisme data-theme="dark" attribute ho aur JS se btn.dataset.theme print karein.

12. Challenge

Ek mini Kanban Board task card banayein jisme draggable="true" ho aur data-status="todo" stored ho.

13. Interview Questions

14. Quick Revision

• data-* = Custom metadata storehouse.
• contenteditable = Live browser editor.
• hidden = Clean native hiding.
• dataset.camelCase in JavaScript.

15. FAQ

Global Attributes & Custom Data (data-*)

1. Simple Definition

Global Attributes are universal HTML attributes that can be applied to any HTML element (such as <div>, <p>, <button>, or <section>). Among the most powerful are data-* attributes, which allow developers to embed custom metadata directly within HTML tags for straightforward retrieval in JavaScript and CSS.

2. Real-Life Analogy

3. Why Do We Need It?

When JavaScript needs to know which product card or filter pill the user clicked, data-* attributes create a clean, decoupled bridge between markup and application logic without relying on CSS class hacks.

4. Syntax

<!-- 1. Custom Data Attributes -->
<button data-item-id="101" data-price="499" data-category="shoes">Add to Cart</button>

<!-- 2. Other Key Global Attributes -->
<div contenteditable="true">Users can edit this text right inside the browser!</div>
<div draggable="true">Drag Me</div>
<div hidden>This element will not be rendered on screen</div>

5. Basic Example (With JavaScript Access)

<div class="card" id="user-card" data-user-id="dev_99" data-role="admin">
  <h3>Vikram Malhotra</h3>
  <p>Role: Software Architect</p>
  <button onclick="showDetails()" class="btn btn-secondary">Inspect Data</button>
</div>

<script>
  function showDetails() {
    const card = document.getElementById("user-card");
    // Accessing via the dataset property
    const id = card.dataset.userId;
    const role = card.dataset.role;
    alert("User ID: " + id + " | Role: " + role);
  }
</script>

6. Output / Expected Result

7. Code Explanation

• data-*: Prefix with data- followed by any lowercase hyphenated key name (e.g. data-user-id).
• element.dataset: JavaScript automatically transforms hyphenated keys into camelCase (data-user-id becomes dataset.userId).
• contenteditable="true": Enables rich inline text editing for notes and CMS editors.
• hidden: Semantically hides an element equivalent to display: none.

8. Selecting Elements with Data Attributes in CSS

/* Styling by data attributes */
button[data-category="premium"] {
  background: gold;
  color: black;
}

9. Best Practices

• Use lowercase characters and hyphens for data attribute keys.
• Do not store sensitive tokens or passwords in data attributes (they are visible via page source).
• Leverage data-* for UI state tracking (e.g. active tabs, selected filter modes).

10. Practice Exercise

11. Mini Challenge

12. Interview Questions

13. Summary / Cheat Card

• Global attributes are universally applicable to every HTML element.
• data-* embeds custom private application data.
• element.dataset provides camelCase property access in JavaScript.
• contenteditable and draggable empower rich browser interactions.

14. FAQ