Semantic HTML
Using elements for their meaning, so the document conveys structure without extra description.
Semantic HTML means choosing elements for what they mean rather than how they look: a button for something that does a thing, a heading for a heading, a list for a list, a navigation landmark for navigation. The payoff is that meaning is conveyed to browsers, assistive technology, and machines without any additional description.
Concretely, native elements bring behaviour that is otherwise expensive to rebuild: focusability, keyboard activation, form participation, correct announcement, and platform conventions that vary by operating system. Reimplementing that on a generic element is a lot of code that will be subtly wrong, which is why ARIA's first rule is to prefer the native element.
Landmarks — header, navigation, main, footer, and named regions — give screen-reader users a structural map they can jump around. They are also easy to get wrong through duplication: several cards each using a footer element produce several page-level footer landmarks, which an automated check will correctly flag. The fix is usually to nest them inside a sectioning element so each footer belongs to its own region.
Semantics also help outside accessibility. A well-structured document is what makes reader modes, link previews, search indexing, and content extraction work; see Structured Data and Search Engine Optimization.
See also6
Hand-picked in the note itself — the neighbours worth reading next.
Accessibility
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
Design & Interface20 connections
ARIA
Attributes that describe roles, states, and relationships to assistive technology when HTML cannot.
Design & Interface10 connections
Document Object Model
The live tree of objects a browser builds from a document, and the surface every UI framework writes to.
Web Platform12 connections
Progressive Enhancement
Building so the core experience works without scripts, with richer behaviour layered on top.
Web Platform14 connections
Keyboard Navigation
Making every interactive affordance reachable and operable without a pointer.
Design & Interface12 connections
UI Primitive
The small set of typed components through which all interface markup is expressed.
Design & Interface10 connections
Related2
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from12
Notes elsewhere in the wiki that reach for this one.
- AccessibilityDesign & Interface
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
- ARIADesign & Interface
Attributes that describe roles, states, and relationships to assistive technology when HTML cannot.
- Document Object ModelWeb Platform
The live tree of objects a browser builds from a document, and the surface every UI framework writes to.
- Focus ManagementDesign & Interface
Deliberately controlling which element receives keyboard focus as an interface changes.
- Focus TrapDesign & Interface
Confining keyboard focus inside a modal surface so it cannot wander behind it.
- Headless ComponentDesign & Interface
A component supplying behaviour and accessibility with no styling of its own.
- Keyboard NavigationDesign & Interface
Making every interactive affordance reachable and operable without a pointer.
- Progressive EnhancementWeb Platform
Building so the core experience works without scripts, with richer behaviour layered on top.
- RSSData & Content
A syndication format letting readers subscribe to a site without an intermediary.
- Search Engine OptimizationData & Content
Making content discoverable through search, most of which is ordinary quality work.
- Structured DataData & Content
Machine-readable markup describing what a page is about, in a shared vocabulary.
- UI PrimitiveDesign & Interface
The small set of typed components through which all interface markup is expressed.