<main> Tag in HTML

The <main> tag is used to define the main content of a document. This tag represents the dominant content of the <body> section, excluding elements like navigation, footer, and header. It helps screen readers and other assistive technologies understand and focus on the core content of the webpage.

Key Points on <main> Tag:

Contains the primary content of the document.
Should be unique and should not contain content repeated across the website (like headers or footers).
It should not be used for sidebars or navigational links.
It aids accessibility by signaling the main content of the page.

Syntax of <main> Tag:

Syntax Example

<main>...</main>

Examples of <main> Tag Usage:

1. Simple Main Content Section

Code Example

<main>
            <h1>Welcome to Our Website</h1>
            <p>This is the main content area of the page. Here, you'll find the most important information about our services.</p>
        </main>

Output:

Welcome to Our Website

This is the main content area of the page. Here, you'll find the most important information about our services.

2. Main Content with Multiple Sections

Code Example

<main>
            <section>
                <h1>About Us</h1>
                <p>Learn more about our company and what we do.</p>
            </section>
            <section>
                <h1>Our Services</h1>
                <p>Explore the various services we offer to our clients.</p>
            </section>
        </main>

Output:

About Us

Learn more about our company and what we do.

Our Services

Explore the various services we offer to our clients.

Attributes of <main> Tag:

None: The <main> tag itself does not have any specific attributes.

The <main> tag should only be used for the main content of the page. It helps search engines and accessibility tools understand the document's layout by distinguishing the primary content from other elements.