How do you decide which HTML element to use for an interactive control, and why does that choice matter beyond styling?
technical-conceptual · Mid level · software-engineering
What the interviewer is really asking
Probes whether the candidate reasons about native element semantics, accessibility, and behavior contracts when choosing markup, instead of treating all elements as interchangeable styled boxes.
What to say
- Start from the behavior contract: a <button> is focusable, fires on Enter and Space, exposes a button role to assistive tech, and submits or resets inside a form — a <div> with a click handler ships none of that.
- Map intent to the right element: navigation that changes the URL is an <a href>, an in-page action is a <button>, a labeled grouping of controls is a <fieldset>/<legend>, and tabular data is a real <table> — semantics drive keyboard support, screen-reader output, and SEO.
- Note the cost of getting it wrong: rebuilding native behavior on a generic element means re-adding tabindex, role, keydown handling, and disabled states, and it's easy to miss cases, so prefer the native element and restyle it.
What to avoid
- Saying 'it's all divs with CSS, the tag doesn't matter' — that discards keyboard and screen-reader behavior.
- Using an <a> with no href (or href='#') as a button, which breaks expected activation and focus semantics.
- Claiming ARIA roles are a full substitute for native elements rather than a fallback when no native element fits.
Example answers
Strong: I pick the element by the behavior I need, not the look. If it navigates I use an <a href> so middle-click and right-click 'open in new tab' work; if it triggers an action I use a <button> so I get focus, Enter and Space activation, and a button role for free. I only reach for tabindex and ARIA roles when no native element fits, because reimplementing native behavior on a <div> is where keyboard bugs creep in.
Weak: Honestly I just use divs and spans and add onClick, then style them however the design needs. If accessibility comes up later I'll throw a role='button' on it. The semantic tags are mostly for SEO.