语义化标签需严格遵循使用规范：仅限1次且包裹核心内容，须配标题，须具真实导航意图；缩进统一用2空格；类名应表意而非样式；注释重在解释“为什么”而非“是什么”。

用语义化标签代替嵌套

时，哪些标签必须配标题或限制出现次数

不是所有语义化标签都能随便用。<main></main> 在整个页面中只能出现一次，且必须包裹核心内容区域；<section></section> 必须有明确主题，建议紧随其后加 <h2></h2> 或更高级别标题；<nav></nav> 可以出现多次（比如主导航 + 页脚导航），但每个都应承载真实导航意图，不能只为样式套壳。

常见错误现象：<section></section> 里只放几个 <p></p> 没标题、<main></main> 套在某个卡片容器里、<aside></aside> 用来做右侧固定广告栏（它本意是附属内容，不是广告位）。

• 避免把 <div class="header"> 改成 <code><header></header> 就算语义化完成——得确认它真承担页面级头部职责
• <article></article> 适合独立可分发的内容（博客、新闻条目），不是每个“内容块”都适用
• 表单必须用 <form></form>，按钮必须用 <button></button>，否则 role="form" 或 role="button" 不会被屏幕阅读器正确识别

缩进与换行怎么写才不引发协作混乱

缩进错位比语法错误更难 debug —— 浏览器不报错，你却要花三分钟找漏掉的

。统一用 2 个空格（不是 Tab），因为 Tab 在不同编辑器里可能显示为 2/4/8 格，协作时容易错层。

每个块级元素（如 <header></header>、<section></section>、<footer></footer>）独占一行；子元素缩进一层；闭合标签与开始标签垂直对齐（不是紧贴内容后）。

• 反例：<p>欢迎<strong>登录</strong>我们的网站</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 没问题；但长段落建议前后换行，避免视觉缠绕
• 内联元素（<span></span>、<strong></strong>）可紧凑写，除非内容过长需换行
• 不要为了“压缩体积”把多个标签挤在同一行，HTML 不依赖换行渲染，但人依赖缩进来识别父子关系

类名命名踩坑：为什么 class="red-btn" 是技术债

class="red-btn" 或 class="float-right" 看似省事，实则埋雷：样式改了，类名就失效或误导；别人接手时，得翻 CSS 才敢动 HTML。

真正可维护的命名聚焦功能或内容角色，比如 class="search-submit"、class="user-avatar"、class="error-message"。哪怕不用 BEM，也请坚持“名词+用途”结构。

• 禁止缩写（usr、btn）、拼音（yonghu）、序号（box1、div3）
• 复杂组件可在起始和结束处加注释，如 <!-- .product-card --> 和 <!-- /.product-card -->
• 避免纯样式名，不等于拒绝描述性修饰词——class="primary-cta" 比 class="red-btn" 更合理，因 “primary” 表达层级意图而非颜色

注释该写在哪、写什么才不变成噪音

注释不是越多越好。优先解释“为什么”，而不是“是什么”。<!-- 主导航菜单 --> 这类注释价值低；<!-- v1.2 - 2023-04-01: 增加了响应式导航菜单 --> 或 <!-- FIXME: Safari 下 flex gap 不生效，临时用 margin 替代 --> 才有用。

大型容器结束处标注对应开始标签（如 <!-- /header -->），尤其当嵌套深、结构长时；逻辑区块之间用空行分隔比堆砌注释更高效。

• 避免写 <!-- This is a div --> 这类显而易见的内容
• 国际化项目建议用英文注释，确保团队成员都能理解
• TODO/FIXME 类注释上线前务必清理，否则会积累成技术盲区

真正影响长期可维护性的，往往不是某一行代码写得对不对，而是结构意图是否能被快速识别、类名是否随业务演进而自然延续、注释是否在关键决策点留下可追溯的上下文。这些地方没标准答案，但一旦松动，重构成本会指数级上升。