语义化HTML的关键在于用对标签、理清嵌套、守住边界：nav仅含主导航链接，main全局唯一且直包article/section，header/footer按需复用但须有实质内容，section必配标题，标题层级严格递进，图文与表单优先使用原生语义标签。
关键在让结构自己说话——用对标签、理清嵌套、守住边界，别人（包括未来的你）一眼就能看懂哪是导航、哪是正文、哪是补充，改起来自然快。
只用语义标签做它该做的事
别把 nav 当“有链接的盒子”来用：广告位、产品推荐、登录入口，哪怕带链接，也不属于导航，就别塞进 nav 里。同理，main 必须唯一，且不能藏在 article 或 aside 里面；header 和 footer 可以多处出现，但每处都要有实际内容，比如文章里的 header 至少得有标题和发布时间。
- nav → 只包跳转到其他页面或区块的主链接
- main → 全局唯一，直接子元素应是 article、section 或段落，不套其他语义容器
- header/footer → 按需复用，但每个都得承载对应层级的主题信息
嵌套讲逻辑，不堆深度
main 里不直接放一堆 p 和 h2。博客列表页就用 section 包“前端专栏”，再用多个 article 分别装每篇文章；每篇 article 内部再自包含 header（含标题和时间）、正文、footer（如标签和分享）。记住：section 必须配标题（h2–h6），没标题就用 div 更诚实。
- 按内容粒度分层：主题 → section，独立单元 → article，关联补充 → aside
- 避免连续四层以上语义标签嵌套，比如 main > section > article > section 就容易绕晕人
- 没标题的“分组”不用 section，视觉分隔交给 CSS
标题层级与结构严格对齐
全页只有一个 h1，通常放在最外层 header 里；每个 article 或 section 从 h2 开始；子内容按逻辑递进用 h3、h4，绝不跳级。标题不是加粗工具，样式交给 CSS，标签只管表达“这是第几级内容”。
立即学习“前端免费学习笔记（深入）”；
- h1 定位页面主旨，不可重复
- article/section 内部第一级标题必须是 h2，形成可读大纲
- 屏幕阅读器靠这个层级导航，乱跳会让辅助用户迷失
图文与表单自带语义，别全靠 ARIA 补救
图片不单独用 img，配上 figure 和 figcaption 才算完整表达“图+说明”；表单用 fieldset 分组、legend 命名；按钮优先用 button，链接优先用 a，需要额外提示时再加 aria-label。原生语义能扛的，别推给 ARIA。
- figure + figcaption 让机器识别图文关系，不是可选装饰
- fieldset + legend 明确表单逻辑分组，比一堆 div 清晰得多
- ARIA 是补充，不是替代——先用对原生标签，再考虑增强
