HTML Main Content Tutorial - Using the Main Element

Understanding HTML Main Content

The HTML <main> element identifies the primary content of a webpage.

It contains the content that is central to the purpose of that particular page, while repeated site-wide content such as primary navigation, branding, and common footer information generally belongs outside it.

The <main> Element

The <main> element represents the dominant content of the document. It identifies the part of the page that directly relates to the page's main topic or purpose.

<main>
  <h1>HTML Tutorial</h1>
  <p>Learn how HTML is used to structure webpage content.</p>
</main>

The content inside <main> should be specific to the current page rather than content repeated throughout the website.

What Belongs in <main>

The <main> element should contain the content visitors came to the page to read, view, use, or interact with.

The main article or tutorial.
Product or service information specific to the page.
Forms that are the primary purpose of the page.
Sections that make up the page's main subject.
Articles, images, tables, examples, or other content central to the page.

A tutorial page, for example, might place its lesson content, examples, and related sections inside <main>.

What Stays Outside <main>

Content repeated across many pages usually belongs outside <main> because it is part of the site's overall structure rather than the unique purpose of the current page.

Site-wide headers and branding.
Primary website navigation.
Repeated sidebars that are not part of the page's main subject.
Site-wide footer information.

<header>
  ...
</header>

<nav>
  ...
</nav>

<main>
  ...
</main>

<footer>
  ...
</footer>

This separation helps make the main purpose of the page easier to identify.

<main> in Page Structure

The <main> element commonly appears between a page's introductory or navigation content and its footer.

<body>

  <header>
    <h1>Example Website</h1>
  </header>

  <nav>
    ...
  </nav>

  <main>
    <h2>Page Content</h2>
    <p>The primary content of the page...</p>
  </main>

  <footer>
    <p>Footer information...</p>
  </footer>

</body>

The exact visual arrangement can change with CSS, but the semantic purpose of <main> remains the same.

<main> with Sections and Articles

The <main> element can contain other semantic elements such as <section>, <article>, and <aside> when they form part of the primary content.

<main>

  <article>
    <h1>Learning Semantic HTML</h1>

    <section>
      <h2>Why Semantics Matter</h2>
      <p>Section content...</p>
    </section>
  </article>

  <aside>
    <h2>Related Information</h2>
    <p>Supplementary content...</p>
  </aside>

</main>

An <aside> can appear inside <main> when its supplementary content is related to the page's primary content.

<main> as a Landmark

The <main> element can create a main landmark that assistive technologies use to identify the primary content area of a webpage.

This can help people using screen readers or other assistive technology move directly to the page's main content without repeatedly navigating through site-wide headers, menus, and other repeated content.

Multiple <main> Elements

A document should generally have one visible <main> element representing its primary content. Using several visible main regions would make it unclear which content is actually dominant.

<main>
  <h1>Primary Page Content</h1>
  <p>Content...</p>
</main>

For normal webpages, think of <main> as the single primary content region rather than as another general-purpose container.

<main> vs <div>

The <main> and <div> elements can both contain other elements, but they do not have the same meaning. <main> identifies the primary content of the page, while <div> is a generic container with no built-in semantic meaning.

<main>
  <h1>HTML Tutorial</h1>
  <p>Primary tutorial content...</p>
</main>

Use <main> when the container truly represents the dominant content of the page. Use <div> when a generic wrapper is needed for grouping or styling and no more meaningful element applies.

Main Content Example

The following example separates repeated website content from the unique main content of the page. Experiment by moving elements inside or outside <main> and consider whether each item belongs to the page's primary purpose.

Play in Editor

Main Content Best Practices

Use <main> for the content that is central to the purpose of the current webpage.
Keep repeated site-wide headers, primary navigation, and common footer content outside <main>.
Use one visible main content region for a typical webpage.
Place related sections, articles, and supplementary content inside <main> when they are part of the page's primary content.
Do not use <main> as a generic wrapper simply because it is convenient for styling.
Use CSS to control the visual layout without changing the semantic purpose of the element.

Summary

The HTML <main> element identifies the dominant content of a webpage. It should contain content specific to the page's main purpose while repeated site-wide content generally remains outside it.

Using <main> creates clearer semantic structure and can provide an important landmark for assistive technologies, helping distinguish the primary content from the surrounding website interface.