html标签本身才是语义化核心，id仅用于唯一锚点、表单关联或js精确控制，class用于样式复用与逻辑分组；滥用id/class会削弱语义，如冗余且干扰辅助技术，应优先使用等语义标签。
直接给结论：id 和 class 不是语义化的核心，HTML 标签本身才是；id 用于唯一锚点或 JS/CSS 精准控制，class 用于样式复用和逻辑分组，二者滥用反而会削弱语义。
为什么 <div id="header"> 是错的起点<p>语义化不是“加了 id/class 就有语义”，而是优先选对标签。比如 <code><header></header> 已自带语义，再套 <div id="header"> 属于冗余嵌套，还可能干扰屏幕阅读器识别层级。<ul>
<li>浏览器和辅助技术靠标签名（<code>nav、article、time）推断内容角色，不靠 id 值
id="header" 在 CSS 中写成 #header，但若页面出现多个 header（比如嵌套组件），id 就违反唯一性约束document.querySelector('header') 比 document.getElementById('header') 更健壮、更语义什么时候必须用 id？只在三个场景下
id 的本质是全局唯一标识符，不是样式钩子。滥用会导致冲突和维护困难。
- 作为
<a href="#section2"></a>的跳转目标，此时id="section2"是必需的 - 关联表单控件与说明文字：
<label for="email">Email</label><input id="email"> - 被 JavaScript 显式调用且需确保唯一性，如
document.getElementById('modal-overlay')—— 但更推荐用data-*属性 +querySelector替代
class 的命名该怎么避坑
class 名不是写给机器看的，是写给人（包括未来的你）和 CSS/JS 共同理解的契约。语义混乱的 class 名会让 DOM 树“看起来有结构，实际难维护”。
- 避免纯样式名：
class="red-text big-font"—— 一旦设计改色，这个 class 就失效或误导 - 避免过度具体：
class="product-card-featured-on-homepage"—— 复用性归零，也暴露实现细节 - 推荐 BEM 风格或语义分组名：
class="card card--featured"或class="search-form search-form--compact" - 多个 class 可叠加表达不同维度：
<article class="post post--draft author--staff"></article>，比单个class="draft-staff-post"更正交、易组合
构建 DOM 树时的真实检查清单
写完一段 HTML，快速过一遍这四条，比反复纠结 id/class 更有效：
- 是否已用最具体的语义标签？
<time datetime="2024-03-15">3月15日</time>比<span class="date"></span>强十倍 -
id是否全页面唯一？有没有两个id="sidebar"？浏览器不会报错，但 JSgetElementById只返回第一个 -
class名能否脱离当前 CSS 文件仍可读？换成同事来维护，ta 能猜出class="teaser"是什么作用吗？ - 是否把逻辑耦合进 class？比如
class="js-dropdown-trigger"—— 这类 class 应该用data-js="dropdown-trigger"替代，让关注点分离
真正难的不是怎么加 id/class，而是克制住“我想标记它”的冲动，先问一句：这个信息，HTML 标签本身能不能说清楚？
