HTML <del> del tag


The <del> tag in HTML is used to indicate that text has been deleted or removed from a document. It represents content that was previously part of the document but has been removed. This tag is often used to show changes in text or to provide historical context by marking deletions.

Syntax:

<p>This is a <del>deleted</del> word in the sentence.</p>

Key Characteristics:

  1. Visual Representation: By default, browsers display text inside the <del> tag with a strikethrough (line-through) effect. This visual cue indicates that the text has been removed.

  2. Semantic Meaning: The <del> tag provides semantic meaning, indicating that the enclosed text was removed or deleted. This can be important for versioning, historical context, or tracking changes in documents.

  3. Usage in Context: The <del> tag is often used in conjunction with the <ins> (insert) tag, which indicates newly added content. Together, they can show changes between versions of a document.

Example Usage:

Basic Example:

<p>We <del>removed</del> updated the policy last week.</p>

In this example:

  • The word "removed" is displayed with a strikethrough to indicate it was deleted.

Example with <ins>:

<p>We <del>removed</del> <ins>updated</ins> the policy last week.</p>

In this example:

  • The word "removed" is shown with a strikethrough, and "updated" is shown as inserted text.

CSS Styling:

You can customize the appearance of the <del> tag using CSS if the default styling does not fit your design.

Example CSS:

<style> del { text-decoration: line-through; /* Default behavior */ color: red; /* Change text color */ background-color: #f4cccc; /* Optional: Add background color */ } </style>

In this example:

  • The <del> text is styled with a red color and a background color to make the deletions more noticeable.

Accessibility and SEO:

  • Accessibility: The <del> tag helps screen readers and other assistive technologies understand that the text has been removed, providing context for users who rely on these tools.
  • SEO: The <del> tag does not directly impact SEO. However, providing clear and accurate information about changes or deletions in content can improve the quality and transparency of your documents, which can indirectly benefit SEO.