语义化是html可维护性的底线，而非加分项；滥用导致结构不可读、协作困难、js查询不稳定，而等标签提供标准dom接口与明确语义，保障可访问性、seo及长期维护效率。
语义化不是“加分项”，而是HTML可维护性的底线。不改结构，只调样式或加JS，迟早会掉进“改一处崩三处”的坑。
为什么 <div> 套 <code><div> 是可维护性杀手<p>当整个页面由几十个 class="container"、class="wrap"、class="box" 构成时，没人能靠扫一眼 HTML 就判断出哪个区块负责导航、哪个是独立文章、哪个该被 SEO 抓取。开发者必须来回切 CSS 文件、查 JS 绑定逻辑、翻设计稿才能确认作用域——这已经不是写代码，是在考古。</p>
<p>更麻烦的是，这类结构一旦进入多人协作或交接环节，<code>class="header-v2-fix" 和 class="header-new-2024" 同时存在就成常态，没人敢删，也不敢动。
<div> 不带任何语义，浏览器、屏幕阅读器、搜索引擎、新同事都得靠猜<li>类名易冲突、易过时、易被误删；而 <code><header></header>、<nav></nav>、<main></main> 是标准 DOM 接口，JS 里直接 document.querySelector('main') 就能稳稳拿到主体内容- W3C 明确要求每页最多一个
<main></main>，违反这条，无障碍检测工具（如 axe）会直接报错
<section></section>、<article></article>、<aside></aside> 到底怎么选
选错标签比不用还糟——比如把商品列表塞进 <aside></aside>，等于告诉辅助技术“这段内容不重要”，SEO 也会降权。
- 用
<article></article> 包裹**可独立分发、有明确作者和时间的内容单元**，如博客正文、新闻条目、用户评论
- 用
<section></section> 表达**主题相关的一组内容**，必须带标题（<h2></h2> 或更高），比如“热门推荐”“用户反馈”“配置说明”
- 用
<aside></aside> 放**与主内容相关但可剥离的补充信息**，如侧边栏广告、作者简介、术语解释框；它不该是布局容器
- 避免把
<section></section> 当 <div> 用：没有标题的 <code><section></section> 是无效语义，部分读屏软件会忽略data- 属性比 class 更适合模块锚点
靠 class="header" 定位模块，在大型项目里极易失效：CSS 可能覆盖、JS 可能误删、设计师改稿时顺手删了 class 却没通知前端。
真正稳定的锚点是 data- 属性，它不参与样式、不触发渲染，只对 JS 和构建流程可见。
- 给每个模块根元素加
data-module="header"、data-module="product-list"
- 配合
data-version="1.3"，CI 流程可自动校验 HTML 片段是否匹配文档版本
- JS 查询时用
document.querySelectorAll('[data-module="header"]')，比靠 class 名更可靠
- 别用
id 做模块标识——同一页面多次渲染同个组件（如商品卡片循环）会导致 id 重复，document.getElementById() 只返回第一个
嵌套超过三层就该警觉
DOM 树过深不仅拖慢渲染，更让维护成本指数上升。一个 <div><div><div><div>
<p> 结构，连审查元素都要点四下才能定位到目标文本节点。</p>
<ul>
<li>检查现有结构：Chrome DevTools → Elements → 右键节点 → “Break on” → “Attribute modifications” 能快速暴露冗余包裹层</li>
<li>合并相邻的语义一致容器：两个连续的 <code><section></section> 若主题相同，考虑合并并用 <h2></h2> 分隔子区块
- 单个父容器下子元素超 50 个（如长列表）时，用
DocumentFragment 分批插入，避免强制同步重排
-
<template></template> 比 display: none 的 <div> 更干净：它不参与渲染、不计算样式、JS 克隆后才激活<p>最常被忽略的点：语义化不是贴标签比赛。一个 <code><nav></nav> 里塞满非导航链接，或给广告位套 <main></main>，反而破坏结构可信度。可维护性的核心，是让 HTML 自己说话，而且说得准。
<div> 不带任何语义，浏览器、屏幕阅读器、搜索引擎、新同事都得靠猜<li>类名易冲突、易过时、易被误删；而 <code><header></header>、<nav></nav>、<main></main> 是标准 DOM 接口，JS 里直接 document.querySelector('main') 就能稳稳拿到主体内容<main></main>，违反这条，无障碍检测工具（如 axe）会直接报错
<section></section>、<article></article>、<aside></aside> 到底怎么选
选错标签比不用还糟——比如把商品列表塞进 <aside></aside>，等于告诉辅助技术“这段内容不重要”，SEO 也会降权。
- 用
<article></article>包裹**可独立分发、有明确作者和时间的内容单元**，如博客正文、新闻条目、用户评论 - 用
<section></section>表达**主题相关的一组内容**，必须带标题（<h2></h2>或更高），比如“热门推荐”“用户反馈”“配置说明” - 用
<aside></aside>放**与主内容相关但可剥离的补充信息**，如侧边栏广告、作者简介、术语解释框；它不该是布局容器 - 避免把
<section></section>当<div> 用：没有标题的 <code><section></section>是无效语义，部分读屏软件会忽略data- 属性比 class 更适合模块锚点
靠
class="header"定位模块，在大型项目里极易失效：CSS 可能覆盖、JS 可能误删、设计师改稿时顺手删了 class 却没通知前端。真正稳定的锚点是
data-属性，它不参与样式、不触发渲染，只对 JS 和构建流程可见。- 给每个模块根元素加
data-module="header"、data-module="product-list" - 配合
data-version="1.3"，CI 流程可自动校验 HTML 片段是否匹配文档版本 - JS 查询时用
document.querySelectorAll('[data-module="header"]')，比靠 class 名更可靠 - 别用
id做模块标识——同一页面多次渲染同个组件（如商品卡片循环）会导致 id 重复，document.getElementById()只返回第一个
嵌套超过三层就该警觉
DOM 树过深不仅拖慢渲染，更让维护成本指数上升。一个
<div><div><div><div> <p> 结构，连审查元素都要点四下才能定位到目标文本节点。</p> <ul> <li>检查现有结构：Chrome DevTools → Elements → 右键节点 → “Break on” → “Attribute modifications” 能快速暴露冗余包裹层</li> <li>合并相邻的语义一致容器：两个连续的 <code><section></section>若主题相同，考虑合并并用<h2></h2>分隔子区块 - 给每个模块根元素加
- 单个父容器下子元素超 50 个（如长列表）时，用
DocumentFragment分批插入，避免强制同步重排 -
<template></template>比display: none的<div> 更干净：它不参与渲染、不计算样式、JS 克隆后才激活<p>最常被忽略的点：语义化不是贴标签比赛。一个 <code><nav></nav>里塞满非导航链接，或给广告位套<main></main>，反而破坏结构可信度。可维护性的核心，是让 HTML 自己说话，而且说得准。
