semantic HTML中body后包裹所有子元素的语义元素选择指南

你当前用来做全局网格布局的<div class="grid-container">不建议直接替换为<main>，判断依据非常明确：
<main>的语义是当前页面独有的核心主体内容，W3C规范明确要求：

1. 单个可见页面最多只能出现1个不带hidden属性的<main>元素
2. <main>的覆盖范围不能包含全站跨页面重复出现的内容——比如页头导航、全站侧边栏、通用页脚、全站公告块这些都不属于main的包含范围。

如果你的grid-container是包裹body下所有内容（包括header、footer、公共侧边栏）的纯布局容器，那继续用<div>是完全符合语义规范的——<div>本身就是设计用来承载无特殊语义的布局、样式容器的，不存在“用div就不符合语义化”的错误认知。只有当这个容器恰好只包裹页面独有的核心内容、不包含任何全站公共模块时，才适合替换为<main>。

• 标准页面结构的常规合法嵌套参考：

<body>
  <!-- 纯布局全局包裹，无对应语义，用div完全合规 -->
  <div class="grid-container">
    <!-- 全站页头，放logo、站点标题等 -->
    <header>
      <!-- 全站主导航，嵌套在header内是合法写法 -->
      <nav aria-label="全站主导航"></nav>
    </header>

    <!-- 页面核心独有内容，唯一的main元素 -->
    <main>
      <!-- 独立可分发的完整内容块，比如博客正文、论坛帖子 -->
      <article>
        <!-- 文章自身的头部，放标题、发布时间、作者信息 -->
        <header></header>
        <!-- 正文段落 -->
        <p></p>
        <!-- 文章自身的尾部，放点赞、标签、作者署名 -->
        <footer></footer>
      </article>
      <!-- 和核心内容相关的附属侧边内容，比如文章目录、相关推荐 -->
      <aside aria-label="正文相关推荐"></aside>
    </main>

    <!-- 全站页脚，放版权信息、备案号、次级链接 -->
    <footer>
      <nav aria-label="页脚次级导航"></nav>
    </footer>
  </div>
</body>

• 明确禁止的错误嵌套：
  • 不要将<main>嵌套在<header>、<footer>、<nav>、<article>、<aside>内部，main必须是和页头、页脚平级的核心内容容器
  • 不要将语义标签当作纯布局容器使用：比如为了“凑语义标签”把用来做flex布局、网格间距的外层盒子换成<section>、<main>，没有对应语义的布局容器直接用div即可
  • 不要在单个页面内放置多个可见的<main>元素，多页应用切换页面时也要保证当前可见页只有一个main
• 可灵活调整的嵌套场景：
  • <header>、<footer>不是页面级专属标签：<article>、<section>内部都可以有自己的header和footer，用来承载对应内容块的头部、尾部信息
  • <nav>可以在页面内多次出现，只要是导航类内容都可以用，建议通过aria-label属性区分不同导航的作用，方便屏幕阅读器识别
  • <section>用来对同主题的内容做分组，每个section内部建议带有对应层级的标题（h1-h6），不要把section当普通div做样式容器

• 标签选择先匹配内容语义，不要为了“追求语义化”硬套标签：比如按钮优先用<button>而不是加点击事件的div，段落用<p>，标题按层级用h1-h6，纯布局容器优先用div/span
• 不要重复添加冗余的ARIA角色：原生语义标签已经自带对应的无障碍角色，比如<main>默认带role="main"，<nav>默认带role="navigation"，不需要额外再写一遍重复的role属性
• SEO适配注意：搜索引擎爬虫会将<main>内的内容识别为页面核心内容，不要把全站通用广告、无关推荐块放在main内部，避免干扰核心内容权重判断
• 标题层级不要跳级：页面内h1最好只保留1个（对应页面主标题），后面按h2、h3的层级递进，不要为了样式大小直接跳用h4、h5

内容的提问来源于stack exchange，提问作者vikramvi