The <main> HTML element represents the main content of a web page. It is intended to contain the central content that is unique to the document, excluding headers, footers, sidebars, and other secondary content.
Here’s an example of how to use the <main> element:
<body>
<header>
<!-- Header content goes here -->
</header>
<main>
<!-- Main content goes here -->
<h1>Welcome to My Website!</h1>
<p>This is the main content of the page.</p>
</main>
<footer>
<!-- Footer content goes here -->
</footer>
</body>
In this example, the <main> element wraps the central content of the web page. It can contain various HTML elements such as headings, paragraphs, images, videos, or any other content specific to the document.
Using the <main> element provides several benefits:
- Accessibility: It helps assistive technologies and screen readers to identify and navigate the main content of the page easily.
- SEO (Search Engine Optimization): Search engines may prioritize and give more weight to the content within the
<main>element. - Clarity: It clearly separates the main content from other secondary elements, making it easier to maintain and understand the structure of the web page.
It’s important to note that there should only be one <main> element per web page, and it should not be nested within other <main> elements.
In summary, the <main> element is used to define the main content of a web page. It wraps the central content that is unique to the document and excludes headers, footers, and sidebars. Properly using the <main> element enhances accessibility, SEO, and overall organization of the web page.