Heading Hierarchy and HTML Structure
Your roadmap for this lesson
- What a logical heading outline looks like
- How to spot skipped and misused headings
- Which semantic HTML elements help search engines
- Which HTML errors actually affect SEO
Short answer
Heading hierarchy means using H1 for the main topic, H2 for sections, and H3 for subsections, without using headings just for styling. Audit it by extracting headings from your crawl, checking key templates for skipped levels and fake headings, and confirming semantic elements like main, nav, and article, plus HTML errors that break the head section.
Headings are a page’s table of contents. When they are used for font size instead of meaning, the outline turns into noise for screen readers and search engines alike.
A clean outline
H1 Apo Island Day Trip
H2 What's included
H2 Schedule
H3 Morning dive
H3 Afternoon snorkel
H2 Prices
H2 FAQs
What to check
- Skipped levels in templates (H1 then H4).
- Fake headings: bold paragraphs used as section titles, or H tags used only to make text big.
- Boilerplate headings: sidebar and footer widgets like “Follow Us” as H2 on every page.
- Semantic elements: content inside
<main>, menus in<nav>, posts in<article>. - Head errors: non-head elements in
<head>that end it early.
How to audit
- Use custom extraction in your crawler to pull all H2 and H3 text, or a headings browser extension on key templates.
- Review one page per template, not every page.
- Check the Validation tab (Screaming Frog) for “Invalid HTML elements in head” and “Head not first in HTML.”
Practice: good structure or issue?
Sort each item into the right group.
-
H1 topic, H2 sections, H3 subsections
Answer: Good structure.
-
<img> tracking pixel placed inside <head>
Answer: Issue.
-
Footer 'Contact Us' marked as H2 on every page
Answer: Issue.
-
Main content wrapped in <main>
Answer: Good structure.
-
Section titles written as bold <p> text
Answer: Issue.
Common mistakes
- Chasing every validation error. Most do not matter.
- Ignoring head errors. These can disable canonicals and hreflang.
- Auditing pages instead of templates.
Your action
Next, you will audit image alt attributes.
Key terms
- Heading outline
- The tree of H1 to H6 headings that shows a page's structure.
- Semantic HTML
- Elements that describe meaning, such as <main>, <nav>, <article>, <header>, and <footer>.
- Fake heading
- Text styled to look like a heading without heading tags, or a heading tag used only for style.
- Broken head
- Invalid HTML in the <head> that causes browsers and Google to end the head early, ignoring tags after the error.
Questions beginners ask
Does skipping from H2 to H4 hurt rankings?
Not directly. A clean outline helps users, accessibility tools, and Google's understanding of sections, so fix it in templates when easy.
Do I need perfectly valid HTML?
No. Most validation errors do not matter for SEO. Focus on errors that break the head, hide content, or break links.
What breaks the head section?
Elements that are not allowed in the head, such as <div>, <img>, or <iframe>, often added by tag scripts. Google may then treat later tags like canonical or hreflang as body content and ignore them.
Are headings in sidebars and footers a problem?
They add noise. Widget titles like 'Recent Posts' marked as H2 on every page can crowd the outline. Prefer non-heading styling.
Related lessons
Want someone to handle SEO for your business while you learn? The team at Remar Digital can help.