The role and usage scenarios of the '<main>' tag

Author：Chuan Chen 阅读数：8527人阅读分类： HTML

The <main> tag is a semantic element introduced in HTML5, used to identify the main content area of a webpage. It helps browsers and assistive technologies better understand the page structure, improving accessibility and SEO effectiveness.

Basic Definition of the `<main>` Tag

The <main> tag represents the primary content area of a document that is directly related to its central theme. A document should contain only one <main> element (unless the hidden attribute is used), and this element should not be a descendant of <article>, <aside>, <footer>, <header>, or <nav>.

The W3C specification explicitly states:

The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

Core Functions and Semantic Value

Semantic Markup: Clearly distinguishes main content from auxiliary content
Enhanced Accessibility: Screen readers can quickly locate the main content
SEO Optimization: Helps search engines identify key content areas
Structural Clarity: Makes the DOM structure more readable

Typical Use Cases

Main Content Area in Single-Page Applications (SPA)

<body>
  <header>...</header>
  <nav>...</nav>
  <main id="app-content">
    <!-- Dynamically loaded content will render here -->
    <router-view></router-view>
  </main>
  <footer>...</footer>
</body>

Blog Post Page

<article>
  <header>
    <h1>Detailed Explanation of HTML5 Semantic Tags</h1>
  </header>
  <main>
    <section>
      <h2>Structural Elements</h2>
      <p>...detailed content...</p>
    </section>
    <section>
      <h2>Semantic Advantages</h2>
      <p>...detailed content...</p>
    </section>
  </main>
  <aside>Recommended Related Articles</aside>
</article>

E-commerce Product Page

<div class="product-page">
  <main class="product-details">
    <div class="gallery">...</div>
    <div class="info">
      <h1>Smartphone X</h1>
      <div class="price">$599</div>
      <div class="description">...</div>
      <button>Add to Cart</button>
    </div>
    <section class="specs">
      <h2>Technical Specifications</h2>
      <table>...</table>
    </section>
  </main>
  <aside class="related-products">...</aside>
</div>

Usage Notes

Uniqueness Rule

A valid HTML document should contain only one visible <main> element. If additional <main> elements need to be hidden, the hidden attribute must be added:

<main hidden>Fallback content (currently invisible)</main>

Nesting Restrictions

<main> should not be a child of the following elements:

<article>
<aside>
<footer>
<header>
<nav>

Styling

By default, <main> is a block-level element but does not come with any special styling. Typical CSS handling:

main {
  display: block;
  margin: 0 auto;
  max-width: 1200px;
  padding: 20px;
}

Differences from Similar Elements

Comparison with `<div>`

<!-- Non-semantic approach -->
<div id="content">...</div>

<!-- Semantic approach -->
<main>...</main>

Relationship with `<article>`

<article> represents an independent, distributable content unit, while <main> identifies document-level primary content:

<body>
  <main>
    <article>
      <h1>First Blog Post</h1>
      <p>...</p>
    </article>
    <article>
      <h1>Second Blog Post</h1>
      <p>...</p>
    </article>
  </main>
</body>

Browser Support and Compatibility

All modern browsers support the <main> element, including:

Chrome 26+
Firefox 21+
Safari 7+
Edge 12+
Opera 16+

For older versions of IE (IE8 and below), a polyfill script is required:

<!--[if lt IE 9]>
<script>
  document.createElement('main');
</script>
<![endif]-->

Accessibility Best Practices

ARIA Role: Although browsers automatically assign role="main", explicit declaration is more reliable:
```
<main role="main">...</main>
```

Skip Navigation Links: Help keyboard users quickly navigate:

<a href="#main-content" class="skip-link">Skip to content</a>
<!-- ... -->
<main id="main-content">...</main>

Screen Reader Testing: Use NVDA or VoiceOver to verify reading order.

Advanced Usage in Development

Dynamic Content Loading

// Load content into the main area using Fetch API
document.querySelector('main').innerHTML = 
  await (await fetch('/api/content')).text();

Integration with Web Components

<main>
  <custom-article data-id="123"></custom-article>
  <user-comments></user-comments>
</main>

Print Style Optimization

@media print {
  main {
    break-inside: avoid;
    padding: 0;
  }
}

Common Mistakes

Mistake 1: Multiple Visible `<main>` Elements

<!-- Invalid HTML -->
<main>Primary content 1</main>
<aside>Sidebar</aside>
<main>Primary content 2</main>

Mistake 2: Incorrect Nesting

<article>
  <header>...</header>
  <main> <!-- Violates nesting rules -->
    ...
  </main>
</article>

Mistake 3: Redundant Role Declaration

<main role="maincontent"> <!-- Non-standard ARIA role -->
  ...
</main>

Performance Considerations

DOM Query Optimization:

// Better than document.querySelector('#main')
document.querySelector('main')

CSS Scoping:

/* Limit style scope within main */
main .widget {
  border: 1px solid #eee;
}

Resource Loading Strategy:

<main>
  <img loading="lazy" src="product.jpg" alt="">
</main>

Integration with Other Tech Stacks

React Example

function App() {
  return (
    <>
      <Header />
      <main className="app-main">
        <Routes />
      </main>
      <Footer />
    </>
  );
}

Vue Example

<template>
  <div id="app">
    <app-header />
    <main>
      <router-view />
    </main>
    <app-footer />
  </div>
</template>

Angular Example

<div class="app-container">
  <app-nav></app-nav>
  <main>
    <router-outlet></router-outlet>
  </main>
</div>

Testing and Validation Methods

HTML Validation:

npm install -g html-validate
html-validate index.html

Chrome Audits:
- Use Lighthouse to check accessibility scores
- Review ARIA tree diagrams
Keyboard Navigation Testing:
- Use the Tab key to traverse focus
- Verify skip link functionality

Historical Evolution and Related Specifications

The HTML5.1 specification clarifies:

The main element represents the main content of the body of a document or application.

The WHATWG HTML Living Standard continuously updates related requirements, with recent changes including:

Allowing usage within <dialog>
More explicit accessibility mapping rules

Design Pattern References

Classic Layout Pattern

<body class="layout">
  <header class="layout-header">...</header>
  <nav class="layout-nav">...</nav>
  <main class="layout-main">
    <div class="grid">
      <section class="primary-content">...</section>
      <aside class="secondary-content">...</aside>
    </div>
  </main>
  <footer class="layout-footer">...</footer>
</body>

Full-Screen App Pattern

<body>
  <main class="fullscreen-app">
    <canvas id="game"></canvas>
    <div class="hud">...</div>
  </main>
</body>

Related CSS Features

Modern Layout Techniques

main {
  display: grid;
  grid-template-areas:
    "header header"
    "content sidebar"
    "footer footer";
  gap: 1rem;
}

Scroll Area Control

main {
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

Development Tool Support

Chrome DevTools:
- Displays semantic tag icons in the Elements panel
- Allows forcing element states for testing
VS Code Extensions:
- HTMLHint detects multiple <main> elements
- Emmet abbreviation main> for quick generation

ESLint Rules:

{
  "plugins": ["html"],
  "rules": {
    "html/no-multiple-main": "error"
  }
}

Mobile-Specific Considerations

Viewport Units:

main {
  min-height: calc(100vh - 120px);
}

Safe Area Adaptation:

main {
  padding: env(safe-area-inset-top) 
           env(safe-area-inset-right)
           env(safe-area-inset-bottom)
           env(safe-area-inset-left);
}

Touch Event Optimization:

document.querySelector('main').addEventListener(
  'touchstart', 
  handleTouch, 
  { passive: true }
);

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：'