Welcome to Day 5 (and Week 2) of our HTML series!
We have left the history books behind. Now, we are in the editing room. Week 2 is all about Structure & Semantics. We are going to learn how to organise your content so that Google (and your customers) can understand it instantly.
The most common mistake business owners make when building a WordPress page is treating text like a painting or a visual design project.
- “I want this text to be big, so I’ll select ‘Heading 1’ from the dropdown.”
- “I want this text to be medium and bold, so I’ll select ‘Heading 3’.”
This is wrong.
In HTML, Headings (<h1>, <h2>, <h3>) are not about Style (how it looks). They are about Hierarchy (how it is organised).
Using headings purely for cosmetic reasons is like writing a non-fiction book and making random sentences into Chapter Titles just because you like the font size. It creates a chaotic map. It confuses the reader who is trying to skim, and crucially, it confuses Google bots that rely on structure to understand what is important.
Today, we are going to teach you the strict rules of the Heading Hierarchy. Follow them, and your SEO rankings will improve naturally because you are finally speaking Google’s language.
The “Newspaper” Analogy 📰
To understand HTML headings, pick up a physical newspaper (or visit a news site like the BBC).
- The Headline (H1): “Man Lands on Mars.” There is only one. It is huge. It tells you immediately what the entire front page is about. You don’t need to read the article to know the topic.
- The Sub-Headings (H2): “The Journey,” “The Landing,” “The Reaction.” These break the massive story into digestible main sections. They guide your eye down the page.
- The Details (H3): Inside the “Journey” section, you might have specific points like “Engine Trouble” and “Fuel Calculations.”
If you took the specific detail “Fuel Calculations” and moved it to the front page as the main headline, the structure would collapse. The reader would assume the entire newspaper is about fuel maths, not the moon landing.
HTML works exactly the same way.
<h1>= The Main Title (The Topic).<h2>= The Main Points (The Chapters).<h3>= The Sub-points (The Sub-chapters).<h4>to<h6>= Deeply nested details (rarely used in standard web pages).
The “Scanner” Behaviour:
Studies show people don’t read websites; they scan them in an “F-Shape” pattern. They read the headlines to see if the content is relevant. If your headings are used randomly for style, the scanner can’t find what they need, and they hit the “Back” button.
The Golden Rule: The H1 Tag 👑
We touched on this in December, but now we look at the code implications.
Code: <h1>Emergency Plumber in Bristol</h1>
The Rules:
- Only One Per Page: You must have exactly one
<h1>. No more, no less. While HTML5 technically allows multiple H1s, Google has repeatedly stated they prefer a single H1 to clarify the page topic. - It Must Match the Topic: It should describe the entire page content. It is the label on the box.
- It Must Be at the Top: Logically, the title comes first. Putting an H1 in the footer makes no semantic sense.
Common Business Mistake: The Logo Trap
Many older, poorly coded themes wrap the Company Logo in an <h1> tag.
- The Result: Every single page on your site tells Google: “The main topic of this page is [Company Name].” Your “Boiler Repair” page tells Google it is about “Bob’s Plumbing.” Your “Contact” page tells Google it is about “Bob’s Plumbing.”
- The Fix: Ensure your theme (like GeneratePress) is modern. GeneratePress correctly assigns the H1 to the Page Title (e.g., “Boiler Repair”), which allows you to rank for that specific service.
The “Russian Doll” Logic: H2 and H3 🪆
Once you have your H1, you use H2s to divide the content. This is the “Table of Contents” for your page.
The Rule of Nesting:
You should never skip a level. The hierarchy must flow logically.
- Good: H1 -> H2 -> H3.
- Bad: H1 -> H4 (because you wanted the text to be smaller).
Why Skipping is Bad (Accessibility):
Imagine walking up a staircase and finding 3 steps missing in the middle. You stumble.
Screen Readers (tools used by blind or visually impaired users) rely heavily on headings to navigate. A blind user can press a shortcut key to “Jump to next Heading.”
If they jump from an H2 straight to an H4, the user assumes they have missed some content in the middle. They wonder where the H3 went. It creates a confusing, broken user experience, and Google penalises sites that are not accessible.
Example Structure: A “Services” Page
Notice how the indentation shows the relationship.
<h1>Garden Landscaping Services</h1> (The Topic of the whole page)
<h2>Our Services</h2> (Main Section 1)
<h3>Lawn Mowing</h3> (Detail of Section 1)
<h3>Tree Surgery</h3> (Detail of Section 1)
<h3>Patio Cleaning</h3> (Detail of Section 1)
<h2>Why Choose Us?</h2> (Main Section 2)
<h3>Experienced Team</h3> (Detail of Section 2)
<h3>Fully Insured</h3> (Detail of Section 2)
<h2>Contact Us</h2> (Main Section 3)
Notice how clean that is? Google’s bots can scan this outline in milliseconds and instantly understand the semantic relationship between “Lawn Mowing” (a service you offer) and “Our Services.”
The “Vanity” Trap: Using Headings for Style 💅
This is the hardest habit to break for beginners using visual editors.
Scenario: You have a glowing customer testimonial: “Best service ever!”
You want it to stand out. You want it big and bold. So, you highlight it and select <h2>.
The Problem:
You just told Google that “Best service ever!” is a main topic of the page, structurally equal in importance to “Our Services” or “Pricing.”
It dilutes your SEO relevance. You are screaming irrelevant information.
The Solution:
You must separate Structure (HTML) from Style (CSS).
- HTML: Use a paragraph tag, because it is just text.
<p class="testimonial">Best service ever!</p> - CSS: Tell the browser to make anything named
.testimonialbig, bold, blue, and uppercase.
How to do this easily:
Tools like GenerateBlocks are fantastic for this. You can add a “Headline” block to get the design tools, but in the settings sidebar, you can change the HTML tag from h2 to p (Paragraph).
This gives you the visual impact of a heading (big font) without the semantic baggage that confuses Google. You get the best of both worlds.
The Audit: How to Check Your Hierarchy 🕵️♂️
You don’t need to read the raw code line-by-line to check this. You can use tools to X-ray your site.
1. SEOPress Content Analysis
If you have SEOPress installed (as recommended), scroll to the bottom of your WordPress editor while writing any page or post.
Look at the “Content Analysis” card.
It acts as a checklist and will specifically warn you if:
- “No H1 tag found.” (Disaster).
- “More than one H1 tag found.” (Confusing).
- “Heading levels skipped.” (e.g., H2 to H4).
2. The Browser Extension
Install a free Chrome extension called “HeadingsMap”.
When you view your website, click the button. It generates a visual “Table of Contents” on the left of your screen based entirely on your tags.
- Look for: Gaps, errors, or weird empty headings.
- Spotting Style Abuse: If you see “Sign up for our newsletter” listed as a major H2 alongside your services, you know you have used a heading for style, not structure.
- Fix them: Go back to WordPress, select the block, and change the level or tag type.
Summary: Structure First, Style Second
HTML headings are the skeleton of your content. They are not paintbrushes.
- H1: The Book Title.
- H2: The Chapters.
- H3: The Sub-chapters.
- Paragraph: The text.
If you respect this hierarchy, Google rewards you by understanding your content better than your competitors, who just use bold text and random header tags.
📅 Coming Up Tomorrow…
We have organised the headings. Now we need to look at the text itself.
Have you ever noticed that hitting “Enter” in WordPress sometimes creates a huge gap, and sometimes a small one?
Come back tomorrow to join us for The Paragraph and the Break: <p> vs <br>.