The <main> HTML element is used to encapsulate the dominant content of the <body> of a document. This element is intended to contain content that is directly related to or expands upon the central topic of the document or application. It is a semantic element introduced in HTML5 to improve the accessibility and structure of web pages by clearly identifying the main content area, which is distinct from other sections like headers, footers, navigation, and sidebars.
Usage and Characteristics
The <main> element should be used only once per document and should not be a child of elements like <article>, <aside>, <footer>, <header>, or <nav>. It is designed to hold the core content of the page that is unique to the document, excluding repeated content like site-wide headers or navigation bars. Here is an example of how the <main> tag can be used:
<!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>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<article>
<h2>Main Article</h2>
<p>This is the main content of the webpage.</p>
</article>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>Valid Attributes for <main>
The <main> element does not have specific attributes beyond the global attributes, which include:
| Attribute | Description |
|---|---|
| class | Specifies one or more class names for the element, used for CSS styling. |
| id | Defines a unique identifier for the element, useful for linking and JavaScript. |
| style | Contains inline CSS styles for the element. |
| title | Provides additional information about the element, often displayed as a tooltip. |
Benefits and Considerations
Semantic Clarity: The
<main>element provides clear semantic meaning, indicating the primary content of the document, which aids both users and search engines in understanding the page structure.Accessibility: Using the
<main>element improves accessibility by helping screen readers and other assistive technologies identify the main content area, allowing users to navigate more efficiently.SEO: The
<main>element can positively impact SEO by clearly delineating the main content of the page, which search engines use to understand the relevance and context of the content.
In summary, the <main> element is a valuable tool for structuring the primary content of a webpage. It enhances semantic clarity, accessibility, and SEO, contributing to a well-organized and user-friendly web experience.