Semantic HTML
Using the HTML element that matches the meaning (button, nav, main, ul) instead of styling a div to look like one.
See it
What it is
Semantic HTML means picking the element that describes what the thing actually is: button, a, nav, main, header, footer, ul, table, label, fieldset, details, dialog. Each one arrives with a role in the accessibility tree already attached. The structural ones (nav, main, ul, table) mostly buy you meaning: a slot in the landmark list, an item count, a grid a screen reader can walk by row and column. The interactive ones (button, a, input, details, dialog) buy you meaning plus behavior: focusability, key handling, and state, free. The opposite is 'div soup', where every element is a styled div and all of that has to be rebuilt by hand.
Concretely: a button is focusable, fires on Enter and Space, announces as 'button', works with voice control ('click Submit'), and respects forced-colors mode. A div with an onClick has none of that until you add tabindex, a role, two key handlers, and an accessible name, and you will get one of them wrong. The first rule of ARIA says exactly this: no ARIA is better than bad ARIA, so use the native element instead.
Common traps. Wrapping a button in an anchor (or vice versa) breaks both: use a for navigation, button for actions. Headings are for structure, not size, so an h4 chosen because it looked right wrecks the outline screen readers navigate by. And section without an accessible name is just a div with extra steps, so give it an aria-labelledby pointing at its heading or use an article, main, or nav where they fit.
Ask AI for it
Refactor this markup to semantic HTML, picking each element from what the content and the interaction actually mean rather than from a checklist. Replace clickable divs and spans with button or a (button for actions, a for navigation), and bind every form control to a real label element. Add header, nav, main, and footer landmarks where the page genuinely has those zones, at page level, and skip the ones it does not have. Use ul and li for a collection only when the items really are a set of siblings and the announced count helps; leave prose and one-off blocks alone. Keep the heading levels nested to match the document's structure instead of forcing a fixed count of h1s. Remove any ARIA roles the native element now provides for free, and keep the existing classes and visual styling identical. For each change, say in one line which semantic you chose it for.