HTML Attributes & Selectors

Section 5: Global Attributes, IDs, Classes, Data Attributes and Contenteditable

Welcome to Section 5 of Codementrix HTML5 Mastery. In this lesson, you will learn how to configure HTML elements using global attributes, uniquely identify elements with IDs, group elements with classes, store custom data using data attributes, and make content editable using the contenteditable attribute.

These concepts are essential when building reusable page layouts, interactive interfaces, JavaScript-powered components, forms, dashboards, and content management systems.

1. Learning Objectives

By the end of this lesson, you will be able to:

• Explain what global HTML attributes are and how they work.
• Use the id attribute to identify a particular element.
• Use the class attribute to group elements for styling and scripting.
• Understand the difference between IDs and classes.
• Read and write custom data using data-* attributes and JavaScript.
• Use contenteditable to allow users to edit content in the browser.
• Understand global attributes such as title, lang, dir, hidden, tabindex, draggable, and spellcheck.
• Avoid common attribute mistakes and understand related accessibility and security concerns.
• Build a practical HTML example that combines these attributes.

2. What Are Global Attributes?

Global attributes are HTML attributes that can be used on all HTML elements, although their behavior and usefulness depend on the particular element and attribute.

For example, the class attribute can be used on a paragraph, heading, section, image, button, or many other HTML elements.

<h2 class="section-title">Our Services</h2>

<p class="description">We build web applications.</p>

<button class="primary-button">Get Started</button>

In this example, class is a global attribute. It helps identify elements that belong to a group, often for CSS styling or JavaScript behavior.

Common Global Attributes

• id — identifies an element within a document.
• class — assigns one or more class names to an element.
• title — provides advisory information about an element.
• lang — identifies the language of an element's content.
• dir — specifies the direction of text.
• hidden — indicates that an element is not currently relevant and should not be rendered normally.
• tabindex — controls focusability and sequential keyboard navigation behavior.
• contenteditable — indicates whether the element's content is editable.
• data-* — associates custom data with an element.
• spellcheck — provides a hint about whether spelling and grammar checking should be enabled.
• draggable — specifies whether an element is draggable using the HTML drag-and-drop mechanism.
• translate — indicates whether an element's text and attribute values should be translated when applicable.
• style — specifies inline CSS declarations.
• accesskey — suggests a keyboard shortcut for an element.
• autocapitalize — hints how text input should be automatically capitalized in supporting contexts.

Several additional global attributes exist. This lesson focuses on the attributes most useful when building everyday web pages and applications.

3. The ID Attribute

The id attribute assigns an identifier to an HTML element. An ID is intended to be unique within the document.

Basic Syntax

<element id="unique-identifier">Content</element>

Example

<h1 id="page-title">Welcome to Codementrix</h1>

<p id="intro">Learn web development step by step.</p>

Here, page-title and intro identify two different elements.

Rules and Best Practices for IDs

• Use a distinct ID for each element within a document.
• Choose descriptive names such as main-navigation, contact-form, or course-title.
• Avoid spaces in ID values.
• IDs must not be empty.
• An ID value must not contain ASCII whitespace characters.
• IDs can contain many characters, but simple names using letters, digits, hyphens, and underscores are easier to manage.
• When using an ID in a CSS selector or JavaScript selector, remember that special characters may need escaping.

Using an ID in CSS

CSS uses the hash symbol (#) to select an element by ID.

<h1 id="main-title">HTML5 Mastery</h1>

<style>
  #main-title {
    color: navy;
    font-size: 32px;
  }
</style>

The selector #main-title targets the element whose ID is main-title.

Using an ID in JavaScript

JavaScript can retrieve an element by its ID using document.getElementById().

<p id="message">Original message</p>

<script>
  const message = document.getElementById("message");
  message.textContent = "Welcome to Codementrix!";
</script>

After the script runs, the paragraph displays the new text.

Important: Place scripts where the elements they need are available, or use suitable loading techniques such as a deferred external script. If an element with the specified ID does not exist, getElementById() returns null.

Using an ID as a Link Destination

An ID can identify a destination within a page.

<nav>
  <a href="#pricing">View Pricing</a>
</nav>

<section id="pricing">
  <h2>Pricing</h2>
  <p>Explore our available plans.</p>
</section>

When the user activates the link, the browser navigates to the element identified by pricing.

IDs Must Be Unique

