main 标签全页仅能出现一次且必须为 body 直接子元素，仅包裹不可替代的核心内容（如数据表格、编辑表单），侧边栏、顶部导航等辅助结构应归入 nav 或 header；nav 专指主要跳转路径，aside 表示可独立存在的补充信息；section 必须含 h2–h6 标题，article 不适用于无独立分发价值的列表项；需通过 lighthouse 和 w3c 验证确保无障碍与语义正确性。
main 标签只能出现一次，且必须包裹真正不可替代的核心内容
很多后台模板把整个管理框架（含侧边栏、顶部导航）都塞进 main 里，这是错的。main 的语义是“页面唯一主内容区”，比如登录表单、数据表格、编辑表单主体——删掉它，页面就失去存在意义。侧边栏、顶部导航、面包屑这些辅助性结构，该归 nav 或 header，不能硬塞进去。
常见错误现象：main 嵌套了 nav 和 aside，导致 W3C 验证失败，屏幕阅读器朗读时逻辑混乱；或者一个页面出现多个 main，被辅助工具忽略后半部分。
-
main必须是body的直接子元素，且全页仅能有一个 - 后台首页的「数据概览卡片区」可放
main内，但「左侧菜单」和「顶部用户栏」必须移出 - 如果用了 iframe 加载内容区，
main应包裹 iframe 元素本身，而非其内部文档
nav 和 aside 的边界：导航路径 vs 辅助信息
nav 不是“所有带链接的容器”，而是专指用户主要跳转路径。后台里的左侧菜单、顶部主导航、面包屑（nav > ol > li > a）符合；但页脚一堆“关于我们”“隐私条款”、文章末尾的“上一篇/下一篇”，都不算 nav，用普通 div 或 footer 更合适。
aside 也不是“右边那块区域”，而是语义上与主内容相关但可独立存在的补充信息。比如后台中「当前操作提示」「筛选条件面板」「实时在线人数」——删掉它不影响主任务完成，但加上能提升上下文理解。
- 侧边栏如果是功能导航（如“用户管理→角色权限→日志审计”），用
nav；如果是“快捷入口”或“系统公告”，用aside - 不要给
aside加 class="sidebar" 来强行定位，它的位置由 CSS 控制，语义不依赖视觉 - 多个
nav是允许的（整页一个，每个article里还能各有一个），但别滥用
section 和 article 的嵌套陷阱：别用 section 包裹段落
后台常见的「配置项分组」“基础设置”“安全策略”“通知配置”，看着像 section，但很多人直接写成 <section><p>...</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img
src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a>
<p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>...</p></section>，漏掉标题层级。这会导致文档大纲断裂，SEO 和读屏器无法识别结构优先级。
article 则常被误用于“列表项”。比如后台用户列表每行用 article，但其实单个用户条目不具备独立分发、订阅或转发价值——它只是数据库一条记录的展示，不是一篇“文章”。这种场景用 li 或 div 更准确。
-
section必须配合h2–h6使用，否则对机器无意义；纯分段请用p、h3等常规标签 -
article内部建议包含header（含h2）、footer（含时间、操作按钮等），体现完整语义闭环 - 避免
article > section > p这类嵌套：article 已自带隐含层级，再套 section 属于冗余
无障碍与验证：别跳过最后一步检查
写完布局别急着加 CSS 动效。先打开 Chrome 开发者工具 → Lighthouse → “Accessibility” 跑一次，重点看「Document has a main landmark」和「Heading levels should only increase by one」这两项是否通过。再扔进 W3C Markup Validator（validator.w3.org）查报错——很多看似“能显示”的 HTML，其实 time 缺 datetime、img 没 alt、figure 里漏 figcaption，这些细节在后台系统里恰恰最容易被忽略。
真实项目里，最常卡住的是：开发自测只看 Chrome，但企业内网常用 IE11 或旧版 Edge，而某些语义标签（如 main）在旧浏览器里没默认样式，导致内容塌陷——这时候得补一行 main { display: block; }，而不是换回 div。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
