Semantic HTML for Tracking Edits
Copyediting typically conjures images of tracked changes in word processors, but the web has its own semantic toolkit for this purpose. The core elements are <del>, <ins>, and <mark>, yet pairing them with other HTML elements and a dash of CSS can replicate features found in Google Docs or WordPress.
Insertions and Deletions
The <ins> element marks text that should be or has been inserted. Though the verb tense is odd—the content technically already exists in the document—the tag signals an intended addition. Browsers render inserted content with an underline by default, which provides a visual cue. However, that underline can easily be confused with a link or the CSS text-decoration property.
For removals, the <del> element displays with a strikethrough. While it looks like the <s> element, their meanings differ: <del> indicates content to be removed during editing, while <s> marks content that’s no longer true or accurate.
Both elements share two useful attributes. The cite attribute accepts a URL that points to a resource explaining why the change was made—even an anchor on the same page. Yet this URL isn’t visible, clickable, or copyable without CSS tricks. The formatting date and time is in the datetime attribute, which requires a precise machine-readable structure. Including at least a year, month, and day is critical to avoid obscuring the edit chronologymatters.
These values aren’t immediately visible to users, but CSS can expose them. For instance, the datetime value can be displayed on hover, or checkboxes can be used as toggles for revealing changes.
While semantic clarity is maintained, neithercitenordatetimemakes it clear whether a wrapping link is part of the edited content itself.
Marking and Commenting
Beyond additions and removals, good copyediting involves questions and suggestions. The <mark> element highlights text of special interest to the reader, typically with a yellow background. When an editor’s note is substantial enough to warrant block-level flow content, wrapping it in an <aside> element is appropriate for a standalone comment.
<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>For inline observations about sentence structure or word choice, no native HTML element exists. A bit of CSS can create a visually distinct inline note.
The <u> element, often avoided due to confusion with links, serves a purpose when marking misspellings. Browser default undirected squiggly underlines aren’t always rendered, so this element provides an explicit signal. It’s crucial, however, to style <u>’s color distinctly from links—red is a reasonable choice for errors—to avoid confusion.
<span class="note">Cheesecake isn't really a "cheese"</span><p>Please, <u>Lura</u> tell me your answer. Will you wear my mathlete letter jacket?</p>Animating the Edits
The default browser styling for these elements is functional, but one might want a more polished presentation. Fading in edits when toggled by a checkbox creates a smoother experience. The tricky part is that text inside <del> and inline notes can’t be faded like background colors. Using display: none results in no fade at all. However, combining the CSS visibility property with a set height and width of 0 allows background colors and paddings to transition smoothly.
Practical Notes
Before deploying these techniques in production, consider accessibility. Additional styling may help users unfamiliar with the conventions of marked-up documents understand the presented changes, as default renderings can be easily misinterpreted.
