Semantic HTML
Semantic HTML uses HTML elements according to their meaning — <button> for buttons, <nav> for navigation, <article> for self-contained content, <h1>-<h6> for hierarchical headings — rather than reaching for <div> with styling. Semantic markup is the foundation of accessibility, SEO, and resilient interactive behaviour.
Every <div onclick> that should be a <button> is a small accessibility regression: screen readers don't announce it as a button, keyboard users can't tab to it, Enter and Space don't trigger it. Every section without a heading is a small SEO regression. The pattern is mostly about discipline rather than knowledge: HTML's semantic vocabulary is small enough to memorise, the right element is usually obvious, and the framework's component library either has good defaults or doesn't. The lasting test: open the page in a screen reader and listen — semantic HTML reads as a coherent document; non-semantic markup reads as 'clickable, clickable, clickable, clickable'.
Related terms
- Accessibility tree
The accessibility tree is the structured representation of a webpage that assistive technologies — screen readers, voice control, switch devices — read instead of the visual rendering.
- Progressive enhancement
Progressive enhancement is the design strategy of building a page that works at a minimum HTML+CSS baseline, then layering interactive enhancements on top via JavaScript.
- OWASP Top 10
The OWASP Top 10 is a community-curated list of the most critical web application security risks, published every 3-4 years by the Open Web Application Security Project.