Incorrect:

<p id="notice">First notice</p>
<p id="notice">Second notice</p>

Correct:

<p id="notice-one">First notice</p>
<p id="notice-two">Second notice</p>

Duplicate IDs make document references ambiguous and can cause unexpected results in scripts, fragment navigation, accessibility relationships, and CSS targeting.

4. The Class Attribute

The class attribute assigns one or more class names to an element. Classes are commonly used to apply CSS styles and identify groups of elements for JavaScript behavior.

Basic Syntax

<element class="class-name">Content</element>

Example: Reusing a Class

<h2 class="section-title">Our Courses</h2>

<p class="section-description">Learn practical web development.</p>

<h2 class="section-title">Our Projects</h2>

<p class="section-description">Explore real-world examples.</p>

The same class can be assigned to many elements. This makes classes useful for reusable styles and component patterns.

Using Classes in CSS

CSS uses a period (.) before a class name.

<style>
  .section-title {
    color: #1d4ed8;
    font-size: 28px;
  }

  .section-description {
    color: #555;
    line-height: 1.6;
  }
</style>

Every element with the corresponding class can receive the defined styles.

Multiple Classes on One Element

An element can have several classes. Separate the class names with whitespace.

<button class="button primary large">
  Start Learning
</button>

This element has three classes:

• button
• primary
• large

Each class can contribute different styles or behavior.

<style>
  .button {
    padding: 10px 16px;
    border: 0;
    border-radius: 6px;
  }

  .primary {
    background: #1d4ed8;
    color: white;
  }

  .large {
    font-size: 18px;
  }
</style>

Adding and Removing Classes with JavaScript

JavaScript provides classList to manage classes without replacing the entire class attribute manually.

<button id="toggle-button" class="button">
  Toggle Highlight
</button>

<p id="target" class="message">
  This message can be highlighted.
</p>

<style>
  .highlight {
    background: #fff3a3;
    padding: 8px;
  }
</style>

<script>
  const button = document.getElementById("toggle-button");
  const target = document.getElementById("target");

  button.addEventListener("click", function () {
    target.classList.toggle("highlight");
  });
</script>

When the button is clicked, JavaScript adds the highlight class if it is absent or removes it if it is present.

Useful classList Methods

• classList.add("name") — adds a class.
• classList.remove("name") — removes a class.
• classList.toggle("name") — toggles a class.
• classList.contains("name") — checks whether a class exists.
• classList.replace("old", "new") — replaces a class when the old class is present.

For example:

element.classList.add("active");

if (element.classList.contains("active")) {
  console.log("The element is active.");
}

element.classList.remove("active");

5. ID vs Class: Understanding the Difference

Both IDs and classes identify elements, but they serve different purposes.

Example:

<section id="featured-courses" class="course-section">
  <article class="course-card">HTML Course</article>
  <article class="course-card">CSS Course</article>
  <article class="course-card">JavaScript Course</article>
</section>

The section has a unique ID and a reusable class. Each course card shares the same class.

Best practice: Use classes for reusable styling and component behavior. Use IDs when you need a unique identifier, a fragment destination, or a specific relationship between elements.

6. The Data Attributes: data-*

Custom data attributes allow developers to store application-specific data on HTML elements. Their names begin with data-.

Basic Syntax

<element data-custom-name="value">Content</element>

Example: Product Information

<article
  class="product-card"
  data-product-id="101"
  data-category="laptop"
  data-price="45000"
>
  <h2>Developer Laptop</h2>
  <p>Price: ₹45,000</p>
</article>

The custom attributes store values that scripts can read. They do not automatically create visible text, apply styles, or perform calculations.

Data Attribute Naming Rules

• Custom data attribute names begin with data-.
• Use meaningful names such as data-product-id or data-status.
• In HTML, attribute names are ASCII case-insensitive, so lowercase kebab-case names are a clear convention.
• Data attributes are intended for custom data private to the page or application, not for replacing standard HTML attributes.
• Do not store secrets, passwords, private tokens, or authorization credentials in data attributes. Users can inspect page markup and browser DOM data.

Reading Data Attributes with JavaScript

The dataset property provides access to an element's data attributes.

<button
  id="product-button"
  data-product-id="101"
  data-category="laptop"
>
  View Product
</button>

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

  console.log(button.dataset.productId);
  console.log(button.dataset.category);
</script>

The output is:

