纯 html 本身不具备高扩展性，其扩展性依赖语义化结构与现代工具链配合；语义标签明确内容层级与用途，嵌套深度建议≤3层；aria补足原生语义缺口；data-*属性为js组件提供稳定dom定位；禁用内联style以保障主题与响应式能力。
纯 HTML 无法“打造高扩展性框架”——它只是标记语言，不提供逻辑、样式封装或模块机制；真正的扩展性来自语义化结构 + 与现代工具链（如 ES Modules、CSS Custom Properties、Web Components）的配合方式。
用 <main></main>、<section></section>、<article></article> 替代无意义的 <div>
<p>语义标签不是“写得好看”，而是让屏幕阅读器、搜索引擎和后续维护者立刻理解内容层级。比如 <code><section></section> 表示一个有标题的主题块，而 <div> 什么也不承诺。
<ul>
<li>
<code><header></header> 只用于页面或 <article></article> 的头部区域，别把它当“顶部导航容器”滥用
<aside></aside> 必须与主内容存在附属关系（如侧边栏推荐、术语解释），不能塞广告位或无关链接<main> → <article> → <section></section></article></main>，再深会削弱可读性和 CSS 选择器可控性通过 role 和 aria- 补足 HTML 原生语义缺口
HTML5 没有 <tablist></tablist> 或 <dialog></dialog> 的原生交互语义（<dialog></dialog> 已支持但兼容性有限），必须靠 ARIA 显式声明。
- 手写 Tab 切换组件时，给容器加
role="tablist"，每个 tab 项加role="tab"和aria-selected="true/false" - 模态框需同时设置
role="dialog"、aria-modal="true"和aria-labelledby指向标题 ID - 避免
aria-hidden="true"和视觉可见内容共存——这会让屏幕阅读器跳过本应可访问的内容
为 JavaScript 驱动组件预留可预测的 DOM 结构
前端框架常因“模板抽象”导致结构不可控，而纯 HTML 框架反而需要更严格的约定，否则 JS 逻辑会变得脆弱。
- 组件根节点统一用
data-component="xxx"（如data-component="search-bar"），而非依赖 class 名，避免样式类被误删或重命名 - 关键子节点用
data-ref标记：如<input data-ref="input-field">、<button data-ref="submit-btn"></button> - 禁用内联
style属性——它会覆盖 CSS 变量和媒体查询，破坏主题切换与响应式能力
真正影响扩展性的从来不是标签选得多漂亮，而是结构是否经得起自动化解析（比如构建时提取 data-component 注册表）、是否允许无障碍测试工具稳定定位、以及能否在不改 HTML 的前提下，仅靠 CSS 变量和 JS 模块替换实现主题/行为变更。这些点一旦在首屏 HTML 里写死，后面就很难松动。
