The <main> element wraps the primary content of the page — the content unique to that page, excluding repeated elements like headers, navigation, and footers.
Syntax & Example
<body>
<header>...</header>
<main>
<h1>Data Science Course</h1>
<p>Learn Python, SQL, ML and real-world projects.</p>
</main>
<footer>...</footer>
</body>Exactly One Per Page
Unlike <header>, <nav>, and <section>, there should be exactly one visible <main> element per page, and it should not be nested inside <header>, <footer>, <article>, or <aside>.
Accessibility: The "Skip to Content" Landmark
<main> gets an implicit main ARIA landmark role, which is exactly what powers "skip to main content" links and lets screen reader/keyboard users jump straight past repeated header and navigation content on every single page:
<a href="#main-content" class="skip-link">Skip to main content</a>
...
<main id="main-content">
...
</main>Without a proper <main> landmark, this critical accessibility pattern doesn't work correctly.
Common Mistakes
- Using multiple
<main>elements on one visible page — invalid; screen readers expect exactly one - Forgetting
<main>entirely and just using a generic<div>for primary content — loses the landmark and the skip-link benefit - Nesting
<main>inside<article>or other sectioning elements
Interview Relevance
"What's the accessibility benefit of the main element specifically?" — the skip-to-content landmark answer above is exactly what's being tested.
Practice Question
Add a <main> element and a working "skip to main content" link to a page that currently uses a <div id="content"> instead.
