容易误用的“新标签”及替代建议

有些标签看似语义清晰，但实际使用中极易出错，甚至比不用更糟：

• 
  

  +

  ：** 仅用于媒体及其标题 **（图片、图表、代码块、引用等），且标题必须是对该媒体的说明；别把段落标题塞进去
• ：必须带 datetime 属性（如 五月十二日），否则纯文本渲染无额外价值；日期范围需用两个 或 ISO 格式连字符
• ：表示 ** 上下文中的高亮引用 **（如搜索结果中关键词），不是强调色装饰——加粗用 ，颜色点缀用 CSS
• 
  

  /

  ：原生折叠组件，但默认无过渡动画，无障碍支持依赖 open 属性和键盘焦点管理；简单展开需求可直接用，复杂交互建议仍走 JS 控制

兼容性与 DOM 操作注意事项

语义标签本身不影响 JS 获取元素，但老版本 IE（IE8 及以下）不识别这些标签，会导致：

立即学习 “ 前端免费学习笔记（深入）”；

• CSS 无法通过标签名选择（header {……} 不生效）
• document.createElement('header') 在 IE8 需提前“注册”（用 document.createElement 遍历创建一次）
• 主流方案已统一：引入 html5shiv（仅需在 中加载），或直接放弃 IE8 支持（2024 年绝大多数业务已可行）

现代框架（React/Vue）中，JSX/ 模板语法直接写

没问题，编译后仍是标准 HTML，无需额外处理。

要不要用

？一个硬性检查点

判断是否该用