Delete with style

Nothing is permanent. Things tend to change time to time and we need to make changes according to new situation. Internet is perhaps one of the largest information pool where changes are made constantly. One day you may find a great website and the other day it may be out of business. When it’s only matter of minor changes, we need to update the content of our web pages. In case you make changes to your documents, use del element to mark any changes. Del element tag is an ideal way to show your audience changes in the content. Another powerful element is ins, which is used to show inserted text. This tag acts much like opposite to the del element.

The del element contains content that has been deleted. This element is useful in marking changes from one version of a document to the next. Through style sheets, authors can suggest an appropriate rendering, such as not displaying the deleted content or rendering the text with a strike-through style. Del element is unusual for HTML in that it may serve as either block-level or inline element (but not both). It may contain one or more words within a paragraph or contain one or more block-level elements such as paragraphs, lists and tables. The del element takes the following attributes in addition to the core ones:

Optionally explains the reason for deletion by giving the user a URI with information on why the content was deleted. Note that the cite attribute is a URI, that is a web address not a textual phrase. A brief explanation for the deletion can be given with the title attribute, which may be rendered as a "tooltip" by some browsers.
Optionally specifies the date and time when the change was made. Date and time is entered as ISO 8601 standard date, which has typical format of: YYYY-MM-DDThh:mm:ssTZD, where
four-digit year
two-digit month (01 is January, etc.)
two-digit day of month (01 through 31)
two digits of hour (00 through 23) (am/pm not allowed)
two digits of minute (00 through 59)
two digits of second (00 through 59)
time zone designator

The time zone designator is one of:

indicates UTC (Coordinated Universal Time). The "Z" must be uppercase.
indicates that the time is a local time which is hh hours and mm minutes ahead of UTC.
indicates that the time is a local time which is hh hours and mm minutes behind UTC.

A typical example may look like this:

<del cite="" datetime="2008-12-02T09:55:38+02:00" title="Outdated information">Simply remove deleted text.</del>

Depending on the browser the outcome may be rendered as follows: Simply remove deleted text.

Using styles with del

Many browsers show deleted portion of the text with strike-through emphasizing by default. This is however a feature of the user agent, which you can override using your style sheet. With proper styling information you may completely hide the deleted text. The following styling does the trick:

<style type="text/css"> del { display: none; } </style>

You may also mark the deletion with familiar strike-through effect by changing the styling as follows:

<style type="text/css"> del { text-decoration: line-through; } </style>

Although simply deleting or removing the outdated text is fast and easy, it does not serve the audience too well. Sometimes you must explain why the content has changed so dramatically. Marking deletions also works like version controlling. Using datetime and cite attributes you can keep track of changes as well as explanation of reasons. Supercharge the power of HTML and start using the rich set of helpful elements to show your professionalism.

Julkaistu maanantaina 1.12.2008 klo 19:32 CSS-luokassa avainsanalla Internet.

Domus Gaudium
Kuvaaminen kaupassa