必须全局唯一且不可嵌套于内；仅包裹导航链接；表示相关补充信息而非视觉侧边栏；须含标题；需满足可独立分发。
语义化标签不是“换掉div就完事”，而是用标签本身表达内容意图——它让代码在不看CSS、不运行JS的情况下，就能被准确理解。
哪些标签必须优先替换，且不能嵌套错？
替换不是随意的，关键看内容角色是否匹配。比如 <nav></nav> 只能包裹导航链接（<a></a> 或带跳转逻辑的按钮），不能塞进搜索表单或登录入口；<main></main> 必须全局唯一，且不能嵌套在 <article></article> 或 <section></section> 内部；<aside></aside> 不是“右边那块div”，而是指与当前内容相关但非核心的补充信息（如作者简介、同类文章推荐），广告位放这里反而违反语义。
-
<header></header>和<footer></footer>可以多次出现，但每个都应服务于其直接父容器（比如一个<article></article>可自带<header></header>） -
<section></section>必须有视觉或逻辑上的标题（<h2></h2>–<h6></h6>），否则大概率该用<div> <li> <code><article></article>内容需满足“可独立分发/复用”，RSS抓取、分享卡片都依赖这个判断 - 新人入职第一天就要跑通本地构建，看到
htmlhint报错才允许提交 - Code Review 必查三项：是否有多个
<h1></h1>、<main></main>是否缺失、<button></button>是否被<div onclick> 替代 <li>禁止在 PR 描述里写“已语义化”，必须截图对比前后 DOM 结构</li> <h3>为什么写了语义标签，SEO 和屏幕阅读器还是没反应？</h3> <p>常见原因是“形似神不似”：标签用了，但结构破坏了语义链。比如 <code><main></main>被display: none隐藏，或用aria-hidden="true"错误包裹；又或者<nav></nav>里混了<button></button>但没加role="link"或对应 ARIA 标签。更隐蔽的是嵌套越界：<article></article>里再套<article></article>是合法的，但如果子<article></article>实际只是评论列表，就该用<section></section>+<h3>评论</h3>，否则爬虫会误判为“嵌套正文”而非“附属内容”。立即学习“前端免费学习笔记（深入）”；
- 用浏览器 DevTools 的 Accessibility 面板，检查
<nav></nav>是否被识别为 “navigation” role - 运行
axe-core扫描，重点看 “landmark-unique” 和 “region” 规则失败项 - 禁用 CSS 后人工浏览页面，确认
<main></main>确实是第一个可读内容区块
真正难的不是选对标签，而是持续对抗“为了样式妥协结构”的惯性——比如因为某个动画效果需要多一层包裹，就随手加
<div class="wrapper">，结果把 <code><header><nav></nav></header>的语义层级压扁了。这种细节，工具扫不出来，只能靠人盯。 - 用浏览器 DevTools 的 Accessibility 面板，检查
团队协作中，怎么让语义化不变成“各写各的”？
靠自觉没用，得把规则变成机器可检查的硬约束。比如在 CI 流程里跑 htmlhint，配置 attr-req-alt（强制 <img alt="如何利用HTML语义化标签优化页面可读性？团队协作与代码质量保障解析" > 有 alt）、headings（禁止 h2 后直接 h4）、id-unique（防止多个 <main></main>）。VS Code 装 HTMLHint 插件，保存时实时标红错误。更关键的是：把规范写成带反例的文档，比如明确标注“❌ 错误：<nav><form>...</form></nav>；✅ 正确：<nav><ul><li><a>首页</a></li></ul></nav>”。
