必须配h2～h6标题，否则语义断裂、可访问性受损；判断用section还是div的唯一标准是内容能否独立成文；避免滥用、错嵌、无标题或替代更具体语义标签。
为什么不能当用
因为浏览器和辅助技术会把 <section></section> 当作一个有独立主题、可被单独引用或分发的内容单元，不是视觉容器。错用会导致结构解析失败、SEO 权重分散、屏幕阅读器跳过整块内容。
-
<section></section> 必须自带标题（<h2></h2>–<h6></h6>），否则语义失效——没标题的 <section></section> 和 <div> 没区别，但更误导
<li>常见误用：用 <code><section></section> 包裹整个用户列表，但每条记录才该是独立 <article></article>；或用它包搜索框、登录入口，这些应归入 <header></header> 或 <aside></aside>
- 验证方法：在 Chrome DevTools 的「Accessibility」面板里看「Landmarks」，
<section></section> 会显示为“Section”，若大量无标题的 section 出现，说明语义已混淆
如何识别并替换废弃标签
<font></font>、<center></center>、<u></u>、<b></b> 这类标签在 HTML5 中已被弃用，它们只管样式、不表达含义，且与现代 CSS 和可访问性要求冲突。
-
<b></b> → 改用 <strong></strong>（强调重要性）或 <span class="highlight"></span>（纯视觉加粗）
-
<u></u> → 移除，下划线应由 CSS 控制（text-decoration: underline），否则会被屏幕阅读器误读为拼写错误
-
<font></font> 和 <center></center> 必须删，没有替代标签——全部交给 CSS 的 font-family、text-align 等属性处理
- 检查方式：全局搜索
<font>、<code><center>、<code><u></u>，再用 W3C Validator 提交 HTML，它会明确标出废弃标签位置
class/id 命名暴露语义混乱
当 class 名出现 div-header、section-wrapper、card-container-inner 这类词，本质是在补救语义缺失——HTML 结构本不该靠 class 来“解释”自己。
- 删掉所有带
-wrapper、-container、-box 的 class，它们是 <div> 泛滥的副产品
<li>禁止用 class 模拟语义标签：比如 <code>class="nav" 应直接换成 <nav></nav>；class="main" 必须改为 <main></main>
- 命名统一用 kebab-case，且只描述内容本身（
user-profile-card），不描述布局（left-sidebar）、状态（active-item）或视觉（red-button）
DOM 深度超标时怎么定位冗余层
嵌套超过 6 层的 DOM 节点会显著拖慢渲染和 JS 查询速度，而问题往往藏在模板引擎输出或手写重复结构里。
- 在 Chrome DevTools 的「Elements」面板中右键节点 → 「Break on」→ 「Attribute modifications」，观察哪些
<div> 是 JS 动态插入却没实际用途的
<li>用 <code>document.querySelectorAll('div').length 统计页面 div 总数，若 >150 且多数没 id/class，基本就是冗余
- 重点清理：CMS 模板里自动包裹的
<div class="field">、JS 渲染前的空占位 <code><div id="app"></div> 外又套一层 <div class="wrapper">
语义混淆不是写得不够多，而是每个标签都在回答“它是什么”，而不是“它看起来像什么”。最容易被忽略的是：删掉一个 <code><div> 后，如果发现 CSS 样式崩了，那问题不在 HTML，而在 CSS 过度依赖 class 名而非语义层级。</div>
用
因为浏览器和辅助技术会把 <section></section> 当作一个有独立主题、可被单独引用或分发的内容单元，不是视觉容器。错用会导致结构解析失败、SEO 权重分散、屏幕阅读器跳过整块内容。
-
<section></section>必须自带标题（<h2></h2>–<h6></h6>），否则语义失效——没标题的<section></section>和<div> 没区别，但更误导 <li>常见误用：用 <code><section></section>包裹整个用户列表，但每条记录才该是独立<article></article>；或用它包搜索框、登录入口，这些应归入<header></header>或<aside></aside> - 验证方法：在 Chrome DevTools 的「Accessibility」面板里看「Landmarks」，
<section></section>会显示为“Section”，若大量无标题的 section 出现，说明语义已混淆 -
<b></b>→ 改用<strong></strong>（强调重要性）或<span class="highlight"></span>（纯视觉加粗） -
<u></u>→ 移除，下划线应由 CSS 控制（text-decoration: underline），否则会被屏幕阅读器误读为拼写错误 -
<font></font>和<center></center>必须删，没有替代标签——全部交给 CSS 的font-family、text-align等属性处理 - 检查方式：全局搜索
<font>、<code><center>、<code><u></u>，再用 W3C Validator 提交 HTML，它会明确标出废弃标签位置 - 删掉所有带
-wrapper、-container、-box的 class，它们是<div> 泛滥的副产品 <li>禁止用 class 模拟语义标签：比如 <code>class="nav"应直接换成<nav></nav>；class="main"必须改为<main></main> - 命名统一用 kebab-case，且只描述内容本身（
user-profile-card），不描述布局（left-sidebar）、状态（active-item）或视觉（red-button） - 在 Chrome DevTools 的「Elements」面板中右键节点 → 「Break on」→ 「Attribute modifications」，观察哪些
<div> 是 JS 动态插入却没实际用途的 <li>用 <code>document.querySelectorAll('div').length统计页面 div 总数，若 >150 且多数没 id/class，基本就是冗余 - 重点清理：CMS 模板里自动包裹的
<div class="field">、JS 渲染前的空占位 <code><div id="app"></div>外又套一层<div class="wrapper"> 语义混淆不是写得不够多，而是每个标签都在回答“它是什么”，而不是“它看起来像什么”。最容易被忽略的是：删掉一个 <code><div> 后，如果发现 CSS 样式崩了，那问题不在 HTML，而在 CSS 过度依赖 class 名而非语义层级。</div>
如何识别并替换废弃标签
<font></font>、<center></center>、<u></u>、<b></b> 这类标签在 HTML5 中已被弃用，它们只管样式、不表达含义，且与现代 CSS 和可访问性要求冲突。
class/id 命名暴露语义混乱
当 class 名出现 div-header、section-wrapper、card-container-inner 这类词，本质是在补救语义缺失——HTML 结构本不该靠 class 来“解释”自己。
DOM 深度超标时怎么定位冗余层
嵌套超过 6 层的 DOM 节点会显著拖慢渲染和 JS 查询速度，而问题往往藏在模板引擎输出或手写重复结构里。
