The <main></main>
tag in HTML is used to define the main content of a document or application. This content should be unique to the document and not appear in sidebars, navigation bars, or other sections repeated across multiple pages. It helps both developers and assistive technologies like screen readers identify the primary content area, improving accessibility and SEO.

Improving Accessibility with <main></main>
One of the biggest benefits of using the <main></main>
tag is its impact on accessibility. Screen readers can use this landmark element to quickly navigate to the main content of the page, skipping over repetitive elements like headers, menus, and banners.

- Use only one
<main></main>
element per page. - Avoid placing it inside elements like
<header></header>
,<footer></footer>
, or<nav></nav>
. - Assistive technologies often allow users to jump directly to this section, so make sure your main content starts here.
This makes for a better user experience, especially for people who rely on keyboard navigation or screen readers.
Enhancing SEO and Document Structure`
Search engines also benefit from semantic tags like <main></main>
. By clearly defining the core content of a page, you help search engine crawlers understand what your page is really about.

- The
<main></main>
tag gives context to your content hierarchy. - Search engines may give more weight to text inside
<main></main>
than elsewhere on the page. - It complements other semantic elements like
<article></article>
,<section></section>
, and<aside></aside>
.
Using <main></main>
doesn’t replace good content strategy or keyword optimization, but it does support how your content is interpreted by machines.
When (and How) to Use <main></main>
in Your Layout`
You’ll want to wrap your central content — typically the part that changes from page to page — in the <main></main>
tag. For example, in a blog layout:
<main> <h1>Blog Post Title</h1> <p>This is the body of the article...</p> </main>
Avoid including global elements like site-wide navigation or footers inside <main></main>
. Those belong outside of it, usually within <header></header>
or <footer></footer>
tags.
Also keep in mind:
- Don’t wrap
<main></main>
ins unless necessary — it’s a block-level element by default.- It doesn’t have any visual styling by default, but you can apply CSS as needed.
So if you're building a standard website layout, putting your page-specific content inside
<main></main>
makes structural and semantic sense.基本上就這些。