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
, ordashed
.
.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.