语义化不是加几个新标签就完事，而是用对的标签做对的事——错用比不用更糟，多写一个就破坏整个页面的无障碍锚点；必须有独立主题和–标题，否则一律用；每页仅一个且不可嵌套在等容器内；仅用于全站主导航并建议加aria-label。
直接说结论：语义化不是加几个新标签就完事，而是用对的标签做对的事——错用 <section></section> 比不用更糟，<main></main> 多写一个就破坏整个页面的无障碍锚点。
怎么判断该用 <section></section> 还是 <div>
<p>关键看这块内容有没有独立主题和标题。没有 <code><h2></h2>–<h6></h6> 的“分组”，一律用 <div>。
<ul>
<li>
<code><section></section> 必须自带标题（比如产品页的「参数详情」<h2></h2> 下包一层 <section></section>）
<div> 更诚实
<li>误用 <code><section></section> 会导致浏览器大纲（outline）混乱，NVDA 会把无标题的 <section></section> 当作无效节点跳过
<main></main> 只能出现一次，且不能嵌套在其他语义容器里
这是最常被忽略的硬约束。<main></main> 是辅助技术定位“核心内容”的唯一可靠 landmark，多一个或包在 <header></header> 里，它就退化成普通 <div>。
<ul>
<li>正确结构：<code> → <header></header> + <main></main> + <footer></footer>（三者并列）
<header><main></main></header> 或 <article><main></main></article>
main role
<nav></nav> 不是所有链接集合都算导航
只用于主导航——即全站级、跨页面跳转的链接集合。页脚的「关于我们」「隐私条款」、文章内的「上一篇/下一篇」、面包屑，都不该用 <nav></nav>。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 主导航必须有明确用途标识，建议加
aria-label="主导航"（尤其当页面有多个<nav></nav>时） - 侧边栏菜单、分页控件、标签云——用
<ul></ul>+ 普通链接更准确 - 用
<nav></nav>包住搜索框或登录入口？错。它们属于交互控件，不是导航
检查语义是否真正生效，别只看标签名
写了 <header></header> 不等于屏幕阅读器就认出它是页眉。得验证它的 role、name、level 是否被正确暴露。
- Chrome DevTools → Elements → 右键元素 → “Inspect Accessibility Properties”
- 常见失效：
<img>的alt是空字符串但图非装饰性；<time></time>的datetime写成"2026/04/29"（必须是"2026-04-29"） - 用 JS 动态隐藏
<nav></nav>时，光设display: none不够，还得同步加aria-hidden="true"
真正难的不是记住哪些标签可用，而是每次写之前问一句：这个容器在脱离 CSS 和 JS 后，还能让机器和人准确理解它的角色吗？
