- Starting a New Paragraph
- Adding Author Contact Information
- Creating a Figure
- Specifying Time
- Marking Important and Emphasized Text
- Indicating a Citation or Reference
- Quoting Text
- Highlighting Text
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Specifying Fine Print
- Creating a Line Break
- Creating Spans
- Other Elements
This chapter is from the book
This chapter is from the book
This chapter is from the book
Noting Edits and Inaccurate Text
Sometimes you may want to indicate content edits that have occurred since the previous version of your page, or mark up text that is no longer accurate or relevant. There are two elements for noting edits: the ins element represents content that has been added, and the del element marks content that has been removed (
through 
). You may use them together or individually.
One item (the bicycle) has been added to this gift list since it was previously published, and purchased items have been removed, as noted by the del elements. You are not required to use del each time you use ins, or vice versa. Browsers differentiate the contents of each element visually by default 
.
...
<body>
<h1>Charitable Gifts Wishlist</h1>
<p>Please consider donating one or more of the following items to the village's community center:</p>
<ul>
<li><del>2 desks</del></li>
<li>1 chalkboard</li>
<li><del>4 <abbr>OLPC</abbr> (One Laptop Per Child) XO laptops </del></li>
<li><ins>1 bicycle</ins></li>
</ul>
</body>
</html>
Browsers typically display a line through deleted text and underline inserted text. You can change these treatments with CSS.
Both del and ins are rare in that they can surround both phrasing (“inline” in pre-HTML5 parlance) content and blocks of content, as shown here. However, default browser rendering varies 
.
... <body> <h1>Charitable Gifts Wishlist</h1><del><p>Please consider donating one or more of the following items to the village's community center:</p></del><ins><p>Please note that all gifts have been purchased.</p> <p>Thank you <em>so much</em> for your generous donations!</p></ins><del><ul> <li><del>2 desks</del></li> <li>1 chalkboard</li> <li><del>4 <abbr>OLPC</abbr> (One Laptop Per Child) XO laptops</del></li> <li><ins>1 bicycle</ins></li> </ul></del></body> </html>
)
Meanwhile, the s element notes content that is no longer accurate or relevant (it’s not for edits) (
and 
).
This example shows an ordered list (the ol element) of show times. The time slots for which ticket availability is no longer relevant have been marked with the s element. You can use s around any phrases, not just text within list items (li elements), but not around a whole paragraph or other “block-level” element like you can with del and ins.
...
<body>
<h1>Today's Showtimes</h1>
<p>Tickets are available for the following times today:</p>
<ol>
<li><ins>2 p.m. (this show just added!) </ins></li>
<li><s>5 p.m.</s> SOLD OUT</li>
<li><s>8:30 p.m.</s> SOLD OUT</li>
</ol>
</body>
</html>
The s element renders as a strikethrough by default in browsers.
To mark an edit involving newly inserted text
- Type <ins>.
- Type the new content.
- Type </ins>.
To mark an edit involving deleted text
- Place the cursor before the text or element you wish to mark as deleted.
- Type <del>.
- Place the cursor after the text or element you wish to mark as deleted.
- Type </del>.
To mark text that is no longer accurate or relevant
- Place the cursor before the text you wish to mark as no longer accurate or relevant.
- Type <s>.
- Place the cursor after the text you wish to mark.
- Type </s>.
Getting del and ins to Display Consistently
Browsers render content in a block-level del and ins inconsistently. Most display a strikethrough for del and an underline for ins on all nested content as expected, but at the least, Firefox does not 
.
You can rectify this with the following explicit CSS rules (the * means that every element inside del and ins gets the treatment):
del * {
text-decoration:
line-through;
}
ins * {
text-decoration: underline;
}
Please consult Chapter 8 if you aren’t sure how to add this CSS to a style sheet.
TIP
Text marked with the ins element is generally underlined 
. Since links are often underlined as well (if not in your site, then in many others), this may be confusing to visitors. You may want to use styles to change how inserted passages (or links) are displayed (see Chapter 10).
TIP
Text marked with the del element is generally struck out . Why not just erase it and be done with it? It depends on the context of your content. Striking it out makes it easy for sighted users to know what has changed. (Also, screen readers could announce the content as having been removed, but their support for doing so has been lacking historically.)