<ins>和<del>语义为标记文档中“已插入”和“已删除”的编辑行为，属修订痕迹而非样式工具；浏览器默认下划线/删除线仅为渲染惯例，其核心价值在于可访问性与语义化表达。

ins 和 del 的语义不是“加下划线”或“加删除线”

它们的本意是标记文档中「插入」和「删除」的编辑行为，属于修订痕迹（revision markup），不是样式工具。浏览器默认用 ins 加下划线、del 加删除线，只是渲染惯例，不是语义本身。若仅为了视觉效果而滥用，会破坏可访问性（如屏幕阅读器会读出“已删除”“已插入”）和 SEO 语义权重。

屏幕阅读器如何处理 ins/del

主流读屏软件（NVDA、VoiceOver）会明确播报语义：ins 通常读作“插入：xxx”，del 读作“已删除：xxx”。这意味着——

• 把 del 当作「隐藏文字」用（比如遮盖敏感词但不真删），用户仍能听到原内容
• 在表单或按钮里嵌套 del，可能触发冗余播报，干扰操作流
• 若用 CSS 移除了 text-decoration 但没移除标签，语义和视觉就彻底割裂，违反 WCAG 1.3.1 原则

什么时候该用 ins/del，而不是 span + class

只在内容存在真实编辑历史时使用：

• 协同文档中标记他人修改（如 Git diff 渲染到网页）
• 法律/合同文本的修订版本对比（需保留原始与变更痕迹）
• 教学场景中展示代码或文案的迭代过程（例如“旧写法 → foo() → 新写法 → bar()”）
• 避免用于纯 UI 装饰：比如价格划掉再标折扣价，应改用 span + aria-hidden="true" 配合视觉删除线

自定义样式时必须重置 text-decoration 并补充语义

如果设计要求去掉默认线型（比如用背景色高亮替代），不能只写 ins { text-decoration: none; }——这会让语义消失于视觉，又未提供替代方案。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

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

正确做法是：

• 用 text-decoration: none 关闭默认线
• 通过 background-color 或 border-bottom 提供视觉提示
• 为 ins 添加 aria-label="新增内容"（仅当视觉提示不足以传达语义时）
• 确保键盘焦点和屏幕阅读器仍能定位到该元素（不要设 display: none 或 visibility: hidden）

真正难的不是加那条线，而是让线背后的意思，在所有用户眼里都一致。