del 和 ins 是语义化修订标签，分别表示删除和插入内容，必须成对使用且需严格遵循 ISO 8601 格式设置 datetime 属性，不可用于强调或随意嵌套。
del 和 ins 标签的基本语义与使用前提
del 和 ins 不是装饰性标签，而是语义化标记：前者表示已被删除的内容，后者表示新插入的内容。浏览器默认会为 del 加删除线、ins 加下划线，但这只是渲染表现，关键在传达「修订动作」本身。
- 必须成对出现在同一上下文中才有意义（比如对比两个版本的文案）
- 不适合用作强调或高亮——那是
strong或mark的职责 - 如果只是临时加样式，直接用
span+ class 更轻量；只有明确表达“这是被删掉/新加上的文字”，才该用它们
什么时候该用 datetime 属性？
datetime 属性不是可选的“锦上添花”，而是提升可访问性和机器可读性的关键字段：
- 屏幕阅读器可能读出时间信息，帮助视障用户理解修订节奏
- 某些 CMS 或文档比对工具依赖它做版本排序或差异回溯
- 时间格式必须严格符合 ISO 8601：
2024-05-20T14:30:00Z（UTC）或2024-05-20T14:30:00+08:00（带时区）
<p>原句：我们将在<del datetime="2024-05-15T09:00:00Z">下周三</del><ins datetime="2024-05-18T16:20:00+08:00">下周五</ins>开会。</p>
注意：不要写成 datetime="2024/05/15" 或 datetime="15 May 2024"，这些不被规范支持，部分解析器会忽略。
嵌套使用时的常见错误
del 和 ins 可以嵌套，但容易引发歧义和渲染混乱：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 不要跨块级元素嵌套：比如在
p里开始del，到下一个p才闭合——HTML 解析器会自动截断，行为不可靠 - 避免
del包ins或反之，除非你真在模拟“删掉一段后又补了一段”的复合操作（极少见） - 更稳妥的做法是把修订限制在行内范围，必要时拆成多个相邻的
del/ins
<!-- ✅ 推荐：各自独立，边界清晰 --> <p>价格从<del>¥199</del>调整为<ins>¥179</ins>。</p> <p><!-- ❌ 风险：嵌套导致语义模糊，且某些编辑器无法正确反向还原 --> <p>价格从<del>¥<ins>199</ins></del>调整为<ins>¥<del>199</del>179</ins>。</p>
与 CSS 和 JavaScript 协同时的注意事项
默认样式可以覆盖，但别破坏语义意图：
- 用
text-decoration: none去掉del的删除线？可以，但请同时用其他视觉方式（比如背景色）表明这是已删除内容，否则语义丢失 - 用 JS 动态插入
ins时，记得手动设置datetime，否则值为空字符串或当前时间（取决于实现），不利于后续审计 - 若页面需支持打印，检查 CSS 中是否意外设置了
text-decoration: none且未在@media print中恢复——否则修订痕迹在纸质版里完全不可见
有些团队会封装成自定义组件（如 <revision type="delete" timestamp="...">），这没问题，但底层仍应输出合规的 del/ins，否则就放弃了 HTML 原生语义带来的兼容性红利。
修订不是加个样式的事，重点在于让内容变化可追溯、可解释、可被工具识别。很多人只改了文字，却忘了填 datetime，或者把 ins 当成 em 来用——结果是看似有修订，实则没留下任何有效线索。
