Copyediting with Semantic HTML

Web content version control often relies on word processors' change tracking. However, HTML offers built-in elements for this: <del></del>, <ins></ins>, and <mark></mark>. Combined with other elements and CSS, these provide similar functionality to Word or Google Docs.

Let's begin with <ins></ins>.

The <ins></ins> element denotes inserted text. While suggesting an addition, the text is inherently already present within the tag. The browser typically underlines inserted text. This visual cue, though potentially confused with underlines from <u></u> or links, is helpful.

Now, let's pair insertion with <del></del>, which marks deleted text.

Browsers style <del></del> with a strikethrough, similar to <s></s>, but with different semantic meanings. <del></del> indicates content removed for editing, while <s></s> signifies outdated or inaccurate information.

These semantic elements provide basic visual cues. However, they also have a cite attribute for annotating changes with a URL explaining the edit's rationale. Unfortunately, this URL isn't directly visible or clickable. While semantically valuable, CSS is needed for display and even then, clickability and copyability remain issues. Wrapping <ins></ins> and <del></del> in links doesn't clarify whether the link is part of the edit.

A more useful attribute shared by <ins></ins> and <del></del> is datetime, specifying the edit's timestamp. Though not immediately user-visible, it maintains semantic clarity.

HTML's datetime format demands precision, requiring a specific day, month, and year for <ins></ins> and <del></del> to avoid ambiguity. CSS can enhance clarity, for instance, by revealing the datetime value on hover. Checkboxes can also be used for interactive control.

Effective copyediting goes beyond adding and deleting. It involves understanding author intent. Enter the <mark></mark> element.

<mark></mark> highlights text of particular interest, usually with a yellow background.

For editor's notes, <aside></aside> can contain longer comments. Inline comments for sentence structure or word choice require ingenuity and CSS.

The <u></u> element, often avoided due to link confusion, can highlight misspellings, provided it uses a distinct color (like red) to avoid ambiguity with links.

The default browser styling for <ins></ins>, <del></del>, and <mark></mark> is helpful but potentially confusing. To enhance clarity, consider custom CSS:

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;
}

While CSS animation could enhance visual feedback, fading <del></del> content isn't straightforward due to limitations with display: none. Using visibility with a zero height and width allows smoother fading.

In conclusion, HTML provides tools for tracking edits. Careful styling and consideration of accessibility (as noted by Adrian Roselli in the comments of the original article) are crucial for effective implementation.

The above is the detailed content of Copyediting with Semantic HTML. For more information, please follow other related articles on the PHP Chinese website!