The HTML <main> element represents the primary content of a web page. It contains the content that is directly related to the main purpose of the document.

Key Point: The <main> element identifies the main content of the page. Repeated content such as major navigation, site headers, and footers generally belongs outside the main content area.

1. What is the main Element?

The <main> element is a semantic HTML element used to identify the dominant content of a document.

<main>

    <h1>HTML Tutorial</h1>

    <p>
        Learn HTML from basic to advanced concepts.
    </p>

</main>

Output

HTML Tutorial

Learn HTML from basic to advanced concepts.

2. Purpose of the main Element

The <main> element identifies the central content of the document.

This content can include:

Course content
Blog articles
Product information
Documentation
Search results
Primary application content

3. Basic main Example

<main>

    <h1>Welcome to My Website</h1>

    <p>
        This is the main content of the page.
    </p>

</main>

4. main with Section

The main content can contain multiple thematic sections.

<main>

    <section>

        <h2>HTML Basics</h2>

        <p>
            Learn the fundamentals of HTML.
        </p>

    </section>

    <section>

        <h2>HTML Forms</h2>

        <p>
            Learn how to create HTML forms.
        </p>

    </section>

</main>

5. main with Article

Articles can be placed inside the main content area.

<main>

    <article>

        <h2>Introduction to HTML</h2>

        <p>
            HTML provides the structure of a web page.
        </p>

    </article>

    <article>

        <h2>HTML Forms</h2>

        <p>
            HTML forms collect information from users.
        </p>

    </article>

</main>

6. main with Aside

The main content can contain an <aside> for related or secondary information.

<main>

    <section>

        <h2>HTML Tutorial</h2>

        <p>
            Learn HTML step by step.
        </p>

    </section>

    <aside>

        <h3>Related Topics</h3>

        <p>
            CSS and JavaScript
        </p>

    </aside>

</main>

7. main with Header

A section inside main can have its own header.

<main>

    <section>

        <header>

            <h2>HTML Forms</h2>

            <p>
                Learn how to create forms.
            </p>

        </header>

        <form>
            ...
        </form>

    </section>

</main>

8. main with Footer

A footer can belong to an article or section inside main.

<main>

    <article>

        <header>
            <h2>HTML Basics</h2>
        </header>

        <p>
            Learn the basic HTML elements.
        </p>

        <footer>
            Updated October 2026
        </footer>

    </article>

</main>

9. Complete Page Structure

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>
        Learning Portal
    </title>

</head>

<body>

    <header>

        <h1>
            Learning Portal
        </h1>

    </header>

    <nav>

        <a href="#">Home</a>
        <a href="#">Courses</a>
        <a href="#">Contact</a>

    </nav>

    <main>

        <section>

            <h2>
                HTML Course
            </h2>

            <p>
                Learn HTML from basic to advanced concepts.
            </p>

        </section>

    </main>

    <footer>

        <p>
            © 2026 Learning Portal
        </p>

    </footer>

</body>

</html>

10. main vs div

Element	Purpose
`<main>`	Represents the primary content of the page.
`<div>`	Generic container without a specific semantic meaning.

11. main vs section

Element	Purpose
`<main>`	Identifies the primary content of the document.
`<section>`	Groups related content within a document.

12. main and Accessibility

Using the <main> element gives the document a clear semantic landmark for its primary content.

This can help users of assistive technologies understand where the main content of the page begins.

<main>

    <h1>HTML Tutorial</h1>

    <p>
        Welcome to the HTML course.
    </p>

</main>

13. main and Navigation

Major page navigation is generally outside the main content area.

<header>
    Website Header
</header>

<nav>
    <a href="#">Home</a>
    <a href="#">Courses</a>
    <a href="#">Contact</a>
</nav>

<main>
    Main Content
</main>

14. main for a Course Page

A course page can use main to contain the primary learning content.

<main>

    <header>

        <h1>
            HTML Course
        </h1>

        <p>
            Learn HTML from scratch.
        </p>

    </header>

    <section>

        <h2>
            HTML Basics
        </h2>

        <p>
            Learn elements, attributes and document structure.
        </p>

    </section>

    <section>

        <h2>
            HTML Forms
        </h2>

        <p>
            Learn how to create and validate forms.
        </p>

    </section>

</main>

15. main for a Blog Page

<main>

    <article>

        <header>

            <h1>
                Introduction to HTML
            </h1>

        </header>

        <p>
            HTML is used to structure web pages.
        </p>

    </article>

</main>

16. main with Multiple Articles

A blog or news page can place multiple independent articles inside main.

<main>

    <article>

        <h2>
            HTML Basics
        </h2>

        <p>
            Learn the fundamentals of HTML.
        </p>

    </article>

    <article>

        <h2>
            HTML Forms
        </h2>

        <p>
            Learn how HTML forms work.
        </p>

    </article>

    <article>

        <h2>
            Semantic HTML
        </h2>

        <p>
            Learn how to create meaningful HTML structures.
        </p>

    </article>

</main>

17. Multiple Main Elements

A document should not normally contain multiple visible main content areas at the same time. The main element is intended to identify the primary content of the document.

Best Practice: Use one primary <main> element for the page's main content.

18. main Element with ID

The id attribute can be used when a page needs an identifiable main content container.

<main id="main-content">

    <h1>
        HTML Tutorial
    </h1>

    <p>
        Learn HTML step by step.
    </p>

</main>

19. main Element with CSS

CSS can be used to control the visual appearance of the main content.

<main class="main-content">

    <h1>
        HTML Course
    </h1>

</main>

<style>

    .main-content {
        max-width: 1000px;
        margin: 0 auto;
        padding: 30px;
    }

</style>

20. Common Mistakes

Mistake 1: Using main for every container

The <main> element should represent the primary content of the page, not every content block.

Mistake 2: Putting repeated navigation inside main

Major site navigation normally belongs outside the main content area.

Mistake 3: Using div instead of main for the page's primary content

<div id="main-content">

    Main Page Content

</div>

When the container represents the primary content of the document, the semantic <main> element provides clearer structure.

21. Best Practices

Use <main> for the primary content of the page.
Keep major repeated navigation outside the main content.
Use sections and articles inside main when appropriate.
Give the main area a clear and meaningful structure.
Avoid using multiple simultaneous main content regions.
Use semantic elements according to their actual purpose.

22. Practice Example

Create a course page with a header, navigation, main content, two sections, and a footer.

<header>

    <h1>
        HTML Learning Portal
    </h1>

</header>

<nav>

    <a href="#">Home</a>
    <a href="#">Courses</a>
    <a href="#">Contact</a>

</nav>

<main>

    <section>

        <h2>
            HTML Basics
        </h2>

        <p>
            Learn HTML fundamentals.
        </p>

    </section>

    <section>

        <h2>
            HTML Forms
        </h2>

        <p>
            Learn how to create HTML forms.
        </p>

    </section>

</main>

<footer>

    <p>
        © 2026 HTML Learning Portal
    </p>

</footer>

Summary

The HTML <main> element represents the primary content of a web page. It can contain sections, articles, headers, and related content that form the main purpose of the document. Use it to create a clear semantic structure and keep major repeated navigation outside the main content area.

← Previous: Nav Next: Section →