语义化标签、data-属性、注释和嵌套深度是html维护成本的关键因素：语义标签提升可访问性与seo；data-属性解耦js与样式；注释需说明决策原因而非内容；嵌套超三层即应重构。
语义化标签不是“锦上添花”，而是维护成本的分水岭
团队接手一个老项目，改个页脚链接要花两小时——不是因为逻辑复杂，而是得先搞清哪个 div class="footer-wrap" 是真页脚、哪个是广告位、哪个是临时测试区块。语义化标签直接决定这种排查耗时是 2 分钟还是 2 小时。
用 <header></header> 替代 <div class="header">，表面看只是换了个标签，实际效果是：<br>• 屏幕阅读器自动识别为页眉区域，无需额外 <code>aria-role
• 搜索引擎提取结构化数据时，<main></main> 内容天然获得更高权重
• <section></section> 必须带 <h2></h2> 或更高标题，否则 axe 工具报错——这倒逼你写清楚模块主题，而不是堆一堆 box-1 container-v3
data-属性才是 JS 绑定的安全锚点
靠 class="nav-menu" 或 id="slider" 在 JS 里选元素，等于把样式名和交互逻辑绑死。一旦设计师说“把导航改成横向”，你改了 CSS 类名，JS 就静默失效，连报错都没有。
正确做法是：用 data- 属性标记意图，而非外观。
• 写成 <nav data-module="primary-navigation"></nav>，JS 用 document.querySelector('[data-module="primary-navigation"]')
• 多个同类型组件（如商品卡片）可用 data-product-id="1024"，避免重复 id="product-card" 导致 getElementById() 只取第一个
• data- 属性不参与样式，也不影响可访问性，纯属给 JS 看的契约
注释不是“写给人看的”，而是防止自己三个月后看不懂
HTML 注释最常被忽略的用途，是标注“为什么这么写”，而不是“这是什么”。比如：
• <!-- FIXME: Safari 16.4 下 flex gap 不生效，临时用 margin 替代 -->
• <!-- NOTE: aria-hidden="true" 是为避免图标文字被屏幕阅读器重复读取 -->
• <!-- START: user-profile-section -->...<!-- END: user-profile-section -->，配合统一命名，Ctrl+F 就能跳到对应区块
关键不是注释多，而是它必须回答“当时决策背后的约束条件”。等你半年后回来修这个 bug，真正救命的是那句 FIXME，不是“这里是用户头像”这种废话。
嵌套超过三层就是重构信号
<div><div><div><p>文本</p></div></div></div> 这种结构，审查元素要点四下才能定位目标节点。这不是排版问题，是维护风险的量化指标。
每多一层嵌套，就多一层理解成本和修改出错概率：
• <main></main> 里直接放 <article></article>，别套 <div class="content-wrapper">
<br>• <code><nav></nav> 里直接放 <ul></ul>，别再包一层 <div class="nav-inner">
<br>• 所有 <code>data- 和语义标签到位后，90% 的“容器 div”都能删掉
真正难的不是写出能跑的 HTML，而是在每次新增 DOM 节点前，本能地问一句：这个标签有没有不可替代的语义或功能价值？没有，就别加。
