HTML中del和ins标签标注文档修订的用法-html教程-PHP中文网

del和ins是html中唯二原生语义化编辑标记，专用于标识可追溯编辑意图的内容增删，需配合合法iso 8601时间戳与有效cite链接，不可用于纯视觉强调或软删除。

html中del和ins标签标注文档修订的用法

del 和 ins 不是样式标签，别当或用

它们的核心价值是语义，不是划线或下划线。屏幕阅读器会读出“已删除”“已插入”，搜索引擎可能据此识别内容更新，Git diff 工具或 CMS 版本对比系统也依赖这些标签提取变更。如果只想要视觉效果，用 text-decoration: line-through 或 text-decoration: underline 配合 span 更干净。

常见翻车点：

用 <ins></ins> 标运营文案“限时加赠！”，其实没发生编辑行为——这属于误导性语义
把 <del datetime="2024-01-01">旧价格</del> 塞进商品页但后端没同步软删除逻辑，导致用户仍能下单已标删的价格
在富文本编辑器里粘贴后只剩 <ins>新描述</ins>，闭合标签丢失，后续 JS 查询 document.querySelectorAll('ins') 漏节点

datetime 属性必须填对，否则等于没写

datetime 是让机器理解“什么时候改的”唯一依据。不填、填错格式、填成当前时间戳（而非真实修订时刻），都会让语义失效。

合规写法只有两种：

datetime="2026-04-28T09:15:22Z"（UTC 时间，推荐）
datetime="2026-04-28T17:15:22+08:00"（带本地时区）

这些写法会被浏览器忽略：

datetime="2026-04-28"（缺时分秒）
datetime="2026/04/28 09:15"（非 ISO 8601）
datetime="now()" 或 datetime="{{ now }}"（模板变量未渲染为合法字符串）

包裹块级元素时 display 必须显式声明

<ins></ins> 和 <del></del> 默认是 inline 元素，但 HTML 规范允许它包含 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<ul></ul> 等块级内容。问题在于：浏览器不会自动处理换行、margin 塌陷或 list-style 重置。

错误写法：
<ins><p>这是新增段落</p> <ul><li>第一项</li></ul></ins>
结果常是列表项顶到段落末尾、无缩进、无间距。

稳妥解法（二选一）：