Welcome to Day 9 of our HTML series!
We have spent the last week looking at the content of your site (Headings, Text, Lists). Now, we need to look at the containers that hold them. If you look at the raw code of an old website (from around 2010), you will see one word repeated thousands of times: <div>.
<div id="top"><div class="content"><div class="sidebar"><div class="bottom">
This condition is known in the web industry as “Divitis.”
While <div> tags technically work (they create a box), they are meaningless. They tell Google absolutely nothing about what is inside the box. It is like handing a blind person a blank sheet of paper.
In 2026, we use Semantic HTML5. Instead of generic boxes, we use specific containers like <header>, <main>, and <footer>, and today, we are going to explain why swapping your “Divs” for “Semantics” is one of the easiest SEO wins you can get, and how it helps blind users navigate your shop.
The Analogy: The Mystery Move 🚚
Imagine you are moving house. You pack everything into identical brown cardboard boxes. You seal them with tape. You do not write anything on them.
When the movers arrive, they ask: “Where does this box go?”
You say: “I don’t know. Open it and check.”
They open it. It contains cutlery. “Okay, Kitchen.”
They open the next one. Towels. “Okay, Bathroom.”
This is Divitis. It is slow, inefficient, and frustrating.
Now imagine you use Semantic Boxes.
You write “KITCHEN” in big red letters on the side of the box.
The movers don’t need to open it. They grab it and run straight to the kitchen.
Google is the Mover.
- If you use a
<div>, Google has to analyse the content to guess what it is. - If you use a
<main>tag, Google knows instantly: “This is the unique content of the page. This is what I should rank.”
The “Big Three” Containers 🏛️
There are three tags that define the layout of almost every modern website.
1. The <header> Tag
This is the top of your document.
- What goes inside: Your Logo, your Navigation Menu, and maybe a Search Bar.
- The Rule: This content is usually the same on every single page.
- Why it matters: Google knows it can skip this. It knows “Bob’s Plumbing” is your name, not the title of the blog post.
2. The <main> Tag (The VIP)
This is the most important tag for SEO.
- The Rule: There can be only one
<main>tag per page. - What goes inside: The unique content for that specific page.
- On a Blog Post: The article text.
- On a Product Page: The price, description, and “Add to Cart” button.
- Accessibility: A blind user can hit a “Skip to Main Content” button. Their screen reader instantly jumps past the 50 links in your menu and starts reading the article. If you use a
<div>, they have to listen to the whole menu first.
3. The <footer> Tag
This is the bottom of the document.
- What goes inside: Copyright notice (
© 2026), Privacy Policy links, and maybe your physical address. - Google’s view: It knows this is “administrative” content. It won’t penalise you for “Duplicate Content” just because your footer text appears on every page.
The Supporting Cast: <nav>, <article>, and <aside> 🎭
Once you have your Big Three, you can get even more specific.
The <nav> Tag (Navigation)
Don’t just wrap your menu links in a <div>. Wrap them in a <nav>.
It tells Google: “These links are the primary map of the website.”
The <article> Tag
Use this for self-contained content, like a blog post or a news story.
The rule of thumb: If you took this piece of content and reprinted it in a newspaper, would it still make sense? If yes, it’s an <article>.
The <aside> Tag (The Sidebar)
This is for content that is “tangentially related” to the main content.
- Examples: “Related Posts,” “About the Author,” or “Adverts.”
- SEO Impact: Google knows that text inside an
<aside>is less important than text inside<main>. If you put your main keyword here, it carries less weight.
The “Div” isn’t Dead (It’s just Demoted) 📉
Does this mean you should never use a <div>?
No. The <div> still has a job. Its job is Styling, not Meaning.
If you need to group two photos together just so you can put a blue border around them, use a <div>. It has no semantic meaning, which is exactly what you want for a purely visual design element.
- Use Semantic Tags: To describe what the content is.
- Use Divs: To describe where the content sits (layout).
Theme Check: Is Your Site Semantic? 🕵️♂️
Most business owners don’t code their own layout; their WordPress Theme does it. Is your theme helping you or hurting you?
The Standard: We recommend GeneratePress because it is strictly semantic out of the box.
If you install it and run a scan, you will see the <header>, <nav>, and <main> tags perfectly placed.
How to Check Your Site:
- Open your website.
- Right-click -> Inspect.
- Look at the code panel.
- Scroll to the top. Do you see
<header>? - Scroll to your blog post content. Is it wrapped in
<main>?
If you see <div id="header"> instead of <header>, your theme is outdated (suffering from Divitis). It might be time to switch.
Summary Checklist: The Container Audit
- [ ] Header: Does your logo live inside a
<header>tag? - [ ] Menu: Are your links wrapped in a
<nav>tag? - [ ] Content: Is your unique page content wrapped in a
<main>tag? (Crucial!). - [ ] Footer: Is your copyright info in a
<footer>tag? - [ ] Sidebar: If you have a sidebar, is it an
<aside>?
By using the right boxes, you help Google unpack your moving truck faster. And when Google understands your site better, it ranks your site higher.
📅 Coming Up Tomorrow…
We have talked about the Footer tag. But what actually goes in there?
Tomorrow, we are going to do a Weekend Workshop.
We will teach you how to finally fix that annoying copyright date that still says “2023.”
Join us for Weekend Workshop: Fixing Your Footer Copyright Date (HTML Basics).