Use the <main> element only for the primary, unique content of the page such as article text, blog posts, or product descriptions, excluding repeated elements like headers, navigation, sidebars, and footers; 2. Include just one <main> per page to represent the dominant content, with the exception of single-page applications where multiple <main> elements may exist if only one is visible at a time; 3. Avoid using <main> when no single section clearly dominates, such as on homepages with multiple teasers; 4. Leverage its built-in accessibility benefits, as <main> has an implicit ARIA role of "main" that helps screen readers identify and navigate to the main content; 5. Place <main> after <header> and navigation and before <footer> to follow natural document flow and enhance accessibility; use it once, early, and exclusively for central content to improve both semantics and user experience.
The <main></main> element in HTML is a semantic tag used to identify the primary content of a webpage—the part that’s unique to that page and not repeated across sections like headers, navigation, sidebars, or footers. Using it correctly improves accessibility and helps screen readers and search engines understand your page structure.
Here’s how to use the <main></main> element properly:
1. Use it for the main content only
The <main></main> element should wrap the content that is directly related to the central topic or purpose of the page. This includes things like:
- Article text
- Blog posts
- Product descriptions
- Search results
- Interactive tools (if they’re the main focus)
Avoid including repeated content such as:
- Site-wide navigation
- Headers and footers
- Sidebars with links or ads
- Copyright information
Example:
<main>
<h1>How to Bake a Chocolate Cake</h1>
<p>This step-by-step guide walks you through baking a moist chocolate cake at home.</p>
<ol>
<li>Preheat the oven...</li>
<!-- more steps -->
</ol>
</main>2. Only one <main> per page
According to the HTML specification, you should use the <main> element only once per document. It represents the dominant content of the body, so having more than one contradicts its purpose.
There is one exception: if you have multiple <main> elements with hidden attributes (e.g., in single-page apps switching views), only one should be visible at a time.
3. Don’t use it where the main content isn’t clear
Avoid using <main> on pages like your homepage if there’s no single dominant section. For example, if your homepage is a grid of teasers linking to various articles or sections, it may not have a clear “main” area. In such cases, skip <main> or use it only if one section clearly dominates.
4. Accessibility and screen reader support
The <main> element has an implicit ARIA role of main, so screen readers recognize it as a landmark. This allows users to quickly navigate to the main content, improving usability.
You can also add role="main" for older browsers, but it’s redundant since <main> already includes it:
<main role="main"> <!-- role is not needed -->
Just use <main>—it’s sufficient.
5. Placement in the document
While not strictly required by the spec, it’s best practice to place <main> after the <header> and navigation, and before the <footer>. This reflects the natural reading order and improves accessibility.
Example structure:
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>Welcome to My Blog</h1>
<p>This is the main article content.</p>
</main>
<footer>...</footer>
</body>Basically, use <main></main> once, use it early, and make sure it contains only the unique, central content of the page. It’s simple but powerful for accessibility and semantics.
The above is the detailed content of How to correctly use the main element in your HTML. For more information, please follow other related articles on the PHP Chinese website!