HTML中main标签未嵌套在body标签内会产生哪些影响？

你看到两种写法渲染效果无差异，是现代浏览器的HTML容错机制在自动修正错误，它会主动把游离在<body>外的块级元素移动到<body>内部渲染，本质上你实际看到的页面DOM结构已经被浏览器修改过了，不代表原写法是正确的。

除了HTML5规范的明确要求外，必须把<main>嵌套在<body>内的原因、放在外部的影响如下：

• 无障碍功能完全失效
  屏幕阅读器等辅助设备会固定从<body>节点内读取页面有效内容，放在外部的<main>不会被识别为页面主内容区域，依赖辅助设备的用户完全无法定位核心内容，属于严重的无障碍合规问题。
• JS DOM操作完全失效
  常用的DOM查询方法如document.body.querySelector('main')、document.body.children只会返回<body>内部的节点，写在外部的<main>会查询不到，后续绑定事件、修改内容的JS逻辑会全部报错，业务功能无法运行。
• 搜索引擎收录受影响
  搜索引擎爬虫会严格按照规范提取<body>内的内容做权重计算，放在外部的<main>里的内容可能不会被判定为页面主体内容，直接拉低页面搜索排名。
• 老旧/小众浏览器渲染异常
  IE9及以下旧版浏览器、部分移动端小众浏览器没有对应的容错逻辑，会直接忽略<body>外的非法节点，导致页面核心内容完全不展示。
• 工程化校验不通过
  W3C校验器、ESLint等前端代码校验工具会将该写法标记为语法错误，协作开发时会出现代码无法提交、流水线构建失败的问题，大幅提升维护成本。

你提到的两种写法示例：

<!-- 不规范写法 -->
<body></body>
<main></main>

<!-- 规范写法 -->
<body>
  <main></main>
</body>

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