语义化标签需依内容独立性与结构角色选用：用于可独立分发的内容，仅作文档内逻辑分组；须唯一且不包导航页脚；专指页面级导航；所有语义标签均无默认样式，作用在于dom结构与辅助技术识别。
语义化标签不是“换掉所有 <div> 就算对了”，而是根据内容是否能被独立理解、是否承担特定结构角色来选——用错一个，<code>document.querySelector 逻辑就可能失效，屏幕阅读器也会跳错位置。
什么时候该用 <article></article> 而不是 <section></section>
<article></article> 表示可独立分发、复用的内容单元；<section></section> 只是当前文档里的逻辑分组，脱离上下文就失去意义。
- ✅ 正确：
<article></article>包裹一篇博客、一条微博、一个商品卡片——单独保存为 HTML 文件仍能被理解 - ❌ 错误：把“用户评论区”写成
<article></article>——它依附于某篇文章存在，应使用<section></section> - ⚠️ 注意：
<article></article>内部可以嵌套<section></section>（比如文章里的“代码示例”小节），但反过来不行
<main></main> 必须唯一，且不能包导航和页脚
<main></main> 是页面核心内容的容器，浏览器和辅助技术靠它快速定位主体。一旦嵌套了 <header></header> 或 <footer></footer>，就等于告诉屏幕阅读器“这些也是主要内容”，实际却不是。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 正确：
<main></main>只包含文章正文、产品列表、表单等真正“不可省略”的部分 - ❌ 错误：把整个页面布局（含顶部导航栏、底部版权栏）都塞进
<main></main> - ⚠️ 注意：如果页面有多个
<main></main>，document.querySelector('main')会只返回第一个，后续逻辑可能静默失效
<nav></nav> 不等于“所有带链接的区域”
<nav></nav> 专指主导航、面包屑、侧边栏导航这类用于页面间跳转的链接集合。普通链接列表（如“相关文章”“友情链接”）不属于 <nav></nav> 范畴。
- ✅ 正确：顶部横向菜单、左侧垂直菜单、移动端汉堡菜单
- ❌ 错误：文章末尾的“上一篇/下一篇”、页脚里的“关于我们”“联系我们”
- ⚠️ 注意：
<nav></nav>默认无样式，视觉上和<div> 一样“看不见”，别因看不出区别就放弃使用 <p>最容易被忽略的一点：语义标签本身不带默认 margin/padding，也不影响渲染外观——它的作用全在 DOM 结构和辅助技术识别上。如果你只看浏览器渲染效果去判断是否用对了，大概率已经错了。</p> </div>
