19. What is the `<main>` element in HTML and how should it be used?

What is the `<main>` Element in HTML?

The <main> element in HTML is a semantic element that is used to encapsulate the dominant content of the <body> of a document. It should contain content that is unique to the document and is directly related to or expands upon the document's central topic.

Usage Guidelines:

Uniqueness: The <main> element should be used only once per document, as it represents the primary content.
Content: It should not include content that is repeated across documents, like sidebars, navigation links, or footers.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <header>
        <h1>Website Header</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    <main>
        <article>
            <h2>Main Content Title</h2>
            <p>This is the main content of the page.</p>
        </article>
    </main>
    <footer>
        <p>Website Footer</p>
    </footer>
</body>
</html>

Benefits of Using `<main>`:

Accessibility: Screen readers and other assistive technologies can easily navigate to the main content of the page.
SEO: Search engines can better understand the structure of the webpage, focusing on the core content.

Conclusion

The <main> element is crucial for semantic HTML, aiding both web accessibility and search engine understanding. It helps in creating a structured and meaningful web document layout.