main 必须是 body 的直接子元素，否则破坏语义锚点；header 需含标题才有效；article 用于可独立存在的内容，section 仅作逻辑分组；nav 和 footer 可嵌套但职责不可越界。
main 必须是 body 的直接子元素，否则会破坏语义锚点
搜索引擎和屏幕阅读器依赖 main 作为页面唯一主内容入口。如果把它包在 div、section 或 nav 里，就等于告诉机器“这不是主内容”，导致 SEO 权重流失、辅助技术跳过主体。
常见错误现象：
- 用
<div class="container"><main>...</main></div>—— 容器类 div 不该包裹main -
<section><main>...</main></section>——section是分组容器，不能替代结构层级 - 页面中出现两个
main—— 即使一个在article内也不合法
正确做法只有一条：确保 main 是 body 的**直接子节点**。其他所有布局包裹逻辑（如居中、最大宽度、响应式断点）全部交给 CSS 处理，不要动 HTML 层级。
header 不是“页头专用”，但必须配标题才有效
很多人把 header 当作“网站顶部横幅”的同义词，结果在文章卡片里空放一个 header 却不加 h2 或 h3，这会让语义失效——没有标题的 header 对屏幕阅读器来说等于不存在。
使用场景决定嵌套方式：
- 全局页眉：
<header><h1>站点名称</h1> <nav>...</nav></header> - 文章区块头部：
<article><header><h2>文章标题</h2> <time datetime="2026-08-25">今天</time></header><p>正文...</p></article> - 禁止写法：
<header><div class="logo">...</div></header>—— 没有标题，无语义
注意：header 可以多个，但每个都应承载明确的“起始”含义，并通过标题建立大纲层级。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
article 和 section 的边界：能独立存在？还是仅为分组？
判断标准非常直白：把这块内容复制出来单独保存为一个 HTML 文件，它是否依然完整、可理解、可被 RSS 抓取或分享？如果是，就该用 article；如果只是“产品介绍”“用户反馈”这类需要上下文支撑的逻辑块，就用 section。
容易踩的坑：
- 用
section包裹整篇博客正文 —— 错。博客正文是典型article，哪怕它内部再分小节 - 在
article里硬塞一个没标题的section—— 错。每个section应有h2–h6，否则不如用div - 把广告位、无关推荐放进
aside—— 错。aside必须与主内容相关（比如作者简介、延伸阅读），广告属于干扰项，应避免语义污染
性能影响不大，但语义混淆会降低 Google 对内容实体的识别精度，尤其影响结构化数据（如 JSON-LD）的自动匹配。
nav 和 footer 的嵌套自由度比你想的高，但职责不能越界
nav 和 footer 允许嵌套在 article 或 section 内部，这是合法且推荐的。比如评论区每条评论底部的“回复”“举报”按钮组，可以放在 <footer><button>回复</button></footer> 里。
但关键限制在于职责边界：
-
nav只能包裹**导航链接**，不是所有按钮或交互控件都能塞进去。例如搜索框、筛选下拉菜单不属于nav范畴 -
footer在article内部时，只能放该文章相关的元信息（发布时间、作者、标签、操作按钮），不能塞全站备案号 - 页脚里的“友情链接”“合作伙伴”等杂项链接，不属于主导航，也不构成页面底部语义，建议用
div+ ARIA 标签处理，而非硬套nav
最常被忽略的一点：nav 的语义价值高度依赖链接质量。一堆死链或 JavaScript 伪链接（<a href="#" onclick="..."></a>）会让辅助工具完全无法使用，语义形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
