#30DaysofHTML Day 11: < s >, < mark >, < ins >, and < del >
Marking up edits and drawing attention
Four elements in one day! It's a lot for one email, but there are several themes that tie these elements together.
〽️ <mark> draws attention to specific text. Its default styling is a yellow highlight.
🪧 <s> is for strikethrough. This is designed for information which has changed, but you still want to see what was there previously. It includes a line through the text by default.
✔️ <ins> is specifically for editing, adding text to the document. It's underlined by default. Ugh.
❌ <del> is specifically for editing also, indicating that text was removed from the document. It also has a line through it by default.
Why combine these in a single day? <s> and <del> are very similar in their purpose and need further explanation. <ins> and <del> are for editing specifically. <mark> might be the easiest to explain, but it has similar accessibility issues to the other elements, so it makes sense to present this at the same time.
<mark>: Draw attention
Sometimes you need to draw attention to certain text. That text is relevant, but perhaps not important enough to justify <strong> or <em>.
<p><strong>Warning</strong>: Drinking too much coffee may lead to <mark>sleepless nights</mark>.</p> You may also use <mark> in a quotation (<blockquote> or <q>) to bring attention to certain parts of a passage that might not have been emphasized in the original text.
<blockquote cite="https://www.amazon.com/gp/product/1568302894/">
<p><cite>Creating Killer Web Sites</cite> is the first true design book for the Web. ...you'll find this book invaluable for all aspects of design: ... <mark>why you should avoid using most standard HTML tags</mark>... </p>
<footer>Description of <cite>Creating Killer Websites</cite> by David Siegal (1996)</footer> </blockquote> <mark> may also be used to identify search terms in a page of search results.
Other use cases are listed at MDN and WHATWG.
<s>: Indicating information has changed
Sometimes things change. Prices increase or decrease. Tickets and featured restaurant entrees get sold out. We make silly comments and think better of them, but still want to leave the silly comment. <s>, the strikethrough element, is appropriate for all of these.
<p>Purchase a ticket for <s>$100</s> <s>$50</s> $10!</p> In other words, this isn't for editing. We want you to be aware that things have changed, and that's part of the story we're telling.
<ins> and <del>: Editing with HTML
The concept of tracking changes is found in document editors, databases, websites, and GitHub. Why not HTML? Sure, why not!
That's what <ins> (insertion) and <del> (delete) are for. These indicate permanent changes to the document. Or at least, permanent enough for now.
<p>John's current employer is <del>Google</del> <del>Microsoft</del> <ins>Yahoo</ins>.</p> ⛔️ By default, browsers draw a line through deleted text (just like <s>) and 😠 underline 😠 the inserted text. Yuck. As a result, many developers use CSS to change these default stylings to a GitHub-like pale red <del> and pale green <ins>, paired with a symbol to indicate addition and subtraction of content. See MDN's CSS pane for an example of this (with added + and - symbols for accessibility).
Want even better examples of these?
✅ ✅ ✅ We strongly recommend John Rhea's article at CSS Tricks, Copyediting with Semantic HTML. Bravo!
Why we grouped these four elements: Accessibility considerations
Even though these four elements communicate semantics, they are not necessarily recognized and read by screen readers. For example, someone using a screen reader would hear all of those prices read out loud:
<p>Purchase a ticket for <s>$100</s> <s>$50</s> $10!</p> becomes, “Purchase a ticket for $100 $50 $10!”
Indeed, in the MDN documentation for each element, there's a section with a similar CSS-based solution for this issue. (They vary only in the value of the content property.) For example, here is the suggestion for <s> from MDN:
s::before, s::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
s::before {
content: " [start of stricken text] ";
}
s::after {
content: " [end of stricken text] ";
} The first declaration visually hides the text generated by the second and third declarations, which is intended to be aural content for screen readers.
✅ ✅ ✅ We strongly recommend Adrian Rosseli's Tweaking Text-Level Styles for more detailed information about how this works.
Commonly used attributes for <ins> and <del>
It's lovely that we know information was inserted or deleted. But when? And why? That is what the datetime and cite attributes are for.
⛔️ ⛔️ ⛔️ Earlier versions of this post and the daily email called the datetime attribute the timedate attribute instead. Apologies for the error, which has been fixed here. ⛔️ ⛔️ ⛔️
As you might guess, datetime is for... time and date? But not in just any format. Use the standardized time and date formats for HTML. This format needs an email/blog post by itself, and we'll talk about it further when we get to <time> in a few days.
We know the cite attribute is for URLs when used with <blockquote> or <q> (Day 3), but what about <ins> and <del>? Fortunately, it's the same. Specify a URL where you might track bugs or other changes where someone might get a more detailed explanation about the change.
<p>John's current employer is
<del datetime="2015-06-01" cite="https://www.example.com/resume.html">Google</del>
<del cite="https://www.example.com/resume.html" datetime="2017-01-08">Microsoft</del>
<ins cite="https://www.example.com/resume.html" datetime="2020-03-06">Yahoo</ins>.</p> Once again, because cite and datetime are attributes, neither is displayed on the website by default, either overtly or as a tooltip. You might use CSS or JavaScript to expose these if desired. Also, even though our example uses both attributes together, you may use them individually.
<mark>, <s>, <ins> and <del> demo
🖥 View the editing elements demo on CodePen.
Clarifying and Editing Unit Challenge
👩🏽💻 With that, we close our third unit on Clarifying and Editing! (The geekery starts tomorrow with Science and Geekery!)
🧩 Take our Unit Challenge to practice use of everything we’ve learned so far, especially <small>, <wbr> and ­, <sup> and <sub>, and all of today’s editing elements. Fork the pen, work the problem, and post your answer in our discussion.
More information and examples
📚 MDN: <mark>, <s>, <ins>, <del>
📚 WHATWG: <mark>, <s>, <ins> and <del>
Thank you for this great overview of the differences between the editing markup 🙂
One small mix-up: In the section "Commonly used attributes for <ins> and <del>" the attribute for specifying the edit date is called "timedate". According to MDN it is the other way around: "datetime".