Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
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 (red_circle-a.jpg through red_circle-d.jpg). You may use them together or individually.

red_circle-a.jpg 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 gray_circle-b.jpg.

...

<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>
04_16.jpg

red_circle-b.jpg Browsers typically display a line through deleted text and underline inserted text. You can change these treatments with CSS.

red_circle-c.jpg 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 gray_circle-d.jpg.

...

<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) (red_circle-e.jpg and red_circle-f.jpg).

red_circle-e.jpg 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>
04_18.jpg

red_circle-f.jpg The s element renders as a strikethrough by default in browsers.

To mark an edit involving newly inserted text

  1. Type <ins>.
  2. Type the new content.
  3. Type </ins>.

To mark an edit involving deleted text

  1. Place the cursor before the text or element you wish to mark as deleted.
  2. Type <del>.
  3. Place the cursor after the text or element you wish to mark as deleted.
  4. Type </del>.

To mark text that is no longer accurate or relevant

  1. Place the cursor before the text you wish to mark as no longer accurate or relevant.
  2. Type <s>.
  3. Place the cursor after the text you wish to mark.
  4. Type </s>.
  • + Share This
  • 🔖 Save To Your Account