“Implied paragraph bondaries”

<ins> and <del> are unusual in that they can contain contain phrasing content or flow content (in HTML 4-speak, they can be inline or block-level). For example, here’s an inserted paragraph that contains a phrasing content deletion:

<!-- block-level ins -->
<ins>
  <!-- inline del -->
  <p>Today I saw <del>flying monkeys</del> the doctor. The prognosis was not good.</p>
</ins>

Note that browsers will style these elements as inline by default, and you’ll need to include display: block; if you want to apply block-level styling. We’ll cover this later in the article.

The spec warns that the elements “should not cross implied paragraph boundaries”. These occur when there’s phrasing content (= text or inline elements) without a block-level element wrapper as a sibling of a block-level element. For example:

<div>
  <p>This text is in a block-level element.</p>
  <!-- implied paragraph boundary here -->
  Oh snap! Someone forgot the paragraph tags!
</div>

Of course, we always wrap our text, so this would never happen to us! But still, now you know ^_^

We also need to make sure each <ins> or <del> element is either inline or block-level, but not both. For example, don’t start in the middle of one paragraph and end in the middle of the next.

<!-- This is wrong -->
<p>Flying monkeys are <del>a common hazard.</p>
<p>Protect yourself by</del> screeching loudly.</p>

<!-- del as inline -->
<p>Flying monkeys are <del>a common hazard.</del></p>
<p><del>Protect yourself by</del> screeching loudly.</p>

<!-- del as block-level -->
<del>
  <p>Flying monkeys are a common hazard.</p>
  <p>Protect yourself by screeching loudly.</p>
</del>
<p>Flying monkeys are screeching loudly.</p>

datetime and cite attributes

The <ins> and <del> elements can also take two optional attributes, datetime and cite. You’ll be familiar with datetime from our article on the <time> element, and it works just the same here. Use it to record the date (and optionally the time) of the edit:

<p><del datetime="2012-09-13">Todo: add a datetime example here.</del>  <ins datetime="2012-09-14T10:21:44+09:00">This inserted text has the date and time it was added indicated via the datetime attribute.</ins></p>

cite will also be familiar if you’ve read our article Quoting and citing with blockquote, q, cite, and the cite attribute. It contains a URL linking to more information about the change.

<!-- Reference or in-page links are URLs too -->
<ins cite="#ins-1">This inserted text has a cite attribute, with a link to more information.</ins>

As this is generally hidden data, there’s a strong chance of it becoming metacrap. You can help avoid this by exposing cite with CSS:

<style>
ins[cite]:after,
del[cite]:after {
  content: " (" attr(cite) ")";
  font-size: 75%;
  line-height: 0;
  color: #888;
}
</style>
…
<ins cite="http://html5doctor.com/more-info/123">[Inserted text…] More information is available about this addition.</ins>

Even better, consider adding this link as content, for example:

<ins>This is an article update<a href="#ins-1">¹</a>.</ins>
…
<footer>
  <h2>Article changes</h2>
  <ol>
    <li id="ins-1">This addition was added on <time datetime="2012-09-14T10:21:44+09:00">14th September 2012</time> by Oli Studholme.</li>
  </ol>
</footer>

Finally, make sure when using <del> that this is a removal from the document you want/need to indicate. Other options include commenting the content out using <!-- -->, or deleting it from the HTML source.

s vs del: fight!

The <s> element seems dangerously close to stepping on the semantic toes of <del>, as I’m sure someone will helpfully point out in the comments :) However, there is a subtle but significant difference. <ins> and <del> are for showing editorial changes, generally to an already published page. The <s> element is for indicating information that is no longer relevant or accurate, but still provides some value, and is generally used to create a document with both old and new information at the same time.

Hixie describes the difference in this way:

[T]o put it another way, with <del> there is usually a view of the document that doesn’t include the <del> text. But with <s> there is no version of the document without the <s> text, because the <s> text is part of the document still, it’s just that it’s marked as old.

— Ian Hickson in the WHATWG IRC channel

Phrasing ins and del styling

Here are some styles I’ve used for <ins> and <del> in the past:

Flow ins and del styling

By default, <ins> and <del> are treated as inline elements by browsers, and styled as such. If you want to use block-level CSS, you’ll need to apply display: block;. Also, even the nicer styles above can be a little strong for whole paragraphs of text, not to mention useless for e.g. a block-level image. I style <ins> and <del> for phrasing use, and use classes with overrides for block-level use:

.ins-block {
  display: block;
  margin-left: -1em;
  border-left: 0.5em solid #47ad09;
  /* styles to override inline ins style, e.g.
  text-decoration: none; */
  padding-left: 0.5em;
}

.del-block {
  display: block;
  margin-left: -1em;
  border-left: 0.5em solid #91081f;
  /* styles to override inline del style, e.g.
  text-decoration: none; */
  padding-left: 0.5em;
  color: #777;
}

.labeled-ins-block {
  display: block;
  margin-left: -1.25em;
  border-left: 0.75em solid #47ad09;
  padding-left: 0.5em;
}
.labeled-ins-block:before {
  position: relative;
  display: block;
  content: "Addition";
  left: -1.55em; /* adjust to fit */
  top: 5em; /* adjust to fit */
  width: 0;
  height: 0;
  font: 0.6em/0 "Helvetica Neue", Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  color: #fff;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

Finally, WordPress users should note that my nemesis wpautop will laugh at your attempts to use block-level <ins> and <del>. Make sure you use “Format this post with: No Formatting”.