Carnival of HTML: Flair: Deleted and inserted text

  1. More about URLs
  2. Flair
  3. Entities (special characters)

If you’re writing news stories or blog postings, you’ll often amend your text later: you’ll discover that something you wrote was incorrect or misleading, and you’ll want to correct your text. But it’s bad form to change a news posting or a blog posting without warning; these types of pages are assumed to exist at a specific moment in time. HTML has a special tag for marking text that’s been “removed” as well as for marking the new text that replaces it. These are the <del> and <ins> tags.

Surround text that needs to be “deleted” with the <del> tag. Surround new text with the <ins> tag. Visual browses will usually mark deleted text by striking through it, and new text by underlining it.

Both of these tags allow two special attributes: the date and time of the change (datetime) and a URL to a web page explaining the change (cite). Neither of these attributes are required, although they obviously add greater precision. The “cite” attribute takes a full or partial URL just like the “href” and “src” attributes do.

The “datetime” attribute is a bit hard to read. The format is “YYYY-MM-DD” for the date portion, “hh:mm:ss” for the time portion, and either “Z” (universal time) or “+/-hh:mm” for the hours and minutes ahead of/behind universal time. All three sections are required; the date and the time are separated by a “T”. The datetime attribute as I write this is “2009-09-08T17:22:51-07:00” or “2009-09-08T00:22:51Z”. The hours, minutes and seconds are all required; however, if they are unknown each may be left at “00”. For example, “2009-09-08T00:00:00Z” if you only know the date, and “2009-09-08T00:22:00Z” if you don’t know the seconds.

You can use these tags to as if they were block-level tags, or you can use them as if they were character-level tags. Thus, you can mark text within a paragraph as deleted (or inserted), or you can mark a series of blocks or paragraphs as deleted or inserted.

For example:

<ol>

<li>

<del cite="http://www.hypocritae.com/?ART=6" datetime="1994-04-20T19:08:44-0400">

Whatever goes upon two legs is an enemy.

</del>

</li>

<li>

<del cite="http://www.hypocritae.com/?ART=6" datetime="1994-05-20T19:08:44-0400">

Whatever goes upon four legs, or has wings, is a friend.

</del>

</li>

<li>

<del cite="http://www.hypocritae.com/?ART=6" datetime="1994-06-20T19:08:44-0400">

No animal shall wear clothes.

</del>

</li>

<li>

<del cite="http://www.hypocritae.com/?ART=6" datetime="1994-07-20T19:08:44-0400">

No animal shall sleep in a bed.

</del>

</li>

<li>

<del cite="http://www.hypocritae.com/?ART=6" datetime="1994-08-20T19:08:44-0400">

No animal shall drink alcohol.

</del>

</li>

<li>

<del cite="http://www.hypocritae.com/?ART=6" datetime="1994-09-20T19:08:44-0400">

No animal shall kill any other animal.

</del>

</li>

<li>

All animals are equal.

<ins cite="http://www.hypocritae.com/?ART=6" datetime="1994-09-20T19:08:44-0400">

But some animals are more equal than others.

</ins>

</li>

</ol>

  1. More about URLs
  2. Flair
  3. Entities (special characters)