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.
![[object Object]-[object Object]](/_next/static/media/html.c06c6b46.svg)