<main> : Main element

by

Introduction

The <main> element is an HTML5 element that is used to represent the main content of an HTML document. It is typically used to enclose the primary content of the page, excluding headers, footers, sidebars, and other content that is not directly related to the main topic or purpose of the page.

Here’s a simple example of how the <main> element is used in an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Element Example</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>
    <nav>
        <!-- Navigation links go here -->
    </nav>
    <main>
        <article>
            <h2>Article Title</h2>
            <p>This is the main content of the article.</p>
            <!-- More article content goes here -->
        </article>
        <section>
            <h2>Another Section</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque, suscipit et ratione neque fugiat nihil, optio unde ullam pariatur sunt quibusdam saepe veritatis voluptates at, magni exercitationem dolores voluptatum quaerat..</p>
        </section>
    </main>
    <aside>
        <!-- Sidebar content goes here -->
    </aside>
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>

Output :

In this example:

  • The <header>, <nav>, <aside>, and <footer> elements represent the header, navigation, sidebar, and footer of the page, respectively.
  • The <main> element contains the primary content of the page, such as articles and sections.

The use of <main> helps in making the HTML structure more semantically meaningful. It also has implications for accessibility, as screen readers and other assistive technologies can use the <main> element to identify and navigate to the main content of a page.

It’s important to note that there should be only one <main> element in a document, and it should not be nested within other <main> elements. The <main> element is designed to be a direct child of the <body>

Leave a Comment