What is semantic HTML? Why does it matter, and how is <button> better than a <div> with a click handler?
Show the explanation
Model answer. Semantic HTML means choosing elements by meaning, not appearance: <nav> for navigation, <button> for actions, <h2> for a section heading, <table> for tabular data, <ul> for lists.
Why it matters:
- Accessibility: screen readers announce roles ("button", "navigation", "heading level 2") and let users jump between landmarks and headings.
- SEO: search engines understand the structure and main content better.
- Built-in behaviour for free, and code that is easier to maintain.
<button> vs a clickable <div>:
<!-- works with mouse, keyboard (Tab, Enter, Space), screen readers, and forms -->
<button type="button" onclick="save()">Save</button>
<!-- mouse only, unless you add all of this yourself -->
<div role="button" tabindex="0" onclick="save()" onkeydown="if (event.key === 'Enter' || event.key === ' ') save()">Save</div>The <div> is not focusable, not announced as a button, and ignores the keyboard until you rebuild everything the native element already provides. Rule: use the native element first; add ARIA only when no native element fits.
Original UniCircle question. Last reviewed 22 Oct 2026.