id vs class, data-* and global attributes

Model answer.

• `id` must be unique in the page. It is used for fragment links (href="#fees"), connecting a <label for> to its input, ARIA references (aria-describedby), and getElementById. Avoid it for styling, because its high CSS specificity makes overrides hard.
• `class` can be repeated and combined (class="card featured"). It is the normal hook for CSS and for selecting groups of elements.

**data-* attributes** store custom data on an element, for scripts:

<button class="save" data-college-id="742" data-source="search">Save</button>
<script>
  document.querySelector('.save').addEventListener('click', e => {
    const { collegeId, source } = e.currentTarget.dataset;   // names become camelCase
  });
</script>

Values are always strings; do not store sensitive data there, since anyone can read it.

Global attributes work on every element: id, class, style, title, lang, dir, hidden, tabindex, contenteditable, draggable, data-*, inert, and ARIA attributes.