HTML · Semantic Structure

<main> Element

Represent the primary unique content of a document

Find videos you like?

Save to resource drawer for future reference!

Single <main> Per Page

The page’s unique content goes here

Basic <main>

Highlight the most important content

Frontend

<main class="page-main">
  <h2>Latest Tutorials</h2>
  <article>
    <h3>Semantic HTML Deep Dive</h3>
    <p>Learn why semantics are crucial for accessibility...</p>
  </article>
</main>

Live Preview

Loading preview...

Rule

Only one <main> per page for proper landmark navigation.

Page Layout Diagram

Header / Main / Footer

Visualizing the main element in context

Frontend

<div class='diagram'><header>Header</header><main>Main</main><footer>Footer</footer></div>

Live Preview

Loading preview...

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice