HTML Attributes & Selectors

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.