Custom data-* Attributes — HTML Technical Interview Questions & Answers

Attaching custom data to elements for JS to read.

Custom data-* Attributes

  • Attaching custom data to elements for JS to read.
  • Custom data-* Attributes is an HTML attribute — extra info on the opening tag. Example: class, id, href, src, alt, for, type. <p class="fail">Fail</p>
  • id is unique on the page. class can repeat. Don’t use the same id twice. Prefer class for CSS.
  • Trap: styling with id for everything. Trap: inline style when a class would do.

Technical Interview Tip: Custom data-* Attributes: show it on a tag. id vs class if relevant.

Code Examples for Custom data-* Attributes

Custom data-* Attributes — working example

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="HTML practice" />
    <title>Head and attributes</title>
  </head>
  <body>
    <p class="note" title="Tooltip" data-level="1">
      Attributes add machine-readable info; head holds metadata.
    </p>
  </body>
</html>

Custom data-* Attributes — head holds metadata; title/data-*/lang/dir (and careful event attributes) annotate elements.

How to Explain Custom data-* Attributes to an Interviewer

What is Custom data-* Attributes?

An HTML attribute Goes on the opening tag