HTML <main> Tag

The HTML <main> tag is a semantic element that defines the primary content of a webpage. Introduced in HTML5, it is used to enclose the dominant content that is unique to the page, excluding repeated elements like headers, footers, navigation bars, and sidebars. 

Syntax of the <main> Tag

html
<main>
    <!-- Main content goes here -->
</main>

The <main> tag can include text, images, articles, sections, and other HTML elements that make up the primary content of the webpage.

Attributes of the <main>Tag

The <main> tag supports global attributes, which allow developers to style, identify, and enhance the element’s functionality. Below are the most common attributes associated with the <main> tag:

AttributeDescription
idAssigns a unique identifier to the <main> element for CSS styling or JavaScript.
classAssigns one or more class names for styling or JavaScript functionality.
styleApplies inline CSS to style the <main> element.
roleCan be set to main for additional clarity for screen readers.
aria-*Allows for additional ARIA (Accessible Rich Internet Applications) attributes for better accessibility.

Note: The <main> tag itself does not have unique attributes, but it supports global attributes that enhance its use in various contexts.

Examples of HTML <main> Tag

Example 1: Simple Use of <main> Tag for Primary Content

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Webpage</title>
</head>
<body>
    <header>
        <h1>Website Header</h1>
    </header>

    <main>
        <h2>Main Content Area</h2>
        <p>This is the primary content of the webpage.</p>
    </main>

    <footer>
        <p>Website Footer</p>
    </footer>
</body>
</html>

In this example, the <main> tag is used to enclose the primary content of the webpage, separating it from the header and footer.

Example 2: Using the <main> Tag with Multiple Sections.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Structured Webpage</title>
</head>
<body>
    <header>
        <h1>My Blog</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>

    <main>
        <section>
            <h2>Latest Article</h2>
            <p>This section contains the latest blog post.</p>
        </section>

        <section>
            <h2>Popular Posts</h2>
            <p>This section features the most popular posts on the blog.</p>
        </section>
    </main>

    <footer>
        <p>Blog Footer</p>
    </footer>
</body>
</html>

Here, the <main> tag wraps multiple sections that represent the primary content of the blog, helping browsers and screen readers easily identify the main part of the page.

FAQs About HTML <main>Tag

Q1: What is the purpose of the HTML <main> tag?
A: The <main> tag is used to define the primary content of the webpage, helping improve accessibility and SEO by distinguishing the most important content from repeated elements like headers, footers, and navigation bars.

Q2: Can the <main> tag be used multiple times on a single webpage?
A: No, the <main> tag should only appear once per webpage. It is designed to encapsulate the central content of the page, and multiple uses could confuse browsers and screen readers.

Q3: Does the <main> tag affect SEO?
A: Yes, using the <main> tag properly improves SEO by signaling to search engines which content is most important on the webpage. This helps them prioritize indexing the main content over repeated elements.

Q4: Is the <main> tag supported in all modern browsers?
A: Yes, the <main> tag is supported in all major modern browsers, including Chrome, Firefox, Safari, Edge, and Opera.

Q5: Can I nest the <main> tag inside other elements like <header> or <footer>?
A: No, the <main> tag should not be nested within <header>, <footer> or <nav> elements. It is meant to stand alone and contain the primary content of the page.

tools

HTML

Related Articles