HTML中如何使用del和ins标签标注修订内容-html教程-PHP中文网

del 和 ins 是语义化修订标签，分别表示删除和插入内容，必须成对使用且需严格遵循 iso 8601 格式设置 datetime 属性，不可用于强调或随意嵌套。

html中如何使用del和ins标签标注修订内容

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><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="..."></revision>），这没问题，但底层仍应输出合规的 del/ins，否则就放弃了 HTML 原生语义带来的兼容性红利。

修订不是加个样式的事，重点在于让内容变化可追溯、可解释、可被工具识别。很多人只改了文字，却忘了填 datetime，或者把 ins 当成 em 来用——结果是看似有修订，实则没留下任何有效线索。