About This HTML Issue
The <main> element serves a very specific purpose in HTML: it identifies the primary content of the document’s <body> — the content that is directly related to or expands upon the central topic of the page. Because of this document-level role, the HTML specification restricts where <main> can appear. It must not be a descendant of <article>, <aside>, <header>, <footer>, or <nav>. These are all sectioning or structural elements that represent subsets of the page, and nesting <main> inside them creates a semantic contradiction — you’d be saying “the main content of the whole page lives inside this one sub-section.”
The <article> element, by contrast, represents a self-contained composition — something like a blog post, a news story, a forum post, or a comment. Articles are meant to be independently distributable or reusable. They logically live within the main content area of a page, not around it.
This distinction matters for accessibility. Screen readers and assistive technologies use the <main> landmark to let users skip directly to the primary content of a page. When <main> is incorrectly nested inside an <article>, assistive technologies may misinterpret the document structure, making navigation confusing or unreliable. Search engines also rely on semantic HTML to understand page structure, so incorrect nesting can affect how your content is indexed.
To fix this issue, move the <main> element out of the <article> and make it a direct child of <body> (or of a non-sectioning element like <div>). Then place your <article> elements inside <main>. Also remember that only one visible <main> element should exist per page (additional <main> elements must have the hidden attribute).
Examples
Incorrect: <main> nested inside <article>
This triggers the validation error because <main> is a descendant of <article>:
<article>
<main>
<h1>My Blog Post</h1>
<p>This is the post content.</p>
</main>
</article>
Incorrect: <main> deeply nested inside <article>
The error also triggers when <main> is an indirect descendant — it doesn’t need to be a direct child:
<article>
<div class="wrapper">
<main>
<h1>My Blog Post</h1>
<p>This is the post content.</p>
</main>
</div>
</article>
Correct: <article> inside <main>
Invert the relationship so that <main> wraps the article content:
<main>
<article>
<h1>My Blog Post</h1>
<p>This is the post content.</p>
</article>
</main>
Correct: Multiple articles inside <main>
A typical page layout with <main> containing several articles alongside other content:
<main>
<h1>Latest Posts</h1>
<article>
<h2>First Post</h2>
<p>Content of the first post.</p>
</article>
<article>
<h2>Second Post</h2>
<p>Content of the second post.</p>
</article>
</main>Correct: Full document structure
A complete valid document showing the proper placement of <main> as a direct child of <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog - Latest Posts</title>
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<h1>Latest Posts</h1>
<article>
<h2>My Blog Post</h2>
<p>This is the post content.</p>
</article>
</main>
<footer>
<p>© 2024 My Blog</p>
</footer>
</body>
</html>
The key rule to remember: <main> represents the page’s primary content and sits at the top of your content hierarchy. Sectioning elements like <article>, <aside>, and <nav> are components within that hierarchy and belong inside or alongside <main> — never around it.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.