当html文件超800行、重复结构≥3次或页脚需手动同步5个文件时，必须模块化——这是止损而非优化；应以header、nav、footer等语义标签锚定模块边界，避开路径错乱、id冲突和脚本执行时机错位三大陷阱，并通过无障碍检查、html验证和移动端测试验证拆分效果。
怎么判断HTML该不该模块化
当一个HTML文件超过800行、出现3次以上重复结构（比如相同导航栏在多个页面里硬拷贝），或者每次改页脚都要手动同步5个文件，就该模块化了。这不是“提前优化”，而是止损——继续堆砌只会让git diff变成灾难现场。
常见信号包括：
• header、footer、nav 代码在多个HTML里复制粘贴
• 页面顶部有大量内联<style></style>和<script></script>，且逻辑与结构混在一起
• 修改某个按钮样式时，发现它被写死在index.html、about.html、contact.html三处
• 用Ctrl+F搜class="btn-primary"，结果跳出17个匹配项，但其中6个实际是不同组件
语义化标签不是加分项，是模块边界的标尺
模块划分不能靠“看着顺眼”，得用HTML5原生语义标签锚定边界。比如<header></header>不是为了好看，它是浏览器无障碍树里一个独立的banner区域；<main></main>也不是装饰，它告诉辅助技术“这里才是正文起点”。
错误做法：
• 用<div class="header-wrapper">包裹所有顶部内容，再靠CSS强行定位<br>• 把整个侧边栏塞进一个<code><div id="sidebar">，却不加<code><aside></aside>语义
• 在<article></article>里嵌套另一个<article></article>却不加<section></section>做逻辑分隔
正确拆分示例：
• 导航模块 → 单独提取为nav.html，内容仅含<nav><ul>...</ul></nav>
• 卡片列表 → 每张卡片用<article class="product-card"></article>封装，避免用<div class="card">模糊职责<br>• 页脚版权信息 → 独立<code>footer.html，只保留<footer><p>© ...</p></footer>，不带任何样式或JS
模块复用必须避开三个执行陷阱
模块化不是把代码剪开再粘回去，关键在“复用时不破坏上下文”。很多项目卡在这一步：
• 路径错乱：模块里写的src="images/logo.png"，被引入到/blog/post.html时变成/blog/images/logo.png，必须统一用根相对路径src="/images/logo.png"
• ID冲突：模块里写了<input id="search-input">，主页面也有同名ID，导致document.getElementById('search-input')行为不可预测——模块内一律禁用id，改用data-module-id或类名+上下文查询
• 脚本执行时机错位：模块里写了<script>initSearch()</script>，但主页面DOM还没加载完，函数报ReferenceError——所有模块内脚本必须包装成函数，由主页面统一调用，或监听DOMContentLoaded
推荐最小可行方案：
• 静态站点：用fetch('nav.html').then(r => r.text()).then(html => document.getElementById('nav-mount').innerHTML = html)
• 构建流程：Webpack配html-loader，在入口HTML里写${require('./nav.html')}
• 原生方案：用<template id="nav-template"></template> + document.importNode(tmpl.content, true)，避免cloneNode()丢失表单状态
模块化后最易被忽略的验证点
模块拆完不等于重构完成。真正容易翻车的是这些细节：
• 屏幕阅读器是否还能按header→nav→main顺序朗读，还是变成一堆无序div
• 所有aria-*属性是否随模块移动而更新（比如aria-labelledby指向的ID还在不在）
• CSS作用域是否意外泄露（模块里写的.btn { color: red }把全局所有按钮都染红了）
• 构建后生成的HTML里，<template></template>标签是否被误删或未展开
建议上线前必跑三步：
• 用Chrome DevTools的Accessibility面板检查模块节点是否进入无障碍树
• 运行npx html-validate --config .htmlvalidate.json *.html查语义错误
• 在移动端打开页面，确认模块间间距、字体大小、触摸目标尺寸没因拆分变异常
