HTML 标签不能加 id 属性，因其是元数据容器、不参与渲染、不被浏览器映射到 DOM ID 表，故 CSS 选择器和 getElementById() 均无效；应改用子元素的 data- 属性或 name/type 等语义化标识。
HTML 标签本身不能加 id 属性 —— 浏览器不识别，DOM 中查不到，CSS 和 JS 也选不到。
为什么给 id 没用
HTML 规范里 是一个“metadata container”，不是可交互或可样式化的文档内容节点。它不参与渲染流，也不在 CSS 选择器作用域内生效（head#myid 永远匹配失败）。JS 里用 document.getElementById('myid') 查不到，因为浏览器压根不把 id 挂到 上做映射。
常见错误现象：
- 写了 ，但 document.querySelector('head[id]') 返回 null
- CSS 中写 head#main-head { display: none; } 完全无效
- Vue/React 等框架的 SSR 输出里手动加 id，结果被客户端 hydration 忽略
真需要区分头部内容？用 <meta> 或 data- 属性
如果你的目标是标记某段 内容（比如动态插入的 SEO 元信息、主题配置），正确做法是往具体子元素上打标识：
- 给
<meta name="theme-color">加data-section="theme" - 用
<script type="application/json" data-config="site"></script>替代试图给整个打标 - 如果必须 JS 控制某类
<link>或<style></style>，直接用document.querySelectorAll('link[data-role="critical-css"]')
这样既语义清晰，又保证可选中、可操作。别绕开子元素去“控制父容器”—— 不是容器，它是逻辑边界。
立即学习“前端免费学习笔记（深入）”；
哪些地方误以为能加 id，其实该换思路
典型误用场景和替代方案：
- 想用
id控制页面是否加载某段<script></script>→ 改用data-load-condition+ JS 判断，或服务端条件输出 - 想让 CSS 只作用于某个页面的
内容 → 实际应靠驱动，CSS 写.page-home link[rel="preload"] - 在 Web Components 或 Shadow DOM 中试图隔离
→是全局的，组件级头信息只能靠<meta>+ 自定义解析，或用document.adoptedStyleSheets
性能影响：强行在 上加无效 id 不会报错，但会让代码审查者多花 3 秒确认这不是 bug；兼容性上所有浏览器一致无视它 —— 这反而成了最稳定的“特性”。
真正要管住 ，得从内容组织入手：用 data- 区分来源，用 type 或 name 表达意图，别指望靠 id 把它变成一个可寻址的 DOM 节点。它本来就不是。
