The HTML <main> element represents the primary content of a webpage. It contains information that is directly related to the main purpose of the page, such as an article, tutorial, product details, or other important content.

The <main> element is a semantic HTML element that helps developers organize webpage content clearly. It also helps assistive technologies identify the main content, making websites easier to navigate.

What Is the HTML Main Element?

The <main> element identifies the central content of a webpage, excluding content that is repeated across multiple pages, such as the main navigation menu, website header, and footer.

A webpage should generally contain only one visible <main> element at a time.

Here is the basic syntax:

<main>
    <h1>HTML Tutorial</h1>
    <p>Learn HTML step by step.</p>
</main>

In this example, the heading and paragraph represent the primary content of the webpage.

HTML Main Content Example

The following example demonstrates how to use the <main> element in a complete HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>HTML Main Content</title>

    <style>
        main {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>

    <header>
        <h1>Web4Learners</h1>
    </header>

    <nav aria-label="Main navigation">
        <a href="/">Home</a>
        <a href="/html/">HTML</a>
        <a href="/css/">CSS</a>
    </nav>

    <main>
        <h2>Learn HTML</h2>
        <p>
            HTML is used to structure content
            on web pages.
        </p>

        <h2>Why Learn HTML?</h2>
        <p>
            HTML is a fundamental technology
            for building websites.
        </p>
    </main>

    <footer>
        <p>Copyright 2026 Web4Learners</p>
    </footer>

</body>
</html>

In this example, the <header> contains the website name, and <nav> provides navigation links. The <main> element contains the primary educational content, while <footer> displays copyright information.

The CSS centers the main content and limits its width for better readability.

What Can the Main Element Contain?

The <main> element can contain different types of primary webpage content, including:

• Headings and paragraphs: Introduce and explain the main topic.
• Articles: Present tutorials, news, or other independent content.
• Images and videos: Provide relevant visual information.
• Lists and tables: Organize information clearly.
• Forms: Allow users to submit information related to the page’s purpose.

The content should focus on the main purpose of the webpage.

HTML Main vs Other Semantic Elements

Element	Purpose
<header>	Contains introductory content
<nav>	Groups major navigation links
<main>	Identifies the primary page content
<article>	Represents independent content
<aside>	Contains supplementary information
<footer>	Contains footer information

Learn more about HTML page layout to understand how these elements work together to structure a webpage.

HTML Main Element Best Practices

Use one visible <main> element per page to identify the primary content. Do not place repeated site-wide navigation or footer content inside it. The <main> element should not be used as a general container when another element better describes the content.

Frequently Asked Questions

Can a webpage have multiple main elements?

A document should have only one visible <main> element at a time. Additional <main> elements should not be used to represent separate page sections.

Is the main element semantic HTML?

Yes. It identifies the primary content and communicates the webpage’s structure to browsers and assistive technologies.

Is the main element required in HTML?

No. A webpage can function without it, but using <main> provides a clearer semantic structure and improves navigation for assistive technology users.

What is the difference between <main> and <div>?

The <main> element identifies the primary content of a page, while <div> is a general-purpose container without a specific semantic meaning.