使用语义 HTML 进行文字编辑

跟踪更改是比较内容版本的基本文字编辑功能。 虽然我们习惯于在文字处理文档中跟踪更改，但我们实际上拥有能够做到这一点的 HTML 元素。 我们可以在此过程中使用许多元素。 我们将重点关注的主要元素是 <del>、<ins> 和 <mark>。 但是，正如我们即将看到的那样，将它们与其他元素（包括 <u>、<aside> 和自定义标记）配对，我们可以获得与 Word、Google Docs 甚至 WordPress 等工具相同的视觉跟踪更改功能。

让我们从 <ins> 元素开始。

<ins> 指定应插入或已插入的文本。 动词时态在这里有点奇怪，因为虽然 <ins> 标签建议进行编辑，但它必须已经插入，因为它位于 <ins> 标签中。 这有点像说，“嘿，插入这个实际上已经存在的元素。”

注意浏览器如何为我们对插入的文本加下划线。 拥有这种视觉指示非常不错，即使它可能会被误认为是使用 <u> 元素、链接或 CSS text-decoration 属性加下划线。

让我们将插入与 <del> 元素配对，该元素建议应删除或已删除的文本。

浏览器将 <del> 的样式设置为删除线 (<s>) 元素，但它们的含义不同。 <del> 用于应删除/编辑掉的内容（例如上面那个令人毛骨悚然的部分），而 <s> 用于不再真实或不准确的内容（例如写信人认为该部分会很讨人喜欢）。

好的，很棒，所以我们有了这些语义 HTML 元素，并且它们为插入或删除的内容提供了一些轻微的视觉指示。 但是，您可能不知道有关这些元素的一件事：它们接受一个 cite 属性，可用于注释更改。

cite 采用格式正确的 URL，该 URL 指向某个地方，可以找到更改原因。 该地方甚至可以是现有页面上的一个锚点。

这很酷，但问题是引文 URL 实际上是 不可见 且 不可点击 的。 我们可以使用一些 CSS 技巧来显示它。 但即使那样，它仍然不会在点击时带您到引文……也不能复制它。

也就是说，它确实在语义上明确了什么是编辑内容，什么是编辑内容以外的内容。 如果我们将 <ins> 和 <del> 包裹在链接中（甚至反过来），它仍然不清楚链接是应该作为编辑内容的一部分还是不是。

但是！<ins> 和 <del> 都有第二个属性：datetime。 这就是我们用来指示 何时 进行了编辑的方式。 同样，这不会立即向用户提供，但它在语义上保持了什么是编辑内容，什么是编辑内容以外的内容。

HTML 的 datetime 格式作为机器可读的日期和时间，需要精确性，因此可能会有点，嗯，古怪，但其一般规则并不难理解。 值得注意的是，虽然 datetime 用于其他元素，例如 <time>，但在 <ins> 和 <del> 上以不包含至少特定日期、月份和年份的方式格式化值将是有问题的，因为它会掩盖编辑的日期和时间，而不是提供清晰度。

我们可以通过更多 CSS 技巧来使内容更清晰。 例如，我们可以在悬停时显示 datetime 值

复选框也有效

但好的编辑远不止简单地添加和删除内容。 它会提出问题并弄清楚作者到底想要表达什么。（对我个人而言，它也是为了让我免受令人尴尬的拼写和语法错误的困扰）。

所以，让我们来认识 <mark> 元素。

<mark> 指出对读者特别重要的文本。 它通常以黄色背景呈现，位于内容后面。

如果您是编辑，并希望向作者（让我们称那个人为 Stanley Meagher）写一张便条，提供一些建议，使 Stanly 的信更棒（或者至少不那么令人毛骨悚然），并且这张便条足够大，足以容纳流内容（即块级元素），那么这张便条可以是一个 <aside> 元素。

<aside class="note">Mr. Meagher, I highly recommend you remove this list of preferred cheeses and replace it with things you love about the woman you are writing to. While I'm sure there are many people for whom your list would be interesting if not welcome, that list rarely includes a romantic interest in the midst of your profession of love. Though, honestly, if she is as perfect for you as you believe, it may be the exact thing you need to test that theory.</aside>

但通常您会想要执行一些内联操作，以指出某些内容或对句子结构或词语选择发表评论。 不幸的是，HTML 中没有内置的方法来做到这一点，但只要稍加巧妙和一些 CSS，您就可以添加便条。

<span class="note">Cheesecake isn't really a "cheese"</span>

<u> 元素——长期以来一直是 Web 开发人员的禁忌，因为他们担心它会与链接混淆——实际上是有用的（我知道，我也很惊讶）。 它可以用来指出拼写错误（显然，波浪线和红色下划线不是标准的浏览器渲染功能）。 它仍然不应该在任何可能与实际链接混淆的地方使用，并且在使用时，它绝对应该使用与链接不同的颜色。 红色可能适合表示错误。

<p>Please, <u>Lura</u> tell me your answer. Will you wear my mathlete letter jacket?</p>

正如我们在本文中所看到的，浏览器对我们迄今为止介绍的元素的默认样式无疑很有帮助，但也可能令人困惑，因为它们与其他类型的内容几乎无法区分。 如果用户不知道文档正在显示编辑，那么样式可能会被用户误解或误解。 因此，我建议使用一些附加或替代样式，以帮助明确说明发生了什么。

ins {
  padding: 0 0.125em;
  text-decoration: none;
  background-color: lightgreen
}
del {
  padding: 0 0.125em;
  text-decoration: none;
  background-color: pink;
}
mark {
  padding: 0 0.125em;
}
.note {
  padding: 0 0.125em;
  background-color: lightblue;
}
aside.note {
  padding: 0.5em 1em;
}
u {
  text-decoration: none;
  border-bottom: 3px red dashed;
}

每当我学习 HTML 中的新内容时，我都会问自己同样的问题：如何不必要地为它添加动画？

如果我们可以淡入更改，这样当您点击复选框时，编辑也会淡入，那就太好了。

<del> 标签中的便条和文本不能像背景颜色和填充那样使用 CSS 淡入。 此外，display: none 会导致完全没有淡入效果。 一切都会弹回原位，包括背景。 但是，将 CSS visibility 属性与 0 的 height 和 width 值组合使用，允许背景顺利淡入。

---

就是这样：规范和一些跟踪 Web 上编辑内容的策略（以及一个极好的示例，说明如何 不 写情书（或者，也许，如何写一封如此完美的信，以至于积极回应它表示你们是灵魂伴侣））。

编辑：Adrian Roselli 在评论中添加了一些关于 可访问性的优秀信息。 在生产环境中实施这些想法之前，请务必考虑这些建议。