Semantic HTML for better SEO

Semantic HTML uses tags that describe the meaning of content, not just how it looks on screen. In its simplest form, it’s the difference between <div class="big-text"> and <h1>. Both might look identical visually, but search engines read them completely differently 🧐.

Depending on your stack and development process, this has different implications for you. When you’re working in Elementor, Divi, or any modern page builder, you’re not writing HTML – you’re normally selecting seemingly irrelevant options from dropdowns. The builder writes the HTML for you.

However in reality, selecting “H1” vs “H2” vs “Div” is a semantic HTML decision. The “HTML Tag” option in your container settings? Same thing.

In reality, you’re already doing this work. The question is: are you doing it right?

What this means for SEO

Search engines parse HTML to understand content hierarchy and context. When you make semantic choices in your page builder, you’re literally telling Google what matters on the page.

For example, your heading hierarchy is your content outline (I’ve done webinars in TAB on this in the past – see https://theadminbar.com/events/proper-headings/). Every page should have ONE H1 (your main topic), followed by H2 subheadings for major sections, H3s nested under relevant H2s, and so on.

In page builders, this means:

• Choose heading levels based on hierarchy, not size (then style them using classes)
• Never skip levels (don’t jump from H2 to H4)
• Set your page title as H1 (most themes do this automatically)

The structural elements of the page tell the full story. Elements like <header>, <nav>, <main>, <article>, and <section> help search engines understand page layout.

Most page builders offer “HTML Element” settings where you can choose between <div>, <section>, <article>, etc. The problem here is that most people don’t know which to choose or why it matters… 

The Page Builder Problem

Modern page builders have made website creation accessible to many of us. In turn, they’ve also created a new problem: it’s incredibly easy to build visually beautiful sites with terrible semantic structure.

Lets sat you’re building a service page in Elementor… You need some visual hierarchy within one section, so you style headings to look right – but you leave them all as H2 because, well, it looks fine. You wrap everything in containers for styling purposes and move on.

Visually it looks great, but semantically it’s a mess.

The underlying HTML might have:

• Multiple H2 tags (when they should be H2, H3, H4 hierarchy)
• Content wrapped in nested <div> elements (when it should be in <article> or <section>)
• No <main> element identifying primary content of the page

Search engines see this structural confusion and have to guess what’s important. And when search engines guess, you lose control of your SEO outcomes.

Common Mistakes

The most common semantic HTML mistakes I come across are: 

1️⃣ Multiple H1s: Many builders default to H1 for any “big heading.” This results in pages with 5-6 H1 tags, confusing search engines about the main topic (especially if there’s a scrolling banner in the hero).

2️⃣ Headings Chosen by Size: Designers select H4 because “it looks right” – even though it should be an H2 based on content hierarchy. This is especially prevalent if you’ve got a sub heading next to a big title. 

3️⃣ E-VER-Y-THING is a Div: Default builder settings wrap everything in <div> tags – outputting semantically meaningless reams of code that gives search engines zero structural clues.

4️⃣ No Main Element: Most builders don’t automatically include a <main> element, and most users don’t know (or don’t bother) to add one manually 🙄.

How to make this better…

Most people building WordPress sites don’t understand what those “HTML Tag” dropdowns actually do. They see options like Div, Section, Article, Aside, Header, Footer – and either leave it on default or pick randomly.

If this sounds like you (firstly, don’t worry – it’s part of the learning curve), here’s a quick rundown/checklist of the main elements and how to use them:

<main>: The primary content of the page (only ONE per page)

<article>: Standalone content (blog posts, products – things that could be shared independently) – these can be nested within the <main> element, and you may have more than one of them on a page. 

<section>: Thematic groupings with a heading (features section, testimonials, etc.) – again, these can be nested

<aside>: Supplementary content (sidebars, related posts)

<nav>: Navigation menus

<div>: Generic container with NO semantic meaning – use only when none of the above apply

For heading hierarchy:

• ONE <h1> per page (the main topic)
• Use <h2> for main sections
• Use <h3> for subsections under H2s
• Don’t skip levels
• Choose based on hierarchy, not size

Large Language Models (LLMs)

Not only is all of the above important for traditional SEO, but it’s important for AI SEO (or LLMO) too… Large Language Models powering Google’s AI Overviews, ChatGPT, and Perplexity rely heavily on structured content to extract and cite information accurately.

When LLMs crawl your content, semantic HTML provides the roadmap:

• The H1 tells them the main topic
• The heading hierarchy shows content organization
• The <main> element identifies primary content
• Proper <article> tags signal standalone content worth citing

Pages with clear semantic structure are simply more “citable” – and as AI becomes the primary search interface, citability equals visibility.

How Much Is “Enough”?

You don’t need perfect semantic markup everywhere. Like all SEO, it’s about finding the right balance.

Priority #1: Fix Heading Hierarchy Audit your key templates:

• Does each page have only ONE H1?
• Are main sections marked with H2?
• Are subsections marked with H3?
• Are there skipped levels?

Fix this across your homepage, service pages, and blog posts – you’ve addressed the majority of semantic SEO impact. There are chrome extensions like HeadingsMap that will help with this. 

Priority #2: Key Structural Elements Focus on templates that drive results:

• Homepage: proper <header>, <nav>, <main>, <footer>
• Service/Product Pages: main content in <main>
• Blog Posts: content in <article>

Priority #3: Build It Into Your Workflow Create a checklist:

• What’s the H1? (page title)
• What are the H2s? (main sections)
• Is main content wrapped in <main>?
• Is navigation wrapped in <nav>?

Make these standard questions, and semantic HTML becomes automatic.

Quick Implementation by Builder

WordPress Block Editor: Use block settings to change HTML elements (Group → Section). Most themes include good semantic structure.

GeneratePress/Kadence: Container blocks have “HTML Element” settings – use them. Both output clean semantic HTML when configured properly.

Elementor/Divi: Check “HTML Tag” settings in Advanced tabs. Don’t leave everything as default <div>. These require more manual attention.

Bricks: You have granular control – use it. Build semantic structure into templates from the start.

Summing up… 

Every time you select an element from a dropdown in your page builder, you’re making an SEO decision. Those choices create the HTML structure that determines how search engines and AI understand your content.

You don’t need to become a developer. You just need to:

1. Understand what these options (and those dropdowns) mean
2. Choose heading levels by hierarchy
3. Use semantic elements appropriately
4. Build it into your templates

This isn’t about perfection – it’s about building sites that search engines can truly understand. As AI-powered search becomes the norm, that understanding directly translates to visibility and business results 😍

And if you’re reviewing an existing site, make sure you’re covering the main bases. Get your key templates right, focus on heading hierarchy and main structural elements, and make it part of your standard workflow. Do that, and you’re building sustainable organic visibility that works for traditional search today AND AI-powered search tomorrow.