The HTML <main> tag

Definition and usage

<main> The tag defines the main content of the document.

<main> The content of the element should be unique for the document. It should not contain content that repeats in multiple documents, such as sidebars, navigation links, copyright information, website logos, and search forms, etc.

Note:There cannot be multiple <main> element. <main> element cannot be <article>And<aside>And<footer>And<header> Or <nav> Descendant elements of the element.

Instance

Example 1

Specify the main content of the document:

<main>
  <h1>Most Popular Browsers</h1>
  <p>Chrome, Firefox, and Edge are the most commonly used browsers today.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015......&</p>
  </article>
</main>

Try It Yourself

Example 2

Use CSS to set <main> Element style:

<html>
<head>
<style>
main {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
main > h1, p, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<main>
  <h1>Most Popular Browsers</h1>
  <p>Chrome, Firefox, and Edge are the most commonly used browsers today.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015......&</p>
  </article>
</main>
</body>
</html>

Try It Yourself

Global Attributes

<main> The tag also supports Global Attributes in HTML.

Event Attributes

<main> The tag also supports Event Attributes in HTML.

Browser Support

The numbers in the table indicate the first browser version to fully support this tag.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 12.0 21.0 7.0 16.0