文章详情和评论模块均应置于内，详情为首要内容并用包裹，评论用结构化；相关推荐、页脚、面包屑等非核心内容须置于外。
文章详情和评论交互模块都该放进 <main></main>，但必须严格区分主次关系——详情是核心内容，评论是围绕它的交互延伸，两者都随 URL 变化、不可跨页复用。
文章详情必须作为 <main></main> 的首要内容
它不是“一部分”，而是页面主题本身。比如商品页的参数表、博客页的正文段落、新闻页的导语与报道主体，都要直接放在 <main></main> 开始位置。
- 用
<article></article>包裹整篇详情，明确其独立可分发性（如 RSS 订阅、分享链接） - 标题用
<h1></h1>，发布时间、作者等元信息放在<header></header>内部（注意：这是<article></article>自带的<header></header>，不是页面级<header></header>） - 避免混入全局元素：页眉 Logo、顶部搜索框、全站导航栏不能塞进这里
评论模块属于 <main></main>，但需独立结构化
用户留言不是装饰，而是当前页面主题的直接反馈。只要评论区只出现在这篇详情页、换到其他页面就不存在，它就满足“随 URL 变化”的判定标准。
- 用
<section aria-labelledby="comments-title"></section>包裹，加id="comments-title"的<h2></h2>标题，方便屏幕阅读器定位 - 每条评论用
<article></article>，体现其独立语义（一条留言可被单独引用或通知） - 评论输入表单也放在此
<section></section>内，但不要和列表混排；建议用<form></form>+<fieldset></fieldset>明确操作边界
哪些内容绝对不能塞进 <main></main> 一起交差
看似相关，实则破坏语义纯粹性。这些元素哪怕紧挨着详情显示，也不属于“本页核心”。
- 右侧“相关推荐”侧边栏：属于
<aside></aside>，应与<main></main>并列，不嵌套其中 - 页脚版权、备案号、底部导航：统一归到页面级
<footer></footer>，在<main></main>外部 - 面包屑导航：用
<nav aria-label="Breadcrumb"></nav>，放在<main></main>上方或内部顶部，但要确保它不干扰主体流 - “客服入口”按钮、“收藏”图标：服务主题但不构成主题，建议放在
<article></article>的<footer></footer>里，或独立<section></section>
SPA 和模板渲染中容易踩的坑
React/Vue 或服务端模板（如 EJS、Twig）常因复用逻辑导致结构错乱。
- Next.js 中，
app/layout.tsx里绝不能写<main></main>；必须只在app/page.tsx或动态路由的page.tsx中包裹一次 - Vue 单文件组件若用
<template></template>声明多个根节点，需确认<main></main>没被意外包裹进<header></header>或<div class="wrapper"> 等语义中立容器内 <li>SSR 渲染时，确保服务端输出的 <code><main></main>结构与客户端 hydration 后完全一致，否则辅助技术可能读取到空或错位内容
