🚀 Your All-in-One Toolbox — 90+ Free Online Tools
Logo

HTML del Tag

Explore the HTML <del> tag, used to mark a range of text that has been deleted from a document, often rendered as strikethrough text.

Introduction to the HTML del Tag

The HTML <del> tag is used to mark a range of text that has been deleted from a document. Browsers typically render the content within a <del> tag as strikethrough text by default, but this can be changed with CSS. This tag is useful for indicating edits or revisions to content, such as in legal documents, collaborative editing platforms, or changelogs.

Basic Syntax

html
<p>The price was <del>$100</del> <ins>$90</ins>.</p>
<p>Please review the document: <del>The quick brown fox.</del> The quick red fox jumps over the lazy dog.</p>
In the first example, "$100" is marked as deleted, and often, the <ins> (inserted text) tag is used alongside it to show the new value.

Key Attributes

- cite: A URL that points to a resource explaining the reason for the deletion (e.g., a link to meeting minutes, a bug report, or a document detailing the changes). `html This feature has been removed due to user feedback. ` - datetime: Specifies the date and, optionally, the time when the deletion was made. The value must be a valid date string with an optional time. `html

The old policy required weekly reports has been updated.

` The format should be a valid date string, e.g., YYYY-MM-DD or YYYY-MM-DDThh:mm:ssZ (ISO 8601 format).

Purpose and Use Cases

- Tracking Changes: Clearly indicating text that has been removed from a document, often in conjunction with <ins> for inserted text. - Document Versioning: Showing differences between versions of a document. - Todo Lists: Marking items as completed by striking them through (though CSS might be a more flexible approach for pure styling). - Pricing Updates: Showing a previous price that is no longer valid.

<del> vs. <s> vs. CSS text-decoration

- <del> (Deleted Text): Semantically indicates that text has been deleted from the document. It implies a change in content status. - <s> (Strikethrough Text): Semantically indicates that text is no longer accurate, relevant, or correct, but is not necessarily deleted. For example, an old product name that is no longer in use but is still mentioned for historical context, or a discounted item where the original price is shown but is no longer the current price. `html

BrandX Laptops are now sold under the name BrandY Laptops.

Special offer: $50 only $25!

` - CSS text-decoration: line-through;: This is purely presentational. It applies a strikethrough style to text without adding any semantic meaning about deletion or irrelevance. If the strikethrough is just for visual effect and doesn't convey meaning, CSS is the appropriate choice. Choose the tag that best reflects the meaning of the strikethrough text.

Styling with CSS

While browsers default to a strikethrough, you can customize the appearance of <del> elements.
css
del {
  text-decoration: line-through;
  color: red;
  background-color: #fff; 
}

del[cite]::after {
  content: " (Reason: " attr(cite) ")";
  font-size: 0.8em;
  color: gray;
}

Accessibility

Screen readers may announce deleted text, often by saying "deleted" or "strikethrough" before or after reading the text. Providing cite and datetime attributes can offer additional context if assistive technologies choose to present them. It's important to ensure that content remains understandable even with deleted text. If the deletion makes the surrounding text confusing, consider rephrasing or providing clearer context.

Conclusion

The HTML <del> tag is the semantically correct way to mark text that has been removed from a document. By using it with its optional cite and datetime attributes, you can provide valuable context about the deletion. Differentiate its use from <s> (for irrelevant/incorrect text) and purely presentational CSS strikethrough for well-structured and meaningful HTML.
Back