语义化标签提升可读性的前提是团队对标签用途达成共识；全局唯一且不可嵌套于等标签内，仅包裹导航链接，须为可独立存在的相关内容，需有明确主题并建议紧跟-。
语义化标签本身不提升可读性，人对结构的预期一致了，才真正提升可读性。 换句话说，<header></header> 不比 <div class="header"> 多一行注释就自动好懂——它靠的是团队对 <code><header></header> 该放什么、不该放什么有共识。
哪些标签必须严格替换，且嵌套不能错
不是所有 <div> 都该动。改错比不改更糟：屏幕阅读器会跳过被 <code>display: none 隐藏的 <main></main>，搜索引擎可能把嵌套在 <section></section> 里的 <aside></aside> 当成正文子节。
-
<main></main> 全局只能出现一次，且不能嵌套在 <article></article>、<section></section>、<header></header>、<footer></footer> 或 <nav></nav> 内部
-
<nav></nav> 只能包裹导航链接（<a></a>）或带跳转逻辑的按钮（需加 role="link"），不能塞搜索框、登录表单
-
<aside></aside> 表示与主内容“相关但可独立存在”的补充信息（如作者简介、同类文章推荐），不是视觉上的“右边那块区域”
-
<section></section> 必须有明确主题，建议紧跟着 <h2></h2>–<h6></h6>；纯样式容器（如 <div class="clearfix">）不换<h3>缩进和换行怎么配，才让人一眼看出父子关系</h3>
<p>HTML 不依赖换行渲染，但人依赖缩进来识别层级。缩进错位比语法错误更难 debug——浏览器不报错，你却要花三分钟找漏掉的 <code>
。
- 统一用 2 个空格缩进（不用 Tab），避免不同编辑器显示不一致
- 每个块级元素（
<header></header>、<section></section>、<main></main>）独占一行
- 子元素缩进一层，闭合标签与开始标签垂直对齐（不是贴着内容写，比如
<p>文字</p> 要换行）
- 内联元素（
<em></em>、<strong></strong>）可紧凑写在段落中，除非内容过长需换行
类名命名怎么避坑，让别人不用翻 CSS 就懂 HTML
写 class="red-btn" 是给自己埋雷：样式改成蓝色后，类名就失效或误导；别人接手时，得翻 CSS 才敢动 HTML。
- 类名表达“是什么”，不是“长什么样”：用
class="search-submit"，不用 class="btn-primary"
- 避免缩写（
usr）、拼音（yonghu）、序号（box1）
- 复杂组件可在起始和结束处加注释，如
<!-- .product-card --> 和 <!-- /.product-card -->
- BEM 是成熟路径，但哪怕只做到“名词+用途”，也比纯样式名强得多
为什么用了语义标签，SEO 和读屏软件还是没反应
常见原因是“形似神不似”：标签用了，但结构破坏了语义链。比如 <main></main> 被 aria-hidden="true" 错误包裹，或 <nav></nav> 里混了 <button></button> 却没补 ARIA 标签。
- 用浏览器 DevTools 的 Accessibility 面板，检查
<nav></nav> 是否被识别为 "navigation" role
- 运行
axe-core 扫描，重点看 "landmark-uniq"（确保 <main></main> 唯一）、"region"（验证地标区域是否被正确识别）
- CI 流程里跑
htmlhint，配置 id-unique（防多个 <main></main>）、headings（禁 h2 后直接 h4）
- Code Review 必查：是否有多个
<h1></h1>、<main></main> 是否缺失、<button></button> 是否被 <div onclick> 替代<p>最易被忽略的点是：语义化不是一次重构动作，而是持续校验的过程。每次加新模块，都要问一句——这个容器承载的是什么角色？它在无障碍树里该出现在哪一层？</p>
</div>
