Fixing the Missing <main> Landmark on the Homepage

Version: v1.0.380
Control: SEO-13
Category: SEO / Semantic HTML

---

The Problem

Semantic HTML landmarks are one of the most reliable signals available to both assistive technologies and search engine crawlers. The <main> element tells a browser, screen reader, or crawler: "this is the primary content of the page."

Despite the rest of the platform (pricing, privacy, terms, and ROPA pages) already using <main> correctly, the homepage was the one outlier. Its entire content — hero section, feature highlights, and trust/CTA blocks — was wrapped in a plain <div>:

<!-- Before -->
<div class="flex min-h-screen flex-col">
  <header>…</header>
  <div>  <!-- ← no semantic role -->
    <!-- Hero -->
    <!-- Features -->
    <!-- Trust / CTA -->
  </div>
  <footer>…</footer>
</div>

This meant that any screen reader user arriving at the homepage had no programmatic way to jump straight to the main content — a basic accessibility expectation covered by WCAG 2.1 (landmark regions). For crawlers, the absence of a <main> landmark removes a useful structural signal that helps distinguish primary content from peripheral elements like navigation and footers.

---

The Fix

The content wrapper <div> has been replaced with a <main> element. No styles, layout, or visual appearance were changed — only the tag itself:

<!-- After -->
<div class="flex min-h-screen flex-col">
  <header>…</header>
  <main class="flex flex-1 flex-col">  <!-- ← semantic landmark -->
    <!-- Hero -->
    <!-- Features -->
    <!-- Trust / CTA -->
  </main>
  <footer>…</footer>
</div>

The flex flex-1 flex-col classes are carried over unchanged, so the homepage continues to render identically across all viewports.

---

Impact

Area	Before	After
Screen reader landmark navigation	❌ No <main> skip target	✅ Users can jump directly to main content
Crawler content identification	⚠️ Primary content indistinguishable from layout divs	✅ Main content region explicitly declared
Visual layout	✅ No issues	✅ Unchanged
Consistency with other pages	❌ Homepage was the only page missing <main>	✅ All pages now use <main> correctly

---

Context Within the Platform

This fix is part of an ongoing SEO structure audit (SEO-13 control series) aimed at ensuring the platform meets both WCAG accessibility standards and modern search engine best practices. For a UK-focused compliance product where trust and discoverability matter, correct semantic markup is a baseline requirement — not an afterthought.

Small structural changes like this one are low-risk and high-value: a single tag replacement that costs nothing in visual fidelity but pays dividends in accessibility compliance and indexing quality.