<main>

The <main> tag is used to define the main content of a page, that is, the content that is directly related to its main subject.

Structure and syntax of the <main> tag

Basic structure and syntax

The <main> tag is a container tag used to enclose the main content. It has:

• An opening tag <main>;
• A closing tag </main>.

Its structure is simple:

<main>
    <!-- Content -->
</main>

Usage example

Here is a simple example to better understand its use:

<main>
    <h1>Welcome to my site!</h1>
    <article>
        <h2>Article 1</h2>
        <p>Content of the article.</p>
    </article>
</main>

In this example, the <main> tag encloses all the main content, such as the main title and the articles.

Attributes

The <main> tag does not have specific attributes, but it can use global HTML attributes such as id, class, and style.

Best practices

To optimize the use of the <main> tag, follow these recommendations:

• Use only one <main> tag per page, as it should represent the unique main content.
• Avoid including elements like headers (<header>), footers (<footer>), or navigation bars (<nav>) within <main>.

Differences with other similar tags

• <section>: Used to group thematic content, it does not replace the role of the <main> tag. However, you can add as many <section> tags as you want within a <main> tag.
• <article>: Used for autonomous content that can be redistributed (such as RSS feeds), like blog articles.
• <div>: A simple container without a specific role, unlike <main>.

Browser compatibility

The <main> tag is compatible with all modern browsers.