How to Add Strikethrough Text in HTML

Strikethrough in HTML text is a simple yet powerful way to convey changes, corrections, or updates in web content. This guide explains how to apply and effectively use the strikethrough effect in HTML, enhancing the clarity and dynamism of your web pages.

Strikethrough is a text style where a line is drawn through the text. It’s commonly used to indicate deletion, changes, or completion of tasks.

Strikethrough with HTML and CSS

The <s> and <del> Tags

HTML provides two tags for strikethrough: <s> and <del>.

• <s> is used for text that is no longer accurate or relevant but not deleted.

  <s>Outdated information</s>

• <del> indicates deletions and is useful for documents where tracking changes is important.

  <del>Deleted text</del>

CSS tex-decoration Property

Alternatively, use CSS for more control over the strikethrough style:

.strikethrough {
  text-decoration: line-through;
}

Apply this class in your HTML:

<p class="strikethrough">This text has a strikethrough.</p>

Advanced Styling with CSS

CSS allows you to customize the strikethrough line:

• Color: Change the line color to enhance visibility or match your design.

  .strikethrough {
    text-decoration: line-through;
    text-decoration-color: red;
  }

• Style: Apply different line styles like wavy, dotted, or dashed.

  .strikethrough {
    text-decoration: line-through wavy blue;
  }

Best Practices for Using Strikethrough

Ensure Readability

The primary goal should always be readability. Ensure the strikethrough doesn’t make the text difficult to read.

Appropriate Usage

Use strikethrough sparingly and in contexts where it adds value, such as showing corrections or updates.

Accessibility Considerations

Be mindful of users with visual impairments. Strikethroughs can be challenging for some to read, so provide alternative text descriptions if necessary.

Strikethrough in HTML is a useful tool for highlighting modifications or showing information evolution on your website. Whether using basic HTML tags or advanced CSS styling, strikethroughs, when used appropriately, can enhance the communication and design of your web content.