<main>

The <main> element represents the dominant content of the document body. There should be only one <main> per page, and it should not be nested inside <article>, <aside>, <header>, <footer>, or <nav>.

Important: Assistive technologies implicitly add the role="main", so it's best not to combine it with other roles like role="region" or role="group".

Basic Usage

<main>
  <h2>Hello World</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
</main>

With Header

<main>
  <header>
    <nav>
      <h2>logo</h2>
    
      <h3>tagline</h3>
    
      <ul>
        <li><a href="#!">Log out</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
  </main>
</main>

With Footer

<main>
  <main>
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
  </main>
  <footer>
    <nav>
      <p>Copyright</p>
    
      <ul>
        <li><a href="#!">Contact Us</a></li>
      </ul>
    </nav>
  </footer>
</main>

With Header + Footer

<main>
  <header>
    <nav>
      <h2>logo</h2>
    
      <h3>tagline</h3>
    
      <ul>
        <li><a href="#!">Log out</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
  </main>
  <footer>
    <nav>
      <p>Copyright</p>
    
      <ul>
        <li><a href="#!">Contact Us</a></li>
      </ul>
    </nav>
  </footer>
</main>

With Article

<main>
  <article>
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
  </article>
</main>

With Header + Article

<main>
  <header>
    <nav>
      <h2>logo</h2>
    
      <h3>tagline</h3>
    
      <ul>
        <li><a href="#!">Log out</a></li>
      </ul>
    </nav>
  </header>
  <article>
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
  </article>
</main>

With Article + Footer

<main>
  <article>
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
  </article>
  <footer>
    <nav>
      <p>Copyright</p>
    
      <ul>
        <li><a href="#!">Contact Us</a></li>
      </ul>
    </nav>
  </footer>
</main>

Complete Layout

<main>
  <header>
    <nav>
      <h2>logo</h2>
    
      <h3>tagline</h3>
    
      <ul>
        <li><a href="#!">Log out</a></li>
      </ul>
    </nav>
  </header>
  <article>
    <h2>Hello World</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.</p>
  </article>
  <footer>
    <nav>
      <p>Copyright</p>
    
      <ul>
        <li><a href="#!">Contact Us</a></li>
      </ul>
    </nav>
  </footer>
</main>