05. main Element

Introduction

The <main> element represents the dominant content of the document. It should contain the main content unique to the page, excluding headers, footers, navigation, and sidebars. There should be only one <main> element per page, and it helps screen readers identify the primary content area.

Basic Usage

<body>
    <header>Header</header>
    <main>
        <h1>Main Content</h1>
        <p>Primary content goes here.</p>
    </main>
    <footer>Footer</footer>
</body>

Common Structure

<body>
    <header>Site header</header>
    <nav>Navigation</nav>
    <main>
        <article>
            <h1>Article Title</h1>
            <p>Article content...</p>
        </article>
    </main>
    <aside>Sidebar</aside>
    <footer>Site footer</footer>
</body>

One main Per Page

Only use one main element:

<!-- Good: Single main -->
<body>
    <main>Main content</main>
</body>

<!-- Avoid: Multiple main elements -->
<body>
    <main>Content 1</main>
    <main>Content 2</main>
</body>

Accessibility

Screen readers can jump to main content:

<main>
    <h1>Page Title</h1>
    <p>Content that screen readers can navigate to directly.</p>
</main>

Best Practices

Exclude Repeated Content

Don’t include headers, footers, or navigation:

<!-- Good: Only unique content -->
<main>
    <article>
        <h1>Article Title</h1>
        <p>Unique article content</p>
    </article>
</main>

<!-- Avoid: Including repeated content -->
<main>
    <header>Repeated header</header>
    <article>Content</article>
</main>

References

MDN Web Docs - main element