Semantic HTML means the markup itself communicates intent. It provides structure before CSS and JavaScript are applied.
Why semantic HTML matters
Semantic elements improve keyboard navigation, search indexing, and screen reader interpretation. They also reduce the need for ARIA patches later.
How semantic HTML works
Use elements by purpose:
<button>for actions<a>for navigation<main>,<nav>,<aside>, and<footer>for page regions- heading levels for document outline
Avoid replacing semantic elements with generic <div> and <span> unless there is a strong reason.
Code examples
<!-- Div soup -->
<div class="nav"><div class="item">Pricing</div></div>
<!-- Semantic equivalent -->
<nav aria-label="Primary">
<a href="/pricing">Pricing</a>
</nav>
<main>
<h1>Release Notes</h1>
<article>...</article>
</main>
Related terms
A
ARIA (Accessible Rich Internet Applications) is a set of HTML attributes that add accessibility semantics such as roles, states, and properties to custom UI components.
S
A screen reader is assistive software that converts on-screen content into speech or braille output, allowing blind and low-vision users to navigate websites through structure and semantics.
H
HTML validation is the process of checking markup against standards to detect structural and syntax errors that can break rendering, accessibility, and interoperability.
A
An accessible name is the text assistive technologies use to identify a UI element, derived from sources such as visible text, labels, alt text, or ARIA naming attributes.
S
A skip navigation link is a hidden or visually accessible anchor link placed at the very beginning of a web page that allows keyboard and screen reader users to bypass repetitive content blocks, such as navigation menus, and jump directly to the main content area.
L
Landmark roles are specific ARIA roles or HTML5 semantic elements that define the major structural regions of a web page, enabling assistive technology users to quickly identify and navigate to key sections such as the banner, navigation, main content, and footer.
T
Tab order is the sequence in which interactive elements on a web page receive keyboard focus as a user presses the Tab key, determined by the document's source order and any explicit
tabindex attributes.
R
In WAI-ARIA, roles, states, and properties are the three categories of attributes that define what a UI element is, what condition it is in, and what characteristics it has, enabling assistive technologies to present and interact with web content accurately.
A
ARIA labeling techniques are a set of methods using WAI-ARIA attributes—primarily
aria-label, aria-labelledby, and aria-describedby—to provide accessible names and descriptions to interactive elements, regions, and widgets so that assistive technologies can convey their purpose to users.
t
The
tabindex attribute is an HTML attribute that controls whether an element is focusable via keyboard navigation, and optionally determines its position in the sequential tab order of the page.
H
Heading hierarchy is the structured ordering of HTML heading elements (
<h1> through <h6>) in a logical, nested sequence that reflects the document's content outline, enabling users—especially those relying on assistive technologies—to understand and navigate a page's organization.
F
Form label association is the programmatic connection between a form control (such as an input, select, or textarea) and its descriptive label, enabling assistive technologies to announce the purpose of the control when it receives focus.
A
The accessibility tree is a parallel structure to the DOM tree that browsers construct to represent the semantic meaning of a web page for assistive technologies such as screen readers, braille displays, and voice control software.
T
Text alternatives are textual substitutes for non-text content such as images, icons, videos, and controls, enabling people who cannot perceive the original content to understand its meaning and purpose through assistive technologies like screen readers.
D
A document language declaration specifies the primary human language of a web page by setting the
lang attribute on the <html> element, enabling browsers, screen readers, and other tools to process and present the content correctly.
B
Browser Accessibility API Mapping is the process by which web browsers translate HTML elements, attributes, and ARIA annotations into structured data exposed through platform-specific accessibility APIs, enabling assistive technologies like screen readers to understand and interact with web content.
I
Input purpose and autocomplete refer to the practice of programmatically identifying the purpose of form fields using the HTML
autocomplete attribute, enabling browsers and assistive technologies to automatically fill in user data and present fields in ways that are easier to understand and complete.
P
Progressive enhancement is a web design strategy that starts with a baseline of functional, accessible HTML content and layers on CSS styling and JavaScript behavior so that all users receive a working experience regardless of their browser, device, or assistive technology capabilities.
O
The outline algorithm is a theoretical method defined in early HTML5 specifications for determining a document's hierarchical structure based on sectioning elements rather than heading levels alone. Because no browser or assistive technology ever implemented it, developers must rely on a flat heading hierarchy (
h1 through h6) to communicate document structure.
N
Navigation and bypass mechanisms are techniques that allow users to skip past repeated blocks of content and move directly to the main content or specific sections of a web page, primarily benefiting keyboard and screen reader users.
Q
Quirks Mode is a backward-compatible rendering mode that browsers activate when an HTML document lacks a proper Document Type Declaration (DOCTYPE), causing inconsistent layout behavior and validation failures. The DOCTYPE declaration tells browsers which version of HTML to use, ensuring Standards Mode rendering.
Help us improve this glossary term
Was this guide helpful?
Scan your site
Rocket Validator scans thousands of pages in seconds, detecting accessibility and HTML issues across your entire site.