Semantic HTML

Semantic elements give interfaces structure and meaning — use the platform before reinventing it.

01 — Purpose

Structure and meaning from the platform

Semantic HTML provides meaning and structure to interfaces — use elements for their intended purpose.

Browsers, assistive technology, and search engines all consume HTML semantics. A real button ships keyboard activation, focus behaviour, and a clear role. A styled div ships none of that unless you rebuild it by hand — often incompletely.

See the HTML standard and ARIA usage for when native HTML is not enough.

02 — Principles

Use elements for their intended purpose

The platform already provides useful semantics — use them.

  • buttons for actions — submit, toggle, open menu
  • links for navigation — moving to a URL or in-page target
  • headings for hierarchy — one logical outline, no skipped levels for styling
  • landmarks for structure — header, nav, main, footer

03 — Practice

Good semantic HTML

Semantic HTML improves accessibility, maintainability, resilience, and browser support.

  • use lists for lists — ul, ol, dl — not stacked divs
  • use tables for tabular data — with th scope and captions where needed
  • label form fields with label for — not placeholder-only hints; follow GOV.UK labels and legends and accessible forms
  • use dialog or documented modal patterns for overlays
  • pair semantics with keyboard support — see keyboard navigation

04 — Avoid

Fake semantics

Div-based interaction and unnecessary ARIA create fragile interfaces.

  • div-based interaction — click handlers without role, keyboard, or focus
  • fake semantics — styled spans pretending to be headings or buttons
  • unnecessary ARIA replacing native behaviour — see ARIA usage
  • heading levels chosen for font size — use CSS, keep outline logical
  • generic wrappers where a semantic element would cost nothing

05 — Close

Use what the platform gives you

Correct HTML is the cheapest accessibility win available.

Before adding JavaScript or ARIA, ask whether the right element already exists. Most custom widgets fail review because they reinvented a native control poorly.

See the HTML standard, ARIA usage, and the accessibility QA checklist before release.