← All terms
Glossary

Semantic HTML

Semantic HTML is the practice of using HTML elements for their intended meaning — `<button>` for buttons, `<nav>` for navigation, `<article>` for articles — rather than reaching for `<div>` and `<span>` for everything.

Also: semantic markupAlso: html5 semanticsAlso: native html elements

Detailed explanation

Native semantic elements bring three benefits for free: accessibility tree exposure, default keyboard behavior, and search-engine relevance signals. A `<button>` is automatically focusable, fires on Enter and Space, and announces "button" to screen readers — all without one line of JavaScript or ARIA.

The W3C "first rule of ARIA" applies here: do not use ARIA when a native element does the job. `<div role="button" tabindex="0">` requires a keyboard handler, click handler, focus styles, and matching ARIA states; `<button>` requires none of that.

How this applies to Shopify stores

Custom Shopify themes built by agencies often substitute `<div>` for buttons and `<span>` for links to "have full styling control". AccessComply flags these as 4.1.2 (Name, Role, Value) failures.

Primary source: html.spec.whatwg.org