HTML Attributes & Selectors

<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