Semantic HTML is the practice of using elements that describe the role of content, such as <header>, <nav>, <main>, <article>, <button> and <h1>, instead of generic <div> and <span> wrappers.
Why it matters
Screen readers use landmarks and headings to let people jump around a page, and keyboards rely on native controls. Search engines also use structure to interpret content. Semantic markup usually means less JavaScript and less ARIA, because the browser already supplies the behavior.
It costs nothing in performance and tends to make CSS easier to organize.
Example
Non-semantic:
<div class="menu"><div onclick="go()">Home</div></div>Semantic:
<nav><a href="/">Home</a></nav>The second version is announced as navigation, the link is keyboard focusable and works without JavaScript.
Common mistakes
- Using headings for font size instead of outline order, for example jumping from h1 to h4.
- Making clickable divs instead of real buttons or links.
- Adding ARIA roles to elements that already carry that meaning.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.