Using the HTML `<del>` Element to Mark Deleted Text: Semantic Markup for Removed Content

Learn how to semantically mark up deleted text in your HTML documents using the `<del>` element. This tutorial explains its purpose, its difference from the `` tag, and how to use it effectively for improved readability, accessibility, and to provide context for changes made to your content.

Using the HTML `<del>` Element to Mark Deleted Text

Understanding the `<del>` Element

The HTML `<del>` (deleted) element is used to indicate text that has been removed from a document. This adds semantic meaning, improving both readability and accessibility. Browsers typically render deleted text with a strikethrough, visually showing that the text is no longer current or accurate. The `<del>` tag is semantically different from the `<s>` tag. `<del>` specifically indicates removed content, while `<s>` is a more general strikethrough style. For marking up inserted text, use the `<ins>` tag. You can customize the appearance of deleted text using CSS (Cascading Style Sheets).

Using the `<del>` Element

To mark deleted text, simply wrap the text within the opening and closing `<del>` tags. For example:

Example: Basic Deleted Text

<p>My favorite color is <del>blue</del> green.</p>

Adding Context with Attributes

The `<del>` element supports attributes to provide context:

  • cite: A URL explaining why the text was deleted.
  • datetime: The date and time of deletion (YYYY-MM-DDThh:mm:ssTZD).
Example: `<del>` with Attributes

<p>My favorite color is <del datetime="2024-03-15T14:30:00Z" cite="https://example.com/revisions">blue</del> green.</p>

Browser Support for `<del>`

The `<del>` element has excellent support across all major modern browsers.

Browser Support
Chrome Yes
Edge Yes
Firefox Yes
Opera Yes
Safari Yes

Default Styling and CSS Customization

Most browsers render the `<del>` element with a strikethrough by default. You can customize this with CSS:

Example: Custom CSS for `<del>`

del {
  text-decoration: line-through;
  color: red;
}