HTML Attributes & Selectors

More Naming Examples

Writing Data Attributes with JavaScript

const button = document.getElementById("product-button");

button.dataset.productId = "205";
button.dataset.category = "keyboard";

These assignments update the element's corresponding data attributes in the DOM.

Data Attributes Store Strings

Values accessed through dataset are strings. Convert values explicitly when you need numbers or Boolean-like behavior.

<div id="item" data-price="1250" data-active="true"></div>

<script>
  const item = document.getElementById("item");

  const price = Number(item.dataset.price);
  const isActive = item.dataset.active === "true";

  console.log(price + 250);  // 1500
  console.log(isActive);     // true
</script>

Do not assume that the string "true" automatically becomes the JavaScript Boolean true. Explicit conversion avoids unexpected results.

Real-World Use Case: A Course Catalogue

<button
  class="enroll-button"
  data-course-id="301"
  data-course-name="HTML5 Mastery"
>
  Enroll
</button>

<script>
  document.querySelectorAll(".enroll-button").forEach(function (button) {
    button.addEventListener("click", function () {
      const courseId = button.dataset.courseId;
      const courseName = button.dataset.courseName;

      console.log("Selected course:", courseName);
      console.log("Course ID:", courseId);
    });
  });
</script>

This pattern is useful for course catalogues, product cards, expandable panels, and other interfaces where each element needs a small amount of custom configuration.

Security note: A data attribute is not a security boundary. A user can modify its value in Developer Tools. Always verify important IDs, prices, permissions, and transaction details on the server before performing sensitive operations.

7. The Contenteditable Attribute

The contenteditable global attribute indicates whether an element's content can be edited by the user. It is commonly used for lightweight editors, editable notes, and browser-based demonstrations.

Basic Example

<p contenteditable="true">
  Click here and edit this text.
</p>

In a supporting browser, the user can click the paragraph and modify its content.

Contenteditable Values

• contenteditable="true" — enables editing of the element's content.
• contenteditable="false" — explicitly disables editing for that element.
• contenteditable="plaintext-only" — enables editing as plain text, with rich-text formatting removed from pasted content in supporting browsers.

The attribute is enumerated rather than a simple Boolean attribute. The values true, false, and plaintext-only have defined meanings. An invalid or missing value can cause the element to inherit its editing state from its parent.

Example: Editable Notes

<h2>My Notes</h2>

<div
  id="notes"
  contenteditable="true"
  role="textbox"
  aria-label="Editable notes"
>
  Write your notes here.
</div>