Semantic HTML – Meaning, Elements and Accessibility on the Web

The Most Important Semantic HTML Elements and Their Roles

HTML5 introduced a comprehensive set of semantic elements. The following overview shows the key elements, their meaning, and when they should be preferred over a generic div or span:

• ✓ main: The main content of the page – used once per document, directly reachable for screen readers and skip links
• ✓ nav: Navigation area – for main navigation, breadcrumbs and other link collections, recognised as a landmark by screen readers
• ✓ header and footer: Head and foot area of a document or section – communicate structural role to browsers and assistive technologies
• ✓ article: Self-contained, standalone content such as a blog post, news item, or product – meaningful independently of context
• ✓ section: A thematic section within a document – typically requires its own heading and structures longer content
• ✓ aside: Complementary content such as sidebars, related links, or supplementary information that relates to but is not part of the main content
• ✓ h1 to h6: Heading hierarchy – structures content for screen readers, search engines and all readers; h1 used once per page for the main title
• ✓ ul and ol: Unordered and ordered lists – communicate list structure to screen readers and enable correct announcements such as "3 items"

div and span: When Generic Elements Are Appropriate

The div element is not inherently wrong when used correctly. As a generic block container with no semantic meaning, div is appropriate when an area needs to be grouped purely for layout purposes and no suitable semantic element exists. The same applies to span at the inline level.

The problem arises when div and span are used to replace semantic elements: a <div class="nav"> is meaningless to a screen reader, whereas a <nav> is correctly recognised as a navigation landmark. A <div class="article"> carries no meaning for search engines, whereas an <article> signals self-contained, shareable content. The role of an element should always be communicated by the element itself, not by CSS class names.

For developers, the rule of thumb is: Is there a semantic HTML element for this content? Then use it. div and span are reserved for cases where no appropriate semantic element exists.

Semantic HTML, SEO and Visibility in Search Results

Search engines rely on semantic markup to correctly categorise content. Google's crawler interprets h1 as the main title, h2 as subheadings, article as standalone content, and nav as a navigation area that is not primarily indexed. These signals directly influence how content is weighted and displayed in search results.

• ✓ Heading hierarchy: Clear h1 and h2 structure helps search engines identify the main topic and subtopics of a page
• ✓ article element: Signals standalone, shareable content and supports correct indexing of blog posts, products and news articles
• ✓ Structured data: Semantic HTML is the foundation for Schema.org markup and rich snippets in search results
• ✓ Search engine optimisation through readability: Well-structured code with semantic elements reduces the effort for search engine crawlers and improves visibility
• ✓ Main content identifiable: The main element helps search engines distinguish main content from boilerplate such as navigation and footer

Semantic HTML and Screen Readers: How Assistive Technologies Use Content

Screen readers such as JAWS, NVDA, or VoiceOver build an accessibility tree from the HTML source code, a structured representation of all accessible content on a page. Semantic HTML elements provide the foundation for correct roles, states, and properties in the accessibility tree.

For example: when a person navigates a page with a screen reader, they can jump directly to landmarks like nav, main, and aside without having to listen through all intermediate content. Headings with h1 through h6 enable rapid scanning via heading navigation. Lists with ul and ol are announced with item count. All of these features require semantic HTML: a div with a CSS class of heading does not trigger any of these behaviours.

Closely related to semantic HTML is ARIA: ARIA attributes can supplement missing semantics but should always be a last resort. The W3C rule is: No ARIA is better than bad ARIA. Correct native HTML elements always come before ARIA workarounds.

Semantic HTML and WCAG Accessibility

Several WCAG criteria directly require or strongly benefit from semantically correct HTML:

• ✓ WCAG 1.3.1 – Info and Relationships: Information, structure and relationships must be programmatically determinable; semantic HTML is the most direct implementation
• ✓ WCAG 2.4.1 – Bypass Blocks: Landmark regions through semantic elements enable bypassing of content blocks
• ✓ WCAG 2.4.6 – Headings and Labels: Meaningful h1 and h2 headings describe the topic and purpose of a section
• ✓ WCAG 4.1.2 – Name, Role, Value: All interactive elements require a programmatically determinable role; native semantic elements provide this automatically
• ✓ WCAG 1.3.5 – Identify Input Purpose: Semantic form elements with correct label associations satisfy this criterion without additional effort

Frequently Asked Questions about Semantic HTML