101
laptop

The HTML attribute data-product-id is available in JavaScript as dataset.productId. The hyphenated name is converted to camelCase.

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>

This creates a basic editable region. The role and accessible label help communicate the purpose of the region to assistive technologies, but a production editor may need additional keyboard behavior, state communication, and instructions.

Editable Plain Text

<div contenteditable="plaintext-only">
  Paste plain text into this area.
</div>

Use plaintext-only when the editing experience should avoid rich-text formatting. Browser support and clipboard behavior should be tested for your target environments.

Nested Editing Behavior

Editing states can be inherited. For example, a child element inside an editable parent is generally editable unless its own attribute explicitly sets it to false.

<div contenteditable="true">
  This section is editable.

  <p contenteditable="false">
    This paragraph is not editable.
  </p>
</div>

Elements with contenteditable enabled are generally included in sequential keyboard navigation when they are not already part of the normal focus order. Nested editable regions may require an explicit tabindex="0" if they should be separately keyboard-focusable.

Important Limitations

• Contenteditable does not automatically save changes to a database.
• It does not automatically provide a complete rich-text editing toolbar.
• It does not validate or sanitize content before it is stored or displayed elsewhere.
• It does not replace a proper form control when a simple input or textarea is more suitable.
• Browser editing behavior and generated markup can vary.

Saving Editable Text with JavaScript

The following example demonstrates reading edited text. It does not send the content to a server.

<div id="editable-note" contenteditable="true">
  Write your note here.
</div>

<button id="read-note" type="button">Read Note</button>

<p id="note-output"></p>

<script>
  const editableNote = document.getElementById("editable-note");
  const readNoteButton = document.getElementById("read-note");
  const noteOutput = document.getElementById("note-output");

  readNoteButton.addEventListener("click", function () {
    noteOutput.textContent = editableNote.innerText;
  });
</script>

The script reads the editable region's visible text and displays it using textContent. Using textContent avoids interpreting the copied string as HTML markup.

Contenteditable and Security

Editable content can contain markup, depending on the editing mode and browser behavior. If an application saves or redisplays user-created content, handle it as untrusted input.

• Prefer plain text when rich formatting is unnecessary.
• Use textContent when displaying content as text.
• If rich HTML is required, use an established HTML sanitization approach before inserting it into an HTML rendering context.
• Validate permissions and ownership on the server before saving content.
• Do not assume that a browser editor automatically prevents cross-site scripting (XSS).

8. Other Useful Global Attributes

Title

The title attribute provides advisory information about an element. Some browsers show it as a tooltip when the pointer hovers over the element.

<button type="button" title="Save your current draft">
  Save
</button>

Do not use title as the only way to communicate essential information. Tooltips may not be consistently available to touch, keyboard, or assistive-technology users.

Lang

The lang attribute identifies the language of an element's content.

<html lang="en">
<body>
  <p>Welcome to Codementrix.</p>
  <p lang="or">ନମସ୍କାର</p>
</body>
</html>

The root language is set to English, while the second paragraph identifies Odia content using the language tag or. Correct language information helps speech synthesis, pronunciation, translation tools, and accessibility technologies.

Dir

The dir attribute specifies text direction.

<p dir="ltr">Left-to-right text</p>

<p dir="rtl">مرحبا بالعالم</p>

<p dir="auto">Direction determined from the content</p>

Common values include ltr, rtl, and auto. Use the direction that matches the content rather than selecting a direction purely for visual positioning.

Hidden

The hidden attribute indicates that an element is not currently relevant and should not be rendered normally.

<p hidden>This content is currently hidden.</p>

JavaScript can change the hidden state:

const message = document.getElementById("message");

message.hidden = false; // Show the element
message.hidden = true;  // Hide the element

The element must have an ID such as message for this example to work.

Hidden content is not a security mechanism. Do not place secrets in hidden elements or assume hidden information cannot be inspected.

Tabindex

The tabindex attribute influences whether an element can receive keyboard focus and how it participates in sequential keyboard navigation.

<div tabindex="0">
  This container can receive keyboard focus.
</div>

Values to understand:

• tabindex="0" — allows focus and places the element in the normal sequential focus order according to the document and browser behavior.
• tabindex="-1" — allows programmatic focus but generally excludes the element from sequential Tab navigation.
• Positive values — assign explicit focus-order priorities and are generally best avoided because they can make navigation confusing.

