HTML Main (<main>)

« Prev Next »

The <main> tag is an HTML5 semantic element that is intended to define the main content of a webpage.

This is unique content that only appears on the current page and is not duplicated on other pages (headers, sidebars, footers, etc. ).

Syntax

<main>
  <!-- Primary content goes here -->
</main>

html-main

Purpose of <main>

  • The content that defines the main subject of the page.
  • Excludes duplicated content such as <nav>, <footer>, <header>, and sidebars.
  • Aids screen readers and search engines in identifying the main subject.

Example

<!DOCTYPE html>
<html>
<head>
  <title>My Portfolio</title>
</head>
<body>

<header>
  <h1>My Portfolio</h1>
</header>

<main>
  <h2>About Me</h2>
  <p>I am a web developer passionate about clean and user-friendly interfaces.</p>

  <h2>Projects</h2>
  <ul>
    <li>Portfolio Website</li>
    <li>Task Manager App</li>
    <li>Weather Forecast Tool</li>
  </ul>
</main>

<footer>
  <p>&copy; 2025 Praveen. All rights reserved.</p>
</footer>

</body>
</html>
Run ›

Do & Don’t

Do Don’t
Use <main> for blog posts, product pages, etc. Use <main> in email templates
Include only unique, core page content Place <header> or <footer> inside it
Use inside <body> Use more than one <main> tag
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.