The element defines the primary content of a webpage unique to the document. 2. It enhances accessibility by helping screen readers identify core content. 3. It should appear only once per page, unless one instance is hidden. 4. It must not contain repeated content like headers, footers, or navigation. 5. It implicitly carries the ARIA main role, making explicit role assignment redundant. In summary, the element improves structure and accessibility by clearly enclosing the dominant, page-specific content users came for.
The <main></main> element in HTML5 is used to define the main content of a webpage—the part that is unique to the document and not repeated across multiple pages, such as sidebars, navigation links, logos, or copyright information.
element in HTML5?" />
Here’s a breakdown of its role and key characteristics:
1. Represents the Primary Content
The <main></main> element wraps the central content of the page that directly relates to the document's topic or the user's main goal. For example, on a blog post page, the article itself would be inside <main></main>, while the header, footer, and sidebar stay outside.
element in HTML5?" />
2. Improves Accessibility and Semantics
By clearly marking the main content area, the <main></main> element helps screen readers and other assistive technologies identify and navigate to the core content quickly. This enhances accessibility for users with disabilities.
3. Should Appear Only Once Per Page
According to HTML5 specifications, the <main></main> element should not be used more than once in a single document (unless one is hidden, such as for dynamic content or tabs). It’s meant to be a unique container for the dominant content.
element in HTML5?" />
4. Not for Repeated or Common Content
Avoid placing navigation menus, site-wide sidebars, headers, footers, or site logos inside <main></main>. These belong in elements like <nav></nav>, <header></header>, <footer></footer>, or <aside></aside>.
5. Can Be Used with ARIA Roles (but usually unnecessary)
While <main></main> is already semantically meaningful, it implicitly has the ARIA role main, so writing <main role="main"></main> is redundant and not needed.
Example:
<body>
<header>
<h1>Website Title</h1>
<nav>...</nav>
</header>
<main>
<h2>Article Title</h2>
<p>This is the main content of the page.</p>
<article>...</article>
</main>
<aside>
<p>Related links</p>
</aside>
<footer>
<p>Copyright info</p>
</footer>
</body>In short, the <main></main> element makes your HTML more structured, accessible, and meaningful by clearly defining what the page is primarily about. Basically, if it’s the core content a user came for, it belongs in <main></main>.
The above is the detailed content of What is the role of the element in HTML5?. For more information, please follow other related articles on the PHP Chinese website!