Prefer native interactive elements such as buttons and links instead of making generic containers interactive without implementing the necessary keyboard behavior and accessibility semantics.

Spellcheck

The spellcheck attribute provides a hint about whether the browser should check spelling and grammar where supported.

<textarea spellcheck="true"></textarea>

<input type="text" spellcheck="false">

Spellcheck is a hint, not a guarantee that every browser will use the same behavior.

Draggable

The draggable attribute controls whether an element is draggable through the HTML drag-and-drop mechanism.

<p draggable="true">Try dragging this text.</p>

Setting an element to draggable does not automatically implement a complete drag-and-drop interface. JavaScript event handling is typically required to define what happens during dragging and dropping. Provide an accessible alternative for users who cannot use pointer-based dragging.

Translate

The translate attribute indicates whether the text and attribute values of an element should be translated when applicable.

<p translate="yes">Welcome to our website.</p>

<span translate="no">Codementrix</span>

This can be useful for brand names or text that should remain unchanged by translation tools. Actual behavior depends on the translation system.

9. Real-World Example: Interactive Course Cards

This example combines IDs, classes, data attributes, and JavaScript. Each card stores its own course information, and a shared button handler reads that information.

<section id="courses" class="course-list">
  <article
    class="course-card"
    data-course-id="101"
    data-level="Beginner"
  >
    <h2>HTML5 Mastery</h2>
    <p>Learn HTML from the ground up.</p>
    <button class="course-button" type="button">
      View Course
    </button>
  </article>

  <article
    class="course-card"
    data-course-id="102"
    data-level="Beginner"
  >
    <h2>CSS Mastery</h2>
    <p>Learn to style modern web pages.</p>
    <button class="course-button" type="button">
      View Course
    </button>
  </article>
</section>

<p id="course-message" aria-live="polite"></p>

<script>
  const courseButtons = document.querySelectorAll(".course-button");
  const courseMessage = document.getElementById("course-message");

  courseButtons.forEach(function (button) {
    button.addEventListener("click", function () {
      const card = button.closest(".course-card");

      if (!card) {
        return;
      }

      const courseId = card.dataset.courseId;
      const level = card.dataset.level;
      const title = card.querySelector("h2").textContent;

      courseMessage.textContent =
        title + " (ID: " + courseId + ", Level: " + level + ")";
    });
  });
</script>

How it works:

1. The courses section has a unique ID.
2. Both course cards share the course-card class.
3. Each card stores its course ID and level in data attributes.
4. Each button shares the course-button class.
5. JavaScript attaches a click handler to every course button.
6. The handler finds the relevant card, reads its data, and displays a message.

This pattern is useful for catalogues, dashboards, inventory cards, product listings, and other repeated interface components.

Production note: The example demonstrates front-end behavior only. Course access, enrollment, pricing, and other sensitive operations must be validated by the server.

10. Common Mistakes and How to Avoid Them

Mistake 1: Reusing the Same ID

Incorrect:

<div id="card">First card</div>
<div id="card">Second card</div>

Fix: Use different IDs when unique identification is required, or use the same class for reusable components.

Mistake 2: Using an ID When a Class Is More Appropriate

If you want to style ten buttons the same way, use a reusable class rather than giving all ten buttons the same ID.

<button class="primary-button">Save</button>
<button class="primary-button">Continue</button>

Mistake 3: Writing Multiple Classes as Separate Attributes

Incorrect:

<div class="card" class="featured">Content</div>

Correct:

<div class="card featured">Content</div>

Mistake 4: Expecting Data Attributes to Convert Values Automatically

Incorrect assumption:

const price = element.dataset.price;
console.log(price + 100);

If the stored value is "50", the result may be the string "50100", because both values are strings or converted to strings during concatenation.

Correct:

const price = Number(element.dataset.price);
console.log(price + 100); // 150

Mistake 5: Storing Sensitive Information in Data Attributes

Never treat data-user-password, data-access-token, or similar attributes as secure storage. Page data can be inspected and changed by the user.

Mistake 6: Assuming Contenteditable Saves Data Automatically

Contenteditable only enables browser editing. Persisting changes requires an appropriate save workflow, usually involving JavaScript and a server-side endpoint.

Mistake 7: Treating Hidden Content as Secure

The hidden attribute affects presentation, not access control. Confidential data must be protected by server-side authorization and must not be delivered to unauthorized users.

Mistake 8: Using Positive Tabindex Values Everywhere

Positive tabindex values can create a confusing keyboard focus sequence. Prefer the natural document order and use tabindex="0" or tabindex="-1" only when there is a clear reason.

Mistake 9: Relying Only on the Title Attribute

Do not hide important instructions inside a title tooltip. Provide essential information visibly and accessibly.

11. Practical Exercises

Exercise 1: Build a Profile Section

Create a section with a unique ID and a reusable class. Inside it, include a heading, a paragraph, and a button that shares a class with another button on the page.

Exercise 2: Build a Product Card

Create two product cards. Give both the same class, but assign different data attributes for product ID, category, and price. Use JavaScript to read the values from one card.

Exercise 3: Create an Editable Note

Create a contenteditable region and a button that reads its text into a separate paragraph. Display the text using textContent rather than inserting it as HTML.

Exercise 4: Experiment with Global Attributes

Build examples using:

• lang to identify content written in a different language.
• dir to set the direction of text.
• hidden to show and hide a message.
• tabindex to explore keyboard focus.
• spellcheck to test text-editing behavior.

Exercise 5: Create a Course Catalogue

Build three course cards with shared classes and distinct data attributes. Add a button to each card. When a button is clicked, display the selected course name and ID in a message area.

12. Quiz: Global Attributes, IDs, Classes, Data Attributes and Contenteditable

Test your knowledge with these 10 questions. Each question has four options and an expandable explanation that identifies the correct answer and explains every option.

Suggested passing score: 8 out of 10. The answers are displayed using native HTML details elements; automatic scoring and saved progress require additional course-platform or JavaScript functionality.

Question 1: What is the primary purpose of the id attribute?

1. To group many elements under one reusable name
2. To uniquely identify an element within a document
3. To store a database password securely
4. To automatically style every element in the page

Question 2: Which CSS selector targets elements with class="card"?

1. #card
2. .card
3. card()
4. @card

Question 3: Which statement about class attributes is correct?

1. A class can only be used once in a document
2. An element can have only one class
3. An element can have multiple classes separated by whitespace
4. Classes are only available on paragraph elements

Question 4: What does data-product-id="101" become in the JavaScript dataset property?

1. dataset.data-product-id
2. dataset.productId
3. dataset.product-id
4. dataset.id.product

Question 5: What type of value does element.dataset.price normally return?

1. A number automatically converted from the attribute
2. A Boolean value in every case
3. A string
4. A database record

Question 6: What does contenteditable="true" do?

1. Automatically saves the content to a database
2. Allows the user to edit the element's content in the browser
3. Prevents all JavaScript changes to the element
4. Encrypts the element's content

Question 7: Which value makes an editable region request plain-text-only editing behavior?

1. contenteditable="disabled"
2. contenteditable="plaintext-only"
3. contenteditable="secure"
4. contenteditable="database"

Question 8: What does the hidden attribute do?

1. Encrypts the element
2. Indicates that the element is not currently relevant and should not be rendered normally
3. Deletes the element permanently from the HTML document
4. Prevents a developer from accessing the element with JavaScript

Question 9: What is a good reason to use tabindex="0"?

1. To automatically save form data
2. To make a suitable element focusable in the normal sequential keyboard navigation order
3. To hide an element from assistive technology
4. To apply a CSS class to the element

Question 10: Which statement about data attributes and security is correct?

1. Data attributes are always hidden from users
2. Data attributes can securely store passwords
3. Users can inspect and modify data attributes, so sensitive operations require server-side validation
4. Data attributes automatically validate product prices

13. Final Checklist

Before moving to Section 6, make sure you can:

• Explain what global attributes are.
• Use IDs for unique identification and classes for reusable styling or behavior.
• Use CSS ID and class selectors correctly.
• Read and write data attributes using JavaScript's dataset property.
• Convert data attribute strings into appropriate JavaScript data types.
• Use contenteditable for basic editable regions and understand its limitations.
• Explain the purposes of title, lang, dir, hidden, tabindex, spellcheck, draggable, and translate.
• Recognize that hidden elements and data attributes do not provide security.
• Use browser Developer Tools to inspect attributes and DOM changes.

Next section: Section 6 — Comments, Entities, Unicode and Special Characters.

End of Section 5 — Codementrix HTML5 Mastery.