68. main 标签

本节目标：理解 main 标识页面主体内容的作用，记住每页只能有一个。

<main> 是页面最重要的语义标签之一。它标识了页面的核心内容区域。

每页只能有一个 main

这是硬性规则。一个 HTML 文档里，main 只能出现一次。

<!-- 正确 -->
<body>
  <header>...</header>
  <main>
    <h1>文章标题</h1>
    <p>正文内容</p>
  </main>
  <footer>...</footer>
</body>

<!-- 错误：不能有两个 main -->
<body>
  <main>内容1</main>
  <main>内容2</main>
</body>

浏览器不会报错，但多个 main 会让屏幕阅读器困惑。遵守规则是开发者的责任。

main 里放什么

页面的核心内容——对用户来说最重要的东西。

博客文章页面：article 在 main 里。商品详情页：商品信息在 main 里。搜索结果页：结果列表在 main 里。

main 里不放什么

以下内容不应该出现在 main 里：

导航链接（应该用 nav）
侧边栏（应该用 aside）
页眉页脚
站点搜索框
版权信息

这些内容在很多页面重复出现，不属于”主体内容”。

对可访问性的价值

屏幕阅读器可以用 main 标签给用户一个”跳到主内容”的快捷键。

用户不需要每次都听一遍导航菜单，直接跳到核心内容。

<body>
  <a href="#main-content" class="skip-link">跳到主要内容</a>
  <nav>...</nav>
  <main id="main-content">
    <h1>页面标题</h1>
    <p>核心内容...</p>
  </main>
</body>

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 10px;
}

main 的嵌套规则

main 不能嵌套在以下元素内部：

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

这些元素各自代表独立的内容区域，不应该成为”主体内容”的一部分。

完整示例

<body>
  <header>
    <h1>我的博客</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/archive">归档</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>今天的主题</h2>
      <p>这里是文章正文，是页面的核心内容。</p>
    </article>

    <article>
      <h2>另一篇文章</h2>
      <p>同样在 main 里。</p>
    </article>
  </main>

  <aside>
    <h3>热门文章</h3>
    <ul>...</ul>
  </aside>

  <footer>
    <p>版权所有 2026</p>
  </footer>
</body>

main 包裹了所有文章，aside 放热门链接，footer 放版权。主次分明。