Key takeaways
- Semantic HTML uses elements for their meaning —
<nav>for navigation,<button>for actions,<article>for a self-contained post. - It makes pages easier for screen readers, search engines and AI systems to understand.
- Semantic HTML isn’t a magic ranking boost, but it removes ambiguity and prevents accessibility and crawling problems.
Open the source of a typical page-builder website and you’ll see dozens of nested <div> elements with class names like elementor-widget-wrap. Visually the page looks fine, but to a screen reader or a crawler it’s a pile of anonymous boxes. Semantic HTML fixes that by choosing elements that describe what each part of the page is.
Semantic vs non-semantic: an example#
Non-semantic:
<div class="top">
<div class="menu"><div onclick="go('/blog')">Blog</div></div>
</div>
<div class="big-text">WordPress Speed Guide</div>
<div class="text">Slow sites lose visitors…</div>Semantic:
<header>
<nav aria-label="Primary"><a href="/blog/">Blog</a></nav>
</header>
<main>
<article>
<h1>WordPress Speed Guide</h1>
<p>Slow sites lose visitors…</p>
</article>
</main>The second version tells every machine reading it: here’s the site header, here’s the primary navigation with a real, crawlable link, here’s the main content, and here’s an article with its title.
The key semantic elements#
| Element | Use it for |
|---|---|
<header> |
Introductory content: site logo and navigation, or the header of an article |
<nav> |
Major navigation blocks (main menu, breadcrumbs, table of contents) |
<main> |
The unique main content of the page — one per page |
<article> |
Self-contained content: a blog post, product card, comment |
<section> |
A thematic group of content, usually with its own heading |
<aside> |
Related but secondary content: sidebars, callouts, author boxes |
<footer> |
Footer of the page or of an article |
<figure> / <figcaption> |
Images, charts or code with a caption |
<time datetime=""> |
Dates and times in machine-readable form |
<button> vs <a> |
Buttons perform actions; links go somewhere |
Why semantic HTML helps SEO#
- Clear main content:
<main>and<article>help systems separate the core content from boilerplate like menus and footers. - Crawlable links: real
<a href>elements can be followed; JavaScript click handlers often can’t. - Heading hierarchy: proper
<h1>–<h3>structure makes topics and subtopics obvious and helps passage-level understanding. - Extractable answers: lists, tables and definitions in proper HTML are easy to quote in featured snippets and AI answers.
- Better accessibility, which overlaps heavily with usability — and usable pages tend to satisfy searchers.
<article> instead of <div>. The benefit is indirect: fewer misunderstandings, better accessibility and cleaner, more extractable content.Need a hand with this?
Get a quick, honest review of your website’s SEO.
Semantic HTML and accessibility#
Screen-reader users navigate by landmarks and headings. With semantic regions, they can jump straight to “main” or list all headings to skim the page — just like sighted users scan visually. Native elements also come with built-in keyboard support: a <button> can be focused and pressed with Enter or Space; a clickable <div> can’t unless you add a lot of extra code.
Semantic HTML in WordPress#
- Choose a theme that uses landmarks (
header,nav,main,footer) — check with View Source. This theme does. - In the block editor, use the Heading block’s level selector correctly instead of styling paragraphs to look like headings.
- Use List, Table and Quote blocks rather than faking them with line breaks.
- In page builders, set the HTML tag of headings and containers (most let you choose
section,articleor heading level). - Avoid “button” widgets that don’t output real links when they navigate somewhere.
Quick audit you can do in five minutes#
- Install the free “HeadingsMap” browser extension and check your heading outline.
- Press Tab repeatedly on your homepage — can you reach every link and button, and see where focus is?
- Run Lighthouse (Chrome DevTools) → Accessibility and fix the top issues.
- View source and search for
<main— there should be exactly one.
For a full checklist, see the HTML accessibility checklist and headings and lists guide.
Semantic HTML FAQ#
Can I have more than one <h1>?#
HTML allows it and Google says it’s fine, but one clear H1 per page is still the most understandable structure for users and assistive technology.
Should I use <section> or <div>?#
Use <section> when the block is a meaningful part of the content with its own heading. Use <div> for purely visual grouping.
Does structured data replace semantic HTML?#
No. Structured data adds explicit facts; semantic HTML gives the visible content a clear structure. Use both.