Search engines use semantic HTML elements — <main>, <nav>, <article>, <section>, <header>, <footer> — to identify the primary content region, navigation landmarks, and page sections. A layout built entirely from <div> elements provides no structural signal; crawlers treat every block of text as equally weighted. WCAG 2.2 SC 1.3.1 (Info and Relationships) requires that structure conveyed visually is also expressed in the markup — missing <main> means keyboard users and screen reader users cannot jump directly to the main content, breaking a core navigation pattern.
Medium because semantic HTML absence degrades both crawler content weighting and assistive technology landmark navigation, but unlike broken links or missing meta tags, it does not block indexing outright.
Replace generic <div> wrappers in your root layout with the appropriate semantic elements. At minimum, your layout should include <header>, <main>, and <footer>:
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<header>
<nav aria-label="Primary navigation">...</nav>
</header>
<main>{children}</main>
<footer>...</footer>
</body>
</html>
)
}
Use <article> for self-contained content (blog posts, product cards), <section> for thematic groupings with headings, and <aside> for supplementary content like sidebars. Shadcn/ui components render <div> by default — replace wrapper divs manually at the layout level rather than inside component internals.
ID: seo-fundamentals.content-structure.semantic-html
Severity: medium
What to look for: Check page layouts and components for semantic HTML elements: <nav>, <main>, <article>, <section>, <header>, <footer>, <aside>. Look at whether the page structure uses these meaningfully or relies entirely on <div> elements.
Pass criteria: Enumerate all semantic HTML elements used in the root layout and page templates: count occurrences of <nav>, <main>, <article>, <section>, <header>, <footer>, <aside>. The project must use at least <main> to wrap page content, plus at least 1 other semantic element. A minimum of 2 distinct semantic element types is required.
Fail criteria: The page structure relies entirely on <div> elements with no semantic HTML, or <main> is missing from the page layout. Report: "Found X distinct semantic element types: [list]. Missing: <main>."
Skip (N/A) when: Never — semantic HTML applies to all web pages.
Detail on fail: Describe what's missing. Example: "Root layout uses only <div> wrappers. No <main>, <nav>, <header>, or <footer> elements found" or "<nav> and <footer> present but <main> element missing — page content wrapped in plain <div>"
Remediation: Semantic HTML helps search engines understand the structure and purpose of your content. Replace generic <div> wrappers with appropriate semantic elements:
<header><nav>...</nav></header>
<main>{children}</main>
<footer>...</footer>
At minimum, wrap your page's primary content in a <main> element and your navigation in a <nav> element.