Menu
HTML

Strike Text

Strike-through text in HTML is used to indicate that text is no longer relevant or should be treated as deleted. There are a couple of ways to achieve this effect in HTML.

 

Using the <s> Tag

The <s> tag is used to render strike-through text, signifying that the text is no longer accurate or relevant.

<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Strike-through Text Example</title>
</head>
<body>
    <p>This is a <s>striked-through</s> word.</p>
</body>
</html>

 

Using the <del> Tag

The <del> tag is used to mark text that has been deleted. This tag can convey to the reader that the text is removed content, often used in collaboration or revision contexts.

<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Deleted Text Example</title>
</head>
<body>
    <p>This is a <del>deleted</del> word.</p>
</body>
</html>

 

Key Differences

  1. Semantic Meaning: The <s> tag is used for stylistic strike-throughs, while the <del> tag indicates that the text has been deleted.
  2. Accessibility: The <del> tag provides a clear indication of deletion to screen readers, making it better for accessibility.

 

Best Practices

  • Use <del> when the strike-through text indicates deletion or correction.
  • Use <s> for stylistic strike-throughs without implying deletion.

 

Example Combining All Methods

Here is an example demonstrating the use of the <s> tag, the <del> tag, and CSS for strike-through text:

<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Strike-through Text Example</title>
</head>
<body>
    <p>This is a <s>striked-through</s> word using the `<s>` tag.</p>
    <p>This is a <del>deleted</del> word using the `<del>` tag.</p>
</body>
</html>

 

HTML