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 behavior 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
Accessibility
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
Design & Interface27 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 Platform18 connections
Progressive Enhancement
Building so the core experience works without scripts, with richer behavior layered on top.
Web Platform16 connections
Keyboard Navigation
Making every interactive affordance reachable and operable without a pointer.
Design & Interface14 connections
UI Primitive
The small set of typed components through which all interface markup is expressed.
Design & Interface12 connections
Related2
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from13
- 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.
- Diegetic InterfacePlay & Games
An interface that exists inside the fiction, readable by the character as well as the player.
- 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 behavior 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 behavior 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.