Problem Statement
How many <main> elements should a page have?
Explanation
A page should have only one visible main element. The main element represents the dominant content of the body. It excludes content that is repeated across pages like headers, footers, navigation, sidebars, or search forms. The main content should be unique to that page. If you have multiple main elements, only one should be visible at a time, with others hidden using the hidden attribute. This helps assistive technologies skip to the main content quickly using skip navigation. The main element should not be a child of article, aside, footer, header, or nav. Using main properly improves accessibility and helps search engines identify the primary content of your page.
Code Solution
SolutionRead Only
<!-- Correct usage: one main -->
<!DOCTYPE html>
<html>
<head><title>Page Title</title></head>
<body>
<header>
<h1>Site Header</h1>
<nav>Navigation</nav>
</header>
<main>
<h2>Main Content</h2>
<p>This is the primary content...</p>
<article>
<h3>Article Title</h3>
<p>Article content...</p>
</article>
</main>
<aside>Sidebar content</aside>
<footer>Footer content</footer>
</body>
</html>
<!-- Skip to main content link -->
<a href="#main-content" class="skip-link">
Skip to main content
</a>
<header>Header...</header>
<nav>Navigation...</nav>
<main id="main-content">
<!-- Main content here -->
</main>Practice Sets
This question appears in the following practice sets:
