HTML <main> Tag

The HTML <main> tag is used to define the main content of a document. It is intended to contain the content that is unique to the page and directly relates to the central topic or purpose of the document. The <main> tag helps improve accessibility by providing a clear way for assistive technologies to identify the primary content of the page.

The <main> tag should only appear once in a document and should not include repeated elements such as navigation links, sidebars, or footers.

Basic Syntax of HTML <main> Tag

The basic structure of the <main> tag is:

</>
Copy
<main>
    Main content of the document goes here.
</main>

The <main> tag acts as a semantic landmark for the primary content of the page.

Attributes of HTML <main> Tag

  • Global Attributes: The <main> tag supports all global attributes, such as id, class, and style.
  • Event Attributes: It also supports event attributes like onclick, onmouseover, and onfocus.

Basic Example of HTML <main> Tag

Here’s a simple example of using the <main> tag in a webpage:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <header>
            <h1>Welcome to My Website</h1>
        </header>

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

        <main>
            <h2>About Us</h2>
            <p>We are a team of professionals dedicated to creating beautiful web experiences.</p>
        </main>

        <footer>
            <p>Copyright © 2024</p>
        </footer>
    </body>
</html>
Basic Example of HTML <main> Tag

Explanation: The <main> tag contains the unique content of the page, excluding the navigation, header, and footer.

Using the <main> Tag for Accessibility

The <main> tag improves accessibility by helping screen readers and assistive technologies identify the primary content of the page. For example:

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
    <body>
        <header>
            <h1>My Blog</h1>
        </header>

        <main>
            <article>
                <h2>How to Use the HTML <main> Tag</h2>
                <p>The <main> tag defines the primary content of the page.</p>
            </article>
        </main>

        <footer>
            <p>Thank you for visiting!</p>
        </footer>
    </body>
</html>
Using the <main> Tag for Accessibility

Explanation: Screen readers can quickly navigate to the <main> tag to skip repetitive navigation and footer content.

Styling the <main> Tag with CSS

You can style the <main> tag to make it visually distinct:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            main {
                background-color: #f9f9f9;
                padding: 20px;
                border: 1px solid #ddd;
                margin: 20px;
            }

            h2 {
                color: #007BFF;
            }

            p {
                font-size: 16px;
                line-height: 1.5;
            }
        </style>
    </head>
    <body>
        <main>
            <h2>Main Content</h2>
            <p>This is the central content of the page.</p>
        </main>
    </body>
</html>
Styling the <main> Tag with CSS

Result: The <main> section is styled with a light background, padding, and a border to visually highlight it as the primary content area.

Practical Applications of the <main> Tag

  • Primary Content Display: Define the main content of a webpage for clarity and accessibility.
  • SEO Optimization: Use the <main> tag to improve semantic structure and search engine rankings.
  • Screen Reader Navigation: Assistive technologies can quickly locate the primary content using the <main> tag.
  • Cleaner HTML Structure: Separate the central content from headers, sidebars, and footers for improved